/**
 * PDF Flipbook theme styles.
 * Values come from the Figma file (1920px frame, 1400px content).
 */

:root {
	--pf-ico-arrow: url("../images/icons/angle-right.svg");
	--pf-shadow-btn: 0 4px 2px rgba(0, 0, 0, 0.05);
	--pf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
/* Anchor links land below the sticky header */
:where(.pf-main [id]) { scroll-margin-top: var(--pf-header-bottom, 90px); }
/* clip, not hidden: with hidden, the body becomes a scroll container when the mobile menu
   locks page scroll, and the sticky header jumps out of view. */
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
.pf-main { overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }
:where(.wp-site-blocks) > .pf-site-header { position: sticky; top: 0; z-index: 100; }
body.admin-bar :where(.wp-site-blocks) > .pf-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* At 600px and below the admin bar scrolls away with the page, so the header sticks at the top
   and the admin bar's scroll padding is dropped (it made the page jump when the menu closed). */
@media (max-width: 600px) {
	body.admin-bar :where(.wp-site-blocks) > .pf-site-header { top: 0; }
	:root { scroll-padding-top: 0; }
}

/* GSAP: hide animated items until their tween starts (only when JS is on) */
.pf-js [class*="gsap-"]:not(.gsap-parallax):not(.gsap-marquee) { visibility: hidden; }
.pf-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pf-word__inner { display: inline-block; will-change: transform; }

/* ---------- Header ---------- */
.pf-header { position: relative; transition: box-shadow 0.3s ease; }
.pf-site-header.is-scrolled .pf-header { box-shadow: 0 6px 24px rgba(10, 26, 47, 0.06); }
.pf-logo { flex-shrink: 0; }
.pf-logo .wp-block-image { margin: 0; }
.pf-logo .wp-block-image img { display: block; }
.pf-logo .wp-block-image a, .pf-socials img { display: block; }
.pf-logo__text { margin: 0; white-space: nowrap; }
.pf-logo__text a { text-decoration: none; }
.pf-header__actions p { margin: 0; }
.pf-login a { color: inherit; text-decoration: none; }
.pf-login a:hover { color: var(--wp--preset--color--brand); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Menu links */
.pf-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--neutral); line-height: 26px; transition: color 0.2s ease; }
.pf-nav .wp-block-navigation-item__content:hover,
.pf-nav .pf-mega-item.is-open > .wp-block-navigation-item__content { color: var(--wp--preset--color--brand); }
.pf-nav .pf-nav-mobile-only { display: none !important; }

/* Arrow next to a mega menu item */
.pf-mega-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; margin: 0 0 0 3px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #cbd2dc; cursor: pointer; }
.pf-mega-toggle::before { content: ""; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: url("../images/icons/chevron-down.svg") center / contain no-repeat; mask: url("../images/icons/chevron-down.svg") center / contain no-repeat; transform: rotate(-90deg); transition: transform 0.35s var(--pf-ease); }
.pf-mega-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
.pf-mega-item.is-open > .pf-mega-toggle { color: var(--wp--preset--color--brand); }
.pf-mega-item.is-open > .pf-mega-toggle::before { transform: rotate(90deg); }

/* Regular core submenus (if you add any) */
.pf-nav .wp-block-navigation__submenu-icon { width: 18px; height: 18px; margin-left: 3px; color: #cbd2dc; }
.pf-nav .wp-block-navigation__submenu-icon svg { width: 10px; height: 10px; stroke-width: 2px; }

/* ---------- Mega menu panels (shared) ---------- */
.pf-mega__content { margin: 0 !important; }
.pf-mega-panel { position: relative; }
.pf-mega-title { margin: 0; padding-bottom: 5px; border-bottom: 1px solid var(--wp--preset--color--line); color: #22272c; font-family: var(--wp--preset--font-family--heading); font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -0.48px; }
.pf-mega-head { gap: 24px; padding-bottom: 5px; border-bottom: 1px solid var(--wp--preset--color--line); }
.pf-mega-head .pf-mega-title { padding-bottom: 0; border-bottom: 0; }
.pf-mega-all { flex-shrink: 0; margin: 0; padding-bottom: 6px; font-family: var(--wp--preset--font-family--dm-sans); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: -0.16px; }
.pf-mega-all a { display: inline-flex; align-items: center; gap: 4px; color: var(--wp--preset--color--brand); text-decoration: none; }
.pf-mega-all a::after { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--pf-ico-arrow) center / 18px no-repeat; mask: var(--pf-ico-arrow) center / 18px no-repeat; transition: transform 0.3s var(--pf-ease); }
.pf-mega-all a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-mega-all a:hover::after { transform: translateX(3px); }
.pf-mega-all a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; border-radius: 2px; }
.pf-mega-title--small { padding-bottom: 7px; color: #0f2d35; font-family: var(--wp--preset--font-family--body); font-size: 20px; letter-spacing: -0.4px; }
.pf-mega-grid { align-items: start; }
.pf-mega-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; margin: 0; border-radius: 100px; background: #f8f9fa; transition: background-color 0.2s ease; }
.pf-mega-icon img { display: block; width: 24px !important; height: 24px !important; }
.pf-mega-icon--small { width: 42px; height: 42px; background: var(--wp--preset--color--light); }
.pf-mega-icon--small img { width: 18px !important; height: 18px !important; }
.pf-mega-feature { position: relative; z-index: 0; }
.pf-mega-feature::before { content: ""; position: absolute; inset: -10px; z-index: -1; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; background: #f8f9fa; opacity: 0; transition: opacity 0.2s ease; }
.pf-mega-feature__title { margin: 0; color: #22272c; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: -0.36px; }
.pf-mega-feature__title a { color: inherit; text-decoration: none; }
.pf-mega-feature__title a::after { content: ""; position: absolute; inset: -10px; }
.pf-mega-feature__title a:focus-visible { outline: none; }
.pf-mega-feature:has(a:focus-visible)::before { opacity: 1; border-color: var(--wp--preset--color--brand); }
.pf-mega-feature__text { color: var(--wp--preset--color--paragraph); font-size: 16px; font-weight: 400; line-height: 26px; letter-spacing: -0.32px; }
.pf-mega-cols { margin-bottom: 0; }
.pf-mega-cols__list { padding-top: 39px; }
.pf-mega-app { padding-bottom: 19px; border-bottom: 1px solid var(--wp--preset--color--line); }
.pf-mega-app__head { align-items: center; }
.pf-mega-app__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; margin: 0; border-radius: 100px; background: #edf4ff; }
.pf-mega-app__icon img { display: block; width: 25px !important; height: 28px !important; object-fit: contain; }
.pf-mega-app__name { margin: 0; color: #0f2d35; font-family: var(--wp--preset--font-family--heading); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.24px; }
.pf-mega-app__tag { color: #afafaf; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.pf-mega-app__text, .pf-mega-app__link { margin-left: 58px !important; }
.pf-mega-app__text { color: var(--wp--preset--color--paragraph-alt); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; }
.pf-mega-app__link { font-family: var(--wp--preset--font-family--dm-sans); font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: -0.36px; }
.pf-mega-app__link a { color: #0f2d35; text-decoration: underline; text-underline-offset: 3px; }
.pf-mega-app__link a:hover { color: var(--wp--preset--color--brand); }
.pf-mega-media { margin: 0; }
.pf-mega-media img { display: block; width: 100%; height: auto; border-radius: 6px; }
.pf-mega-link { position: relative; }
.pf-mega-link__label { margin: 0; font-family: var(--wp--preset--font-family--dm-sans); font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.pf-mega-link__label a { color: #0f2d35; text-decoration: none; transition: color 0.2s ease; }
.pf-mega-link__label a::after { content: ""; position: absolute; inset: 0; }
.pf-mega-link:hover .pf-mega-icon--small, .pf-mega-link:focus-within .pf-mega-icon--small { background: var(--wp--preset--color--tag); }
.pf-mega-link:hover .pf-mega-link__label a, .pf-mega-link:focus-within .pf-mega-link__label a { color: var(--wp--preset--color--brand); }

/* ---------- Desktop menu (1024px and up) ---------- */
@media (min-width: 1024px) {
	.pf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
	.pf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block; width: 100%; position: static; z-index: auto; background-color: inherit; }
	.pf-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }

	/* Panels are positioned against the whole header, right under it */
	.pf-header .pf-nav,
	.pf-header .pf-nav .wp-block-navigation__responsive-close,
	.pf-header .pf-nav .wp-block-navigation__responsive-dialog,
	.pf-header .pf-nav .wp-block-navigation__responsive-container-content,
	.pf-header .pf-nav .wp-block-navigation__container,
	.pf-header .pf-nav .pf-mega-item { position: static; }

	.pf-mega {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 95;
		max-width: calc(100vw - 32px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, 14px);
		transition: opacity 0.22s ease, transform 0.35s var(--pf-ease), visibility 0s linear 0.35s;
	}
	.pf-mega--dropdown { left: var(--pf-mega-left, 50%); }
	.pf-mega-item.is-open > .pf-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity 0.22s ease, transform 0.35s var(--pf-ease), visibility 0s; }
	.pf-mega-panel { max-width: 100%; max-height: calc(100vh - var(--pf-header-bottom, 90px) - 16px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #f8f9fa; border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06); }
	.pf-mega-panel--features { width: 1252px; }
	.pf-mega-panel--apps { width: 1138px; }
	.pf-mega-panel--dropdown { width: 320px; box-shadow: 0 20px 50px rgba(32, 23, 92, 0.15); }
}
@media (min-width: 1024px) and (max-width: 1280px) {
	.pf-header__right { gap: 32px !important; }
	.pf-header__actions { gap: 24px !important; }
	.pf-mega-panel--features, .pf-mega-panel--apps { padding-left: 40px !important; padding-right: 40px !important; }
	.pf-mega-grid { column-gap: 28px !important; }
}

/* Blurred page behind an open desktop mega menu */
.pf-site-header::after {
	content: "";
	position: fixed;
	top: var(--pf-header-bottom, 90px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 92;
	background: rgba(10, 26, 47, 0.16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.pf-mega-open .pf-site-header::after { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s; }
.editor-styles-wrapper .pf-site-header::after { display: none; }

/* ---------- Mobile menu (below 1024px) ---------- */
@media (max-width: 1023px) {
	.pf-header__right { flex-direction: row-reverse; gap: 16px !important; }
	.pf-login { display: none; }

	/* Menu button: three lines from the design */
	.pf-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.pf-nav .wp-block-navigation__responsive-container-open { align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; color: var(--wp--preset--color--neutral); }
	.pf-nav .wp-block-navigation__responsive-container-open svg { display: none; }
	.pf-nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 20px;
		height: 14px;
		background:
			linear-gradient(currentColor, currentColor) 0 0 / 20px 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 6px / 20px 2px no-repeat,
			linear-gradient(currentColor, currentColor) 0 12px / 11px 2px no-repeat;
		transition: transform 0.35s var(--pf-ease);
	}

	/* The overlay stays in the page so it can fade and slide both ways */
	.pf-header .pf-nav .wp-block-navigation__responsive-container.wp-block-navigation__responsive-container {
		display: block !important;
		position: fixed !important;
		top: var(--pf-header-bottom, 84px) !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		width: auto !important;
		z-index: 100000 !important;
		padding: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: #fff !important;
		color: var(--wp--preset--color--neutral) !important;
		box-shadow: inset 0 1px 0 var(--wp--preset--color--line);
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		animation: none !important;
		transition: opacity 0.3s ease 0.05s, visibility 0s linear 0.45s;
	}
	.pf-header .pf-nav .wp-block-navigation__responsive-container.wp-block-navigation__responsive-container.is-menu-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.3s ease, visibility 0s;
	}
	.pf-nav .wp-block-navigation__responsive-close { max-width: none !important; }
	.pf-nav .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
	.pf-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		display: block !important;
		padding: 8px clamp(20px, 4vw, 40px) 48px !important;
		transform: translateY(-16px);
		transition: transform 0.5s var(--pf-ease);
	}
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { transform: none; }

	/* Close (X) button sits exactly where the menu button is */
	.pf-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: var(--pf-burger-top, 22px) !important;
		left: var(--pf-burger-left, auto) !important;
		right: auto !important;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 6px;
		background: var(--wp--preset--color--light);
		color: var(--wp--preset--color--neutral);
		opacity: 0;
		transform: rotate(-90deg) scale(0.6);
		transition: opacity 0.25s ease, transform 0.45s var(--pf-ease);
	}
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { opacity: 1; transform: none; }
	.pf-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open::before { transform: scale(0.6); }

	/* Menu rows */
	.pf-nav .wp-block-navigation__responsive-container .wp-block-navigation__container { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; width: 100%; }
	.pf-nav .wp-block-navigation__responsive-container .wp-block-navigation-item {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: space-between;
		width: 100%;
		text-align: left;
		border-bottom: 1px solid var(--wp--preset--color--line);
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.25s ease, transform 0.45s var(--pf-ease);
	}
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { opacity: 1; transform: none; }
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { transition-delay: 0.06s; }
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { transition-delay: 0.1s; }
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { transition-delay: 0.14s; }
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { transition-delay: 0.18s; }
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { transition-delay: 0.22s; }
	.pf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+6) { transition-delay: 0.26s; }
	.pf-nav .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		flex: 1 1 auto;
		padding: 16px 0 !important;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 20px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: -0.4px;
	}
	.pf-nav .wp-block-navigation__responsive-container .pf-nav-mobile-only { display: flex !important; }
	.pf-nav .wp-block-navigation__responsive-container .pf-mega-toggle { width: 44px; height: 44px; margin: 0; color: var(--wp--preset--color--neutral); }
	.pf-nav .wp-block-navigation__responsive-container .pf-mega-toggle::before { width: 12px; height: 12px; }

	/* Mega menus become accordions */
	.pf-nav .pf-mega { display: grid; flex-basis: 100%; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--pf-ease); }
	.pf-nav .pf-mega > .pf-mega__content { min-height: 0; overflow: hidden; }
	.pf-nav .pf-mega-item.is-open > .pf-mega { grid-template-rows: 1fr; }
	.pf-nav .pf-mega-panel { width: auto !important; padding: 0 0 18px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
	.pf-nav .pf-mega-title { display: none; }
	.pf-nav .pf-mega-head { padding: 4px 0 8px; border-bottom: 0; }
	.pf-nav .pf-mega-title + * { margin-top: 0 !important; }
	.pf-nav .pf-mega-grid { grid-template-columns: 1fr !important; gap: 2px !important; }
	.pf-nav .pf-mega-feature { align-items: center !important; padding: 6px 0; }
	.pf-nav .pf-mega-feature::before { inset: 0 -8px; }
	.pf-nav .pf-mega-feature__title { font-size: 16px; line-height: 24px; }
	.pf-nav .pf-mega-feature__title a::after { inset: 0 -8px; }
	.pf-nav .pf-mega-feature__text { display: none; }
	.pf-nav .pf-mega-icon { width: 40px; height: 40px; }
	.pf-nav .pf-mega-icon img { width: 20px !important; height: 20px !important; }
	.pf-nav .pf-mega-icon--small img { width: 18px !important; height: 18px !important; }
	.pf-nav .pf-mega-cols { flex-direction: column; gap: 16px !important; }
	.pf-nav .pf-mega-cols > .wp-block-column { flex-basis: auto !important; }
	.pf-nav .pf-mega-cols__list { padding-top: 4px; }
	.pf-nav .pf-mega-app { padding-bottom: 0; border-bottom: 0; }
	.pf-nav .pf-mega-app__name { font-size: 20px; }
	.pf-nav .pf-mega-cols__media { display: none !important; }
	.pf-nav .pf-mega-link { padding: 3px 0; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.pf-nav .pf-mega-grid { grid-template-columns: 1fr 1fr !important; column-gap: 24px !important; }
}
@media (max-width: 599px) {
	.pf-header { padding-top: 16px !important; padding-bottom: 16px !important; }
	.pf-logo { gap: 5px !important; }
	.pf-logo__text { font-size: 20px !important; line-height: 24px !important; letter-spacing: -0.6px !important; }
	.pf-logo .wp-block-image img { width: 28px !important; height: 28px !important; }
	.pf-header__right { gap: 12px !important; }
	.pf-header .wp-block-button__link { padding: 6px 10px 6px 14px; font-size: 14px; line-height: 22px; white-space: nowrap; }
	.pf-header .is-style-arrow .wp-block-button__link { gap: 6px; }
	.pf-header .pf-btn-account .wp-block-button__link { padding-inline: 14px; }
	.pf-header .is-style-arrow .wp-block-button__link::after { width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; }
}

/* Small phones (under 390px, e.g. 320px and 360px): the logo, "Try for free" and the menu button
   did not fit side by side and made the whole page scroll sideways. Tighten the header only here. */
@media (max-width: 389px) {
	.pf-header { padding-left: 14px !important; padding-right: 14px !important; }
	.pf-header__inner { gap: 10px !important; }
	.pf-logo__text { font-size: 18px !important; letter-spacing: -0.5px !important; }
	.pf-logo .wp-block-image img { width: 24px !important; height: 24px !important; }
	.pf-header__right { gap: 6px !important; }
	.pf-header .wp-block-button__link { padding: 6px 12px; font-size: 13px; }
	.pf-header .is-style-arrow .wp-block-button__link::after { display: none; }
	.pf-nav .wp-block-navigation__responsive-container-open { width: 36px; height: 36px; }
}

/* Side app tabs (Shopify / Wix) */
.pf-side-apps {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	transform: translateY(-50%);
	margin: 0 !important;
}
/* Each tab shows the same 58px strip (its icon) and slides fully in on hover */
/* Only the visible strip takes clicks: the paragraph around each link is as wide as the whole tab,
   and its hidden part would otherwise block whatever sits under it (the last column of a grid). */
.pf-side-apps, .pf-side-apps .pf-side-app { pointer-events: none; }
.pf-side-apps .pf-side-app { margin: 0 !important; }
.pf-side-app a { pointer-events: auto; }
.pf-side-app a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 16px 12px 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: #22272c;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transform: translateX(calc(100% - 58px));
	transition: transform 0.35s ease-in-out, gap 0.35s ease-in-out;
}
.pf-side-app a:hover, .pf-side-app a:focus-visible { transform: translateX(0); }
.pf-side-app a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: -2px; }
.pf-side-app a::before { content: ""; flex-shrink: 0; background: center / contain no-repeat; transition: scale 0.2s ease, transform 0.2s ease, background-color 0.2s ease; }
/* Shopify: the icon starts larger and settles to its normal size */
.pf-side-app--shopify a { gap: 16px; }
.pf-side-app--shopify a:hover, .pf-side-app--shopify a:focus-visible { gap: 10px; }
.pf-side-app--shopify a::before { width: 19px; height: 22px; background-image: url("../images/icons/shopify-side.svg"); scale: 1.3; }
.pf-side-app--shopify a:hover::before, .pf-side-app--shopify a:focus-visible::before { scale: 1; }
/* Wix: the logo slides in and turns dark on a white badge */
.pf-side-app--wix a::before { width: 38px; height: 20px; border-radius: 2px; background-image: url("../images/icons/wix-side.svg"); background-size: 31px 12px; transform: translateX(-8px); }
.pf-side-app--wix a:hover::before, .pf-side-app--wix a:focus-visible::before { background-color: #fff; background-image: url("../images/icons/wix-side-dark.svg"); transform: translateX(0); }
@media (max-width: 600px) { .pf-side-apps { display: none; } }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--pf-ease); }
.wp-block-button__link:active { transform: translateY(1px); }
.pf-btn-lg .wp-block-button__link { font-size: 18px; line-height: 28px; padding: 11px 24px; }
.pf-btn-xl .wp-block-button__link { padding: 15px 23px; font-size: 18px; line-height: 28px; letter-spacing: -0.36px; }
/* Teal button (program "Apply" buttons), as on the Divi site: darker teal on hover, the arrow stays put */
.pf-btn-secondary .wp-block-button__link { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--secondary); color: #fff; transition-duration: 0.3s; }
.pf-btn-secondary .wp-block-button__link:hover { border-color: var(--wp--preset--color--secondary); background: #0c8e8e; color: #fff; }
.pf-btn-secondary.is-style-arrow .wp-block-button__link:hover::after { transform: none; }

.is-style-arrow .wp-block-button__link,
.pf-arrow .wp-block-button__link,
.pf-btn-shopify .wp-block-button__link,
.pf-btn-pdf .wp-block-button__link,
.pf-btn-reviews .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; }

.is-style-arrow .wp-block-button__link::after,
.pf-arrow .wp-block-button__link::after {
	content: "";
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--pf-ico-arrow) center / 24px 24px no-repeat;
	mask: var(--pf-ico-arrow) center / 24px 24px no-repeat;
	transition: transform 0.25s var(--pf-ease);
}
.is-style-arrow .wp-block-button__link:hover::after,
.pf-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }

.is-style-outline-dark .wp-block-button__link,
.is-style-outline-brand .wp-block-button__link,
.is-style-outline-light .wp-block-button__link { background: transparent; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05); }
.is-style-outline-dark .wp-block-button__link { color: var(--wp--preset--color--neutral); border-color: var(--wp--preset--color--neutral); }
.is-style-outline-dark .wp-block-button__link:hover { background: var(--wp--preset--color--neutral); color: #fff; }
.is-style-outline-brand .wp-block-button__link { color: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }
.is-style-outline-brand .wp-block-button__link:hover { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: #fff; }
.is-style-outline-light .wp-block-button__link { color: #fff; border-color: #fff; }
.is-style-outline-light .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--neutral); border-color: #fff; }

.pf-btn-shopify .wp-block-button__link::before,
.pf-btn-pdf .wp-block-button__link::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: url("../images/icons/shopify.svg") center / contain no-repeat; }
.pf-btn-pdf .wp-block-button__link::before { background-image: url("../images/icons/icon-pdf.svg"); }

.pf-btn-block { width: 100%; }
.pf-btn-block .wp-block-button__link { width: 100%; padding: 10px; border-radius: 4px; box-shadow: none; }

.pf-btn-reviews .wp-block-button__link { font-family: var(--wp--preset--font-family--heading); font-size: 20px; font-weight: 600; line-height: 1.5; padding: 12px 24px; }
.pf-btn-reviews .wp-block-button__link::after { content: ""; width: 24px; height: 24px; background: url("../images/icons/arrow-export.svg") center / contain no-repeat; }

/* ---------- Shared bits ---------- */
.is-style-tag {
	width: fit-content;
	margin-inline: auto !important;
	padding: 8px 20px;
	border-radius: 6px;
	background: var(--wp--preset--color--tag);
	color: var(--wp--preset--color--neutral);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.15px;
}
.is-style-tag.pf-tag-lg { line-height: 24px; letter-spacing: -0.28px; }
.is-style-tag.pf-tag-xl { padding: 10px 20px; font-size: 16px; line-height: 26px; letter-spacing: -0.32px; }
.is-style-tag.pf-tag-teal { background: #135558; color: rgba(255, 255, 255, 0.9); }
.is-style-tag.pf-tag-line { background: var(--wp--preset--color--line); color: #343434; }
.is-style-tag.pf-tag-dark { display: flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--wp--preset--color--dark-card); color: rgba(255, 255, 255, 0.8); font-family: var(--wp--preset--font-family--dm-sans); font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.pf-tag-book::before { content: ""; width: 24px; height: 24px; background: url("../images/icons/icon-school-book.svg") center / contain no-repeat; }
.pf-sub-dark { color: #fff; opacity: 0.8; }
.wp-block-list.is-style-plain { list-style: none; padding-left: 0; }
/* Page sections sit edge to edge: design page templates, and the page editor for them (their content area has no side padding) */
.pf-main .pf-page-content > * + *,
body.post-type-page .is-root-container.wp-block-post-content-is-layout-flow > * + * { margin-block-start: 0; }
body.post-type-page .is-root-container.wp-block-post-content-is-layout-flow { padding-left: 0; padding-right: 0; }

.pf-check { display: flex; align-items: center; gap: 8px; margin: 0; }
.pf-check::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: url("../images/icons/check.svg") center / contain no-repeat; }

/* ---------- Grid backgrounds ---------- */
.pf-grid-bg { position: relative; background: #fff url("../images/grid-hero.svg") center top / 1920px auto repeat-x; }
.pf-hero.pf-grid-bg { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f8fafc 100%), url("../images/grid-hero.svg"); background-size: 100% 100%, 1920px auto; background-repeat: no-repeat, repeat-x; background-position: center, center top; }
.pf-grid-bg--contact { background-image: url("../images/grid-contact.svg"); background-repeat: repeat-y; }

/* ---------- Hero ---------- */
.pf-hero h1 { margin: 0; }
.pf-hero__content > p { margin-top: 20px; }
.pf-hero__content .wp-block-buttons { gap: 10px; }
.pf-video { overflow: hidden; }
.pf-video .wp-block-cover__inner-container { display: flex; align-items: center; justify-content: center; }
.pf-play { position: relative; display: flex !important; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto !important; border-radius: 100px; background: #fff; transition: transform 0.3s var(--pf-ease); }
.pf-play:hover { transform: scale(1.06); }
.pf-play a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 100px; }
.pf-play img { width: 24px !important; height: 24px !important; }
.pf-play__ring { position: absolute; inset: 0; border-radius: 100px; border: 2px solid #fff; pointer-events: none; }
@media (max-width: 1299px) {
	.pf-hero > .wp-block-columns { flex-wrap: wrap !important; }
	.pf-hero > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.pf-hero__content { max-width: 760px; }
}
@media (max-width: 781px) {
	.pf-video { min-height: 360px !important; }
	.pf-hero__content .wp-block-buttons { margin-top: 36px !important; }
}

/* ---------- Live previews ---------- */
.pf-books { gap: 25px; }
/* Each card is a closed book. assets/js/books.js adds two magazine pages under the cover; on
   hover the cover (image and label) swings open on the left spine and the two pages lift after it,
   fanned out, while the button comes forward. Leaving the card closes them in reverse order. */
.pf-book {
	--pf-acc: #a8764f;
	position: relative;
	width: 212px;
	height: 300px;
	flex-shrink: 0;
	border-radius: 3px;
	transform-style: preserve-3d;
	perspective: 1000px;
}
.pf-book--v2 { --pf-acc: #d4522a; }
.pf-book--v3 { --pf-acc: #1e5a6b; }
.pf-book--v4 { --pf-acc: #2f9a63; }
.pf-book:hover { z-index: 2; }
.pf-book > * { margin: 0 !important; }
.pf-book__img, .pf-book__img img { width: 100%; height: 100%; display: block; }
.pf-book__img { overflow: hidden; border-radius: 3px; box-shadow: 0 1px 2px rgba(10, 26, 47, 0.08); }
.pf-book__img img { object-fit: cover; transition: filter 0.45s ease; }
.pf-book--v3 .pf-book__img { box-sizing: border-box; border: 0.717px solid #e7ecf2; }

/* Turning parts: the delay going in (--in) runs front to back, the delay going out (--out) back to front */
.pf-book__img, .pf-book__label, .pf-pg {
	transform-origin: 0 50%;
	transition: transform 0.7s var(--pf-ease) var(--out, 0s), filter 0.5s ease;
}
.pf-book__img { --out: 0.1s; transform: translateZ(4px); }
.pf-book__label { --out: 0.1s; transform: translateZ(5px); transform-origin: -4.5px 50%; }
.pf-book--v3 .pf-book__label { transform-origin: -3px 50%; }
.pf-pg--1 { --in: 0.06s; --out: 0.05s; transform: translateZ(3px); }
.pf-pg--2 { --in: 0.12s; transform: translateZ(2px); }

/* The page block under the cover */
.pf-book::before {
	content: "";
	position: absolute;
	inset: 2px 0 2px 0;
	border-radius: 0 3px 3px 0;
	background:
		repeating-linear-gradient(90deg, #fff 0 2px, #dfe4eb 2px 3px) right / 6px 100% no-repeat,
		#f4f1ea;
	box-shadow: 0 18px 30px -12px rgba(10, 26, 47, 0.35);
	pointer-events: none;
}

/* ----- Inner pages (sizes in em, so they scale with the book) ----- */
.pf-pg {
	position: absolute;
	inset: 2px 2px 2px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 2.3em 2em 3em 2.3em;
	overflow: hidden;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, rgba(10, 26, 47, 0.12), rgba(10, 26, 47, 0) 8%), #fffdf8;
	color: #13202f;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 7px;
	line-height: 1.4;
	text-align: left;
	pointer-events: none;
}
.pf-pg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 26, 47, 0.18), rgba(10, 26, 47, 0) 40%); opacity: 0; transition: opacity 0.6s ease; }
.pf-pg > * { position: relative; flex-shrink: 0; }
.pf-pg b { font-weight: inherit; }
.pf-pg__eyebrow { display: flex; align-items: center; gap: 0.8em; color: var(--pf-acc); font-size: 0.9em; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.pf-pg__eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.3; }
.pf-pg__title { color: #0e1a29; font-family: var(--wp--preset--font-family--heading); font-size: 2.75em; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.pf-pg__title--sm { font-size: 1.85em; line-height: 1.1; }
.pf-pg__folio { position: absolute; right: 1.7em; bottom: 1.1em; font-size: 0.9em; letter-spacing: 0.12em; opacity: 0.45; }
.pf-pg__line { display: block; height: 0.36em; border-radius: 1em; background: rgba(19, 32, 47, 0.12); }
.pf-pg__line:nth-child(3n) { width: 84%; }
.pf-pg__line:last-child, .pf-pg__line.is-short:last-child { width: 58%; }
/* Artwork: a poster-style landscape (sun and two hills) in tints of the accent color */
.pf-pg__photo {
	--sun: 30% 34%;
	display: block;
	border-radius: 2px;
	background:
		radial-gradient(circle at var(--sun), #fff8ec 0 13%, transparent 13.5%),
		radial-gradient(130% 75% at 85% 112%, color-mix(in srgb, var(--pf-acc) 78%, #000) 0 50%, transparent 50.5%),
		radial-gradient(110% 65% at 5% 118%, color-mix(in srgb, var(--pf-acc) 55%, #13202f) 0 50%, transparent 50.5%),
		linear-gradient(165deg, color-mix(in srgb, var(--pf-acc) 30%, #fff4e4), color-mix(in srgb, var(--pf-acc) 62%, #fff));
}

/* 1: contents */
.pf-pg__toc { margin: 0.4em 0 0; padding: 0; list-style: none; font-size: 1.15em; }
.pf-pg__toc li { display: flex; align-items: baseline; gap: 0.7em; margin: 0; padding: 0.55em 0; border-bottom: 1px dashed rgba(19, 32, 47, 0.14); }
.pf-pg__toc em { color: var(--pf-acc); font-style: normal; font-weight: 700; }
.pf-pg__toc span { flex: 1; font-weight: 500; }
.pf-pg__toc small { font-size: 1em; opacity: 0.45; }
.pf-pg__photo--strip { --sun: 72% 40%; flex: 1; min-height: 3em; margin-top: 0.4em; }

/* 2: feature */
.pf-pg__photo--hero { --sun: 68% 38%; height: 46%; margin: -2.3em -2em 0.4em -2.3em; border-radius: 0; }
.pf-pg__photo--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 35, 0) 45%, rgba(10, 20, 35, 0.55)); }
.pf-pg__photo--hero em { position: absolute; left: 0.45em; bottom: 0.2em; z-index: 1; color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 3.6em; font-style: normal; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.pf-pg__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.pf-pg__cols > span { display: flex; flex-direction: column; gap: 0.6em; }
.pf-pg__pull { display: block; height: 3.4em; margin: 0.3em 0; border-radius: 2px; background: color-mix(in srgb, var(--pf-acc) 14%, #fff); box-shadow: inset 2px 0 var(--pf-acc); }
.pf-pg--2 .pf-pg__title { padding-left: 0.6em; border-left: 2px solid var(--pf-acc); }

.pf-book--v4 { height: 302px; }
.pf-book__label {
	position: absolute;
	left: 4.5px;
	right: 4.5px;
	bottom: 3.4px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 14px;
	border-radius: 5.733px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: rgba(15, 45, 53, 0.9);
	white-space: nowrap;
}
.pf-book--v1 .pf-book__label { background: #e0c6ad; border: 1.433px solid #d7bba1; }
.pf-book--v2 .pf-book__label { background: linear-gradient(to left, rgba(100, 111, 115, 0.9), #19171f, rgba(148, 150, 164, 0.9)); color: rgba(255, 255, 255, 0.9); }
.pf-book--v3 .pf-book__label { left: 3px; right: 3px; background: linear-gradient(to right, #1e4652 1.38%, #fff 48.5%, #fff 101.38%); }
.pf-book--v4 .pf-book__label { background: linear-gradient(89.84deg, #fff 2.54%, #e0ffe1 52.19%, #fff 99.97%); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.pf-book__btn { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateZ(6px); transition: opacity 0.25s ease; }
.pf-book__btn .wp-block-button__link { padding: 11px 24px; line-height: 24px; letter-spacing: -0.28px; box-shadow: 0 10px 24px -6px rgba(10, 26, 47, 0.45); transform: translateY(10px); transition: transform 0.45s var(--pf-ease); }

/* Open: hover, or keyboard focus on the button. The button stays flat, in front of the open cover. */
.pf-book.has-pages:is(:hover, :has(:focus-visible)) :is(.pf-book__img, .pf-book__label, .pf-pg) { transition: transform 0.8s var(--pf-ease) var(--in, 0s), filter 0.5s ease; }
.pf-book.has-pages:is(:hover, :has(:focus-visible)) .pf-book__img { transform: rotateY(-50deg) translateZ(4px); box-shadow: 14px 10px 28px -6px rgba(10, 26, 47, 0.35); }
.pf-book.has-pages:is(:hover, :has(:focus-visible)) .pf-book__label { transform: rotateY(-50deg) translateZ(5px); }
.pf-book.has-pages:is(:hover, :has(:focus-visible)) .pf-pg--1 { transform: rotateY(-32deg) translateZ(3px); }
.pf-book.has-pages:is(:hover, :has(:focus-visible)) .pf-pg--2 { transform: rotateY(-16deg) translateZ(2px); }
.pf-book.has-pages:is(:hover, :has(:focus-visible)) .pf-pg::after { opacity: 1; }
.pf-book.has-pages .pf-book__btn { transform: translateZ(190px) scale(0.84); } /* ahead of the open cover edge, at its normal size */
.pf-book:is(:hover, :has(:focus-visible)) .pf-book__img img { filter: brightness(0.55); }
.pf-book:is(:hover, :has(:focus-visible)) .pf-book__btn { opacity: 1; transition-delay: 0.12s; }
.pf-book:is(:hover, :has(:focus-visible)) .pf-book__btn .wp-block-button__link { transform: none; transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
	.pf-book.has-pages:is(:hover, :has(:focus-visible)) :is(.pf-book__img, .pf-book__label, .pf-pg) { transform: none; }
}

/* ---------- Partners ---------- */
.pf-partners h2 { margin: 0; }
.pf-partner { margin: 0; }
.pf-partner img { display: block; object-fit: contain; }
/* Still row (reduced motion, or before the script runs): the logos wrap, centered */
.pf-partners__logos:not(.gsap-marquee) { align-items: center; row-gap: 32px !important; column-gap: clamp(28px, 3vw, 56px) !important; }
/* Endless logo strip (built by animations.js). Spacing is a margin, not a gap, so half the row is exactly one loop. */
.pf-logo-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pf-logo-marquee .pf-partners__logos { width: max-content; max-width: none !important; margin: 0 !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center; gap: 0 !important; will-change: transform; }
.pf-logo-marquee .pf-partner { flex: none; margin: 0 clamp(40px, 3.6vw, 70px) 0 0 !important; }
/* Phones: logos a quarter smaller */
@media (max-width: 781px) {
	.pf-partner { zoom: 0.75; }
}

/* ---------- How it works ---------- */
.pf-how { position: relative; }
.pf-steps { align-items: stretch !important; }
.pf-step { position: relative; display: flex; flex-direction: column; }
.pf-step__card { position: relative; z-index: 1; flex: 1; transition: transform 0.35s var(--pf-ease), background-color 0.35s ease; }
.pf-step__card:hover { transform: translateY(-6px); background-color: #263642 !important; }
.pf-step__card .wp-block-image { margin: 0; }
.pf-step__text { opacity: 0.8; min-height: 90px; }
.pf-step__num {
	position: absolute;
	top: 235px;
	left: 28%;
	z-index: 0;
	margin: 0 !important;
	font-size: 120px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -6px;
	color: #fff;
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
}
@media (min-width: 782px) and (max-width: 1100px) {
	.pf-steps { flex-wrap: wrap !important; }
	.pf-steps > .wp-block-column { flex-basis: calc(50% - 15px) !important; flex-grow: 0; }
}
@media (max-width: 1100px) { .pf-step__num { display: none; } }
/* Stacked cards on phones: the min-height that lines the cards up side by side only leaves empty space */
@media (max-width: 781px) { .pf-step__text { min-height: 0; } }
/* Tablets: two step cards per row instead of one wide card per row */
@media (min-width: 600px) and (max-width: 781px) {
	.pf-steps.pf-steps { flex-wrap: wrap !important; }
	.pf-steps.pf-steps > .wp-block-column.wp-block-column { flex-basis: calc(50% - 15px) !important; flex-grow: 0; }
}

/* ---------- Features ---------- */
.pf-feature { transition: transform 0.35s var(--pf-ease), box-shadow 0.35s ease, border-color 0.35s ease; }
.pf-feature:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 26, 47, 0.08); border-color: transparent !important; }
.pf-feature-grid { row-gap: 40px !important; }
.pf-icon-circle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; border-radius: 100px; background: var(--wp--preset--color--secondary); }
.pf-icon-circle img { width: 24px !important; height: 24px !important; }

/* ---------- Responsive ---------- */
.pf-responsive h2 { margin: 0; }
.pf-responsive h2 + p { margin-top: 20px; }
.pf-devices { margin: 0; }
.pf-devices img { width: 100%; height: auto; }

/* ---------- Pricing ---------- */
.pf-billing {
	width: fit-content;
	margin-inline: auto !important;
	padding: 8px;
	gap: 4px !important;
	border-radius: 6px;
	background: var(--wp--preset--color--tag);
}
.pf-billing__opt { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 16px; border-radius: 4px; color: #22272c; font-size: 16px; font-weight: 500; line-height: 1.625; letter-spacing: -0.32px; cursor: pointer; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; }
.pf-billing__opt.is-active { background: var(--wp--preset--color--brand); color: #fff; }
/* Blocks for one billing period (plan buttons): only the selected period's block shows */
.pf-pricing.is-annual .pf-monthly-only, .pf-pricing:not(.is-annual) .pf-annual-only { display: none !important; }
.pf-save { margin-left: 4px; padding: 6px 6px 6px 10px; border-radius: 4px; background: var(--wp--preset--color--secondary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -0.24px; white-space: nowrap; }
/* Phones: the switch fills the width and the badge sits on the corner of the annual option */
@media (max-width: 600px) {
	.pf-billing { width: 100%; flex-wrap: nowrap !important; }
	.pf-billing__opt { flex: 1 1 0; justify-content: center; text-align: center; }
	.pf-billing__opt .pf-save { position: absolute; top: 0; right: 0; transform: translate(10%, -50%); }
}
.pf-plans { align-items: stretch; }
/* Home pricing (4 plans): the auto-fill grid gave 3 + 1 at 1024px. Two by two until all four fit in a row. */
@media (min-width: 600px) and (max-width: 1279px) {
	.pf-plans:not(.pf-ppage__plans) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 28px !important; }
}
@media (max-width: 599px) { .pf-plans:not(.pf-ppage__plans) { row-gap: 28px !important; } }
.pf-plan { position: relative; transition: transform 0.35s var(--pf-ease), box-shadow 0.35s ease; }
.pf-plan:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(10, 26, 47, 0.08); }
.pf-plan h3 + p { color: var(--wp--preset--color--paragraph); }
.pf-price { display: flex; align-items: center; gap: 3px; }
.pf-price strong { font-family: var(--wp--preset--font-family--heading); font-size: 38px; font-weight: 700; line-height: 1.4; letter-spacing: -0.76px; color: var(--wp--preset--color--neutral); }
.pf-price span { font-size: 12px; line-height: 24px; letter-spacing: -0.24px; color: var(--wp--preset--color--paragraph); }
.pf-plan > .pf-popular + * { margin-top: 0 !important; }
.pf-popular { position: absolute; top: -14px; left: 17px; margin: 0 !important; padding: 2px 12px; border-radius: 6px; line-height: 24px; letter-spacing: -0.24px; }
.pf-plan-list { list-style: none; margin-bottom: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pf-plan-list li { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 14px; line-height: 24px; letter-spacing: -0.28px; color: var(--wp--preset--color--neutral); }
.pf-plan-list li::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; border-radius: 100px; background: var(--wp--preset--color--tag) url("../images/icons/price-check.svg") center / 14px 14px no-repeat; }
.pf-plan-list li.is-off { color: #878787; }
.pf-plan-list li.is-off::before { background-image: url("../images/icons/price-cross.svg"); }

/* ---------- Try your PDF ---------- */
.pf-try h2 { margin: 0; }
.pf-upload__drop { transition: border-color 0.3s ease, background-color 0.3s ease; }
.pf-upload__drop.is-dragover { border-color: var(--wp--preset--color--brand) !important; background-color: #f2f8fa !important; }
.pf-upload__drop > * { margin: 0 !important; }

/* ---------- Testimonials ---------- */
.pf-testi { height: 100%; transition: transform 0.35s var(--pf-ease), box-shadow 0.35s ease; }
.pf-testi:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(10, 26, 47, 0.06); }
.pf-testi > * { margin: 0 !important; }
.pf-testi .pf-quote { margin: 0; }
.pf-testi__foot { width: 100%; margin-top: auto !important; }
.pf-testi--big .pf-testi__foot { padding-top: 40px; }
.pf-testi .pf-person { margin-top: auto !important; }
.pf-testi--big .pf-testi__foot .pf-person, .pf-testi:not(.pf-testi--small) .pf-testi__foot .pf-person { margin-top: 0 !important; }
.pf-avatar { margin: 0; flex-shrink: 0; }
.pf-avatar img { border-radius: 100px; border: 1px solid var(--wp--preset--color--line); object-fit: cover; }
.pf-testi--dark .pf-avatar img { border: 0; }
.pf-person p { margin: 0; }
.pf-person p + p { margin-top: -2px; }
.pf-client-logo { margin: 0; }
@media (min-width: 1024px) {
	.pf-testi--big { min-height: 714px; }
	.pf-testi:not(.pf-testi--big) { min-height: 347px; }
}
@media (max-width: 1023px) {
	.pf-testi-grid { flex-wrap: wrap !important; }
	.pf-testi-grid > .wp-block-column { flex-basis: 100% !important; }
}
/* Small laptops: the side-by-side layout squeezed the small cards and left a tall empty gap in the big one.
   Use the tablet layout instead: the big card full width, the other cards in rows below it. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.pf-testi-grid.pf-testi-grid { flex-wrap: wrap !important; }
	.pf-testi-grid.pf-testi-grid > .wp-block-column { flex-basis: 100% !important; }
	.pf-testi--big, .pf-testi:not(.pf-testi--big) { min-height: 0; }
}
.pf-rating { align-items: center; }
.pf-rating p { margin: 0; }
.pf-rating__icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0; border-radius: 100px; background: var(--wp--preset--color--secondary); }
.pf-rating__icon img { width: 24px !important; height: 24px !important; }
.pf-stars { display: flex; align-items: center; gap: 12px; }
.pf-stars::before { content: ""; width: 124px; height: 24px; background: url("../images/icons/stars.svg") left center / contain no-repeat; }
.pf-rating__claim { position: relative; }
.pf-rating__claim::before { content: ""; position: absolute; left: -25px; top: 50%; width: 1px; height: 40px; background: #c9cfd6; transform: translateY(-50%); }
@media (max-width: 781px) { .pf-rating__claim::before { display: none; } }

/* ---------- Use cases ---------- */
.pf-usecases { position: relative; overflow: hidden; }
.pf-usecases::after { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--neutral); opacity: 0.4; pointer-events: none; z-index: 1; }
.pf-usecases__head { position: relative; z-index: 2; }
.pf-usecases h2 { margin: 0; }
.pf-marquee { width: max-content; flex-wrap: nowrap !important; margin-left: -66px; will-change: transform; }
.pf-marquee.is-reverse { margin-left: -523px; }
.pf-usecase {
	width: 180px;
	height: 200px;
	flex-shrink: 0;
	gap: 28px !important;
	padding: 24px 18px;
	border: 1px solid #405b6f;
	border-radius: 6px;
	background: #263642;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--pf-ease);
}
.pf-usecase:hover { background: #2d4152; border-color: var(--wp--preset--color--secondary); transform: translateY(-4px); }
.pf-usecase > * { margin: 0 !important; }
.pf-usecase__icon img { height: 60px; width: auto; }
.pf-usecase__label { width: 144px; font-size: 18px; line-height: 1.6; letter-spacing: -0.36px; color: #eaeaea; }

/* ---------- Contact ---------- */
.pf-contact .pf-section-head > p:first-child { color: var(--wp--preset--color--paragraph); }
.pf-form-card { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); }
.pf-form { display: flex; flex-direction: column; gap: 20px; max-width: 860px; margin: 0 auto; }
.pf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pf-field { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.pf-field label { font-size: 16px; line-height: 26px; color: #000; }
.pf-field input, .pf-field textarea, .pf-newsletter input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--input);
	font: 400 16px/26px var(--wp--preset--font-family--body);
	letter-spacing: -0.32px;
	color: var(--wp--preset--color--neutral);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.pf-field input { height: 60px; }
.pf-field textarea { height: 160px; resize: vertical; }
.pf-field input::placeholder, .pf-field textarea::placeholder, .pf-newsletter input::placeholder { color: var(--wp--preset--color--paragraph); opacity: 1; }
.pf-field input:focus, .pf-field textarea:focus { outline: none; border-color: var(--wp--preset--color--brand); background: #fff; box-shadow: 0 0 0 3px rgba(9, 99, 126, 0.12); }
.pf-captcha { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 88px; width: fit-content; max-width: 100%; padding: 9px 23px; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; background: var(--wp--preset--color--input); }
.pf-captcha__ok { display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 28px; color: #000; }
.pf-captcha__ok::before { content: ""; width: 32px; height: 32px; border-radius: 100px; background: var(--wp--preset--color--success) url("../images/icons/check-white.svg") center / 24px no-repeat; }
.pf-captcha__brand { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: 98px; }
.pf-captcha__brand small { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; }
.pf-captcha__brand a { color: var(--wp--preset--color--paragraph); text-decoration: underline; }
.pf-captcha__brand i { width: 6px; height: 6px; border-radius: 100px; background: var(--wp--preset--color--paragraph); }
/* Two classes so the global button styles (16px/26px) do not win */
.pf-form .pf-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin-top: 20px;
	padding: 11px 23px;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 6px;
	background: var(--wp--preset--color--brand);
	box-shadow: var(--pf-shadow-btn);
	color: #fff;
	font: 500 18px/28px var(--wp--preset--font-family--body);
	letter-spacing: -0.36px;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.pf-form__submit::after { content: ""; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--pf-ico-arrow) center / 24px no-repeat; mask: var(--pf-ico-arrow) center / 24px no-repeat; }
.pf-form__submit:hover { background: var(--wp--preset--color--neutral); border-color: var(--wp--preset--color--neutral); }
@media (max-width: 600px) {
	.pf-form__row { grid-template-columns: 1fr; }
	.pf-captcha { gap: 24px; width: 100%; }
}

/* ---------- FAQ (pattern pdfflipbook/faq, core Details blocks) ---------- */
.pf-faq-section .pf-faq__title { margin-bottom: 0; color: #22272c; font-size: clamp(32px, 1.6vw + 18px, 48px); }
.pf-faq-section .pf-faq__lead { max-width: 753px; margin-inline: auto; color: var(--wp--preset--color--paragraph); font-size: 18px; line-height: 28px; letter-spacing: -0.36px; }
.pf-faq__item {
	--pf-faq-x: 20px;
	padding: 0 var(--pf-faq-x);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.02);
	transition: box-shadow 0.3s ease;
}
.pf-faq__item:hover { box-shadow: 0 4px 20px rgba(10, 26, 47, 0.06); }
.pf-faq__item[open] { padding-bottom: 28px; }
.pf-faq__item > summary {
	position: relative;
	display: block;
	margin: 0 calc(var(--pf-faq-x) * -1);
	padding: 19px calc(var(--pf-faq-x) + 38px) 19px var(--pf-faq-x);
	border-radius: 6px;
	color: #22272c;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: -0.36px;
	list-style: none;
}
.pf-faq__item > summary::-webkit-details-marker { display: none; }
.pf-faq__item > summary:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: -2px; }
/* Plus icon drawn with two bars; the upright bar turns flat to make the minus */
.pf-faq__item > summary::before,
.pf-faq__item > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--pf-faq-x) + 3px);
	width: 12px;
	height: 1.5px;
	margin-top: -0.75px;
	border-radius: 2px;
	background: var(--wp--preset--color--paragraph);
	transition: transform 0.38s var(--pf-ease), background-color 0.25s ease, opacity 0.38s ease;
}
.pf-faq__item > summary::after { transform: rotate(90deg); }
.pf-faq__item > summary:hover::before,
.pf-faq__item > summary:hover::after,
.pf-faq__item[open]:not(.is-closing) > summary::before,
.pf-faq__item[open]:not(.is-closing) > summary::after { background: #22272c; }
.pf-faq__item[open]:not(.is-closing) > summary::before { transform: scaleX(0.8); }
.pf-faq__item[open]:not(.is-closing) > summary::after { transform: rotate(180deg) scaleX(0.8); opacity: 0; }
.pf-faq__item > summary + * { margin-block-start: 5px; }
.pf-faq__item > :not(summary) { max-width: 732px; }
.pf-faq__item p { color: var(--wp--preset--color--paragraph); font-size: 16px; font-weight: 400; line-height: 26px; letter-spacing: -0.32px; }
@media (max-width: 600px) {
	.pf-faq__item { --pf-faq-x: 16px; }
	.pf-faq__item > summary { padding-block: 16px; font-size: 16px; line-height: 26px; letter-spacing: -0.32px; }
	.pf-faq__item[open] { padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-faq__item > summary::before,
	.pf-faq__item > summary::after { transition: none; }
}

/* ---------- CTA ---------- */
.pf-cta h2 { margin: 0; }
.pf-cta .wp-block-button:not([class*="is-style-outline"]) .wp-block-button__link:hover { border-color: var(--wp--preset--color--secondary); background: var(--wp--preset--color--secondary); color: #fff; }
.pf-cta .pf-cta__title { max-width: 523px; margin-inline: auto; }
@media (max-width: 600px) {
	.pf-cta .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.pf-cta .wp-block-button { width: 100%; }
	.pf-cta .wp-block-button__link { display: block; width: 100%; text-align: center; }
}

/* ---------- Tabs (assets/js/tabs.js) ---------- */
.pf-tabs { scroll-margin-top: calc(var(--pf-header-bottom, 90px) + 24px); }

/* ---------- Footer ---------- */
.pf-footer__top .wp-block-columns { justify-content: space-between; }
.pf-socials .wp-block-image { margin: 0; }
.pf-socials a { display: block; transition: transform 0.25s var(--pf-ease), opacity 0.25s ease; }
.pf-socials a:hover { transform: translateY(-2px); opacity: 0.7; }
.pf-newsletter { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; background: var(--wp--preset--color--input); }
.pf-newsletter input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: -0.28px; }
.pf-newsletter input:focus { outline: none; }
.pf-newsletter button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border: 0; border-radius: 6px; background: var(--wp--preset--color--brand); box-shadow: var(--pf-shadow-btn); color: #fff; font: 500 14px/24px var(--wp--preset--font-family--body); letter-spacing: -0.28px; cursor: pointer; }
.pf-newsletter button::after { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--pf-ico-arrow) center / 20px no-repeat; mask: var(--pf-ico-arrow) center / 20px no-repeat; }
.pf-newsletter button:hover { background: var(--wp--preset--color--neutral); }
.pf-footer__cols h3 { margin: 0; color: var(--wp--preset--color--neutral); }
/* Five link columns (Product, Shopify, Support, Company, More from ThemeNcode): three per row on tablets, two on phones */
.pf-footer__cols { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 32px !important; align-items: start; }
@media (max-width: 1100px) {
	.pf-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pf-footer__cols > * { margin: 0 !important; min-width: 0; }
@media (max-width: 781px) {
	.pf-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px !important; }
}
.pf-footer-links { list-style: none; margin-bottom: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-footer-links li { margin: 0; font-weight: 400; }
.pf-footer-links a { color: var(--wp--preset--color--paragraph); text-decoration: none; transition: color 0.25s ease; }
.pf-footer-links a:hover { color: var(--wp--preset--color--brand); }
/* Links to other sites get a small arrow */
.pf-footer-links a[target="_blank"]::after { content: "\2197"; /* ↗, escaped so it shows right whatever encoding the CSS is read with */ display: inline-block; margin-left: 4px; font-size: 0.8em; opacity: 0.5; transition: transform 0.25s var(--pf-ease), opacity 0.25s ease; }
.pf-footer-links a[target="_blank"]:hover::after { opacity: 1; transform: translate(1px, -1px); }
.pf-footer__bottom .wp-block-group { align-items: center; }
.pf-made-by p { opacity: 0.8; line-height: 1.5; }
.pf-made-by .wp-block-image { margin: 0; }
.pf-copyright { opacity: 0.8; }
.pf-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; opacity: 0.7; line-height: 1.5; }
.pf-legal a { text-decoration: none; white-space: nowrap; }
.pf-legal a:hover { text-decoration: underline; }
/* Support avatar sits on the line between the link area and the bottom bar, as in the design */
.pf-footer__bottom { position: relative; }
.pf-footer__bottom > .pf-support { position: absolute; top: -30px; right: max(20px, calc((100% - 1400px) / 2 - 150px)); z-index: 5; width: 60px; max-width: none; margin: 0 !important; }
.pf-support a { position: relative; display: block; width: 60px; height: 60px; border-radius: 100px; box-shadow: 0 8px 24px rgba(10, 26, 47, 0.18); transition: transform 0.3s var(--pf-ease); }
.pf-support a:hover { transform: scale(1.06); }
.pf-support img { width: 60px !important; height: 60px !important; border-radius: 100px; display: block; }
.pf-support a::after { content: ""; position: absolute; left: 47px; top: 41px; width: 14px; height: 14px; border-radius: 100px; background: var(--wp--preset--color--success); }
@media (max-width: 781px) {
	.pf-footer__bottom .wp-block-group { justify-content: center !important; text-align: center; }
}

/* Editor */
.editor-styles-wrapper .pf-side-apps { position: absolute; transform: none; top: 120px; }
.editor-styles-wrapper [class*="gsap-"] { visibility: visible !important; }
.editor-styles-wrapper .pf-marquee { margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Small screens: two demo books per row */
@media (max-width: 600px) {
	.pf-books { gap: 14px !important; }
	.pf-book { width: calc(50% - 7px); height: auto; aspect-ratio: 212 / 300; }
	.pf-book__label { height: 32px; padding: 0 6px; font-size: 11px; }
	.pf-pg { font-size: 5.6px; }
}
.editor-styles-wrapper .pf-play > div,
.editor-styles-wrapper .pf-play .components-resizable-box__container { width: 24px !important; height: 24px !important; margin: 0 auto; }

/* Editor: let people click and edit every text inside the mega menu panels */
.editor-styles-wrapper .pf-mega-feature__title a::after,
.editor-styles-wrapper .pf-mega-link__label a::after { display: none; }
.editor-styles-wrapper .pf-mega-panel { margin-left: auto; margin-right: auto; }
.editor-styles-wrapper .pf-mega-panel { max-height: none; overflow: visible; }

/* Editor: keep the "Most Popular" badge above its card */
.editor-styles-wrapper .pf-plan > .pf-popular { position: absolute !important; width: fit-content; }