/*
 * Proofdy front theme (Hub-inspired). Scoped to body.pf-front so the cabinet is not affected.
 * Widgets (.altumcode-*) are never restyled here.
 */
.pf-front {
	--pf-ink: #12131a;
	--pf-text: #4a5163;
	--pf-muted: #5f6679; /* WCAG AA: >= 5:1 on white and on the soft backgrounds */
	--pf-line: #e8eaf2;
	--pf-bg: #ffffff;
	--pf-soft: #f6f7fb;
	--pf-primary: #375282;
	--pf-primary-2: #4a6bb0;
	--pf-grad-1: #667eea;
	--pf-grad-2: #764ba2;
	--pf-radius: 24px;
	--pf-radius-sm: 16px;
	--pf-shadow: 0 1px 2px rgba(18, 19, 26, .04), 0 12px 32px -12px rgba(18, 19, 26, .12);
	--pf-shadow-lg: 0 2px 4px rgba(18, 19, 26, .04), 0 30px 60px -20px rgba(55, 82, 130, .28);
	font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--pf-text);
	background: var(--pf-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.pf-front h1, .pf-front h2, .pf-front h3, .pf-front h4, .pf-front h5, .pf-front h6,
.pf-front .h1, .pf-front .h2, .pf-front .h3, .pf-front .h4, .pf-front .h5, .pf-front .h6 {
	font-family: 'Onest', 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--pf-ink);
	letter-spacing: -0.02em;
}

.pf-front a:not([class*="altumcode"]) { color: var(--pf-primary); }
.pf-front a:not([class*="altumcode"]):hover { color: var(--pf-grad-2); }
.pf-front .text-primary { color: var(--pf-primary) !important; }
.pf-front .text-muted { color: var(--pf-muted) !important; }

.pf-gradient-text {
	background: linear-gradient(100deg, var(--pf-grad-1) 0%, var(--pf-grad-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--pf-grad-2);
}

/* ---------- Buttons ---------- */
.pf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.5rem;
	border-radius: 999px;
	font-family: 'Onest', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	border: 1px solid transparent;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
	white-space: nowrap;
	cursor: pointer;
}
.pf-btn:hover { transform: translateY(-2px); }
.pf-btn-dark { background: var(--pf-ink); color: #fff !important; box-shadow: 0 10px 24px -10px rgba(18, 19, 26, .6); }
.pf-btn-dark:hover { background: #262836; color: #fff !important; }
.pf-btn-light { background: #fff; color: var(--pf-ink) !important; border-color: var(--pf-line); }
.pf-btn-light:hover { border-color: #cfd3e1; color: var(--pf-ink) !important; box-shadow: var(--pf-shadow); }
.pf-btn-grad { background: linear-gradient(100deg, var(--pf-grad-1), var(--pf-grad-2)); color: #fff !important; box-shadow: 0 12px 28px -12px rgba(118, 75, 162, .7); }
.pf-btn-grad:hover { color: #fff !important; }
.pf-btn-sm { padding: .55rem 1.1rem; font-size: .925rem; }
.pf-btn svg { flex-shrink: 0; }

/* ---------- Pills / labels ---------- */
.pf-pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	border: 1px solid rgba(18, 19, 26, .06);
	backdrop-filter: blur(6px);
	font-size: .85rem;
	font-weight: 500;
	color: var(--pf-ink);
	line-height: 1.2;
}
.pf-pill svg { width: 18px; height: 18px; flex-shrink: 0; }

.pf-label {
	display: inline-block;
	margin-bottom: .9rem;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: #eef1fb;
	color: var(--pf-primary);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pf-section { padding: 5rem 0; }
.pf-section-sm { padding: 3rem 0; }
.pf-section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.pf-section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); font-weight: 700; line-height: 1.15; margin-bottom: .9rem; }
.pf-section-head p { font-size: 1.075rem; color: var(--pf-muted); margin: 0; }

/* ---------- Navbar ---------- */
.pf-nav-wrap {
	position: sticky;
	top: 0;
	z-index: 1030;
	padding: 14px 0;
	transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.pf-nav-wrap.pf-scrolled {
	background: rgba(255, 255, 255, .85);
	backdrop-filter: saturate(160%) blur(12px);
	box-shadow: 0 1px 0 rgba(18, 19, 26, .06);
	padding: 8px 0;
}
.pf-front .pf-nav { padding: 0; }
.pf-front .pf-nav .navbar-brand { padding: 0; margin-right: 2rem; }
.pf-front .pf-nav .navbar-logo { max-height: 36px; width: auto; }
.pf-front .pf-nav .nav-link {
	color: var(--pf-ink) !important;
	font-weight: 500;
	font-size: .975rem;
	padding: .5rem .9rem !important;
	border-radius: 999px;
	transition: background-color .2s ease;
}
.pf-front .pf-nav .nav-link:hover { background: rgba(18, 19, 26, .05); }
.pf-front .pf-nav .navbar-avatar { width: 28px; height: 28px; border-radius: 50%; }
.pf-nav-toggler {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--pf-line);
	background: #fff;
	color: var(--pf-ink);
	display: inline-flex; align-items: center; justify-content: center;
}
.pf-nav-actions { display: flex; align-items: center; gap: .5rem; }

@media (max-width: 991.98px) {
	.pf-front .pf-nav .navbar-collapse {
		margin-top: 12px;
		padding: 12px;
		background: #fff;
		border: 1px solid var(--pf-line);
		border-radius: var(--pf-radius-sm);
		box-shadow: var(--pf-shadow);
	}
	.pf-nav-actions { flex-direction: column; align-items: stretch; margin-top: .5rem; }
	.pf-nav-actions .pf-btn { width: 100%; }
	.pf-front .pf-nav .dropdown-menu { box-shadow: none; border: 0; }
}

/* ---------- Hero ---------- */
.pf-hero { padding: 8px 0 0; }
.pf-hero-card {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	padding: 72px 56px;
	background:
		radial-gradient(60% 70% at 0% 0%, #e9e6ff 0%, rgba(233, 230, 255, 0) 70%),
		radial-gradient(55% 65% at 100% 10%, #ffe3f1 0%, rgba(255, 227, 241, 0) 70%),
		radial-gradient(60% 70% at 70% 100%, #dcefff 0%, rgba(220, 239, 255, 0) 70%),
		#f7f6fd;
}
.pf-hero-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(55, 82, 130, .12) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(70% 60% at 75% 45%, #000 0%, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 60% at 75% 45%, #000 0%, transparent 75%);
	pointer-events: none;
}
.pf-hero-card > .row { position: relative; z-index: 1; }
.pf-hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.pf-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.9rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin-bottom: 1.25rem;
}
.pf-hero-text { font-size: 1.15rem; line-height: 1.6; color: var(--pf-text); max-width: 540px; margin-bottom: 2rem; }
.pf-hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.pf-hero-note { margin-top: 1rem; font-size: .9rem; color: var(--pf-muted); }
.pf-hero-note span { white-space: nowrap; }

.pf-stats { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.pf-stat {
	padding: .75rem 1.1rem;
	border-radius: var(--pf-radius-sm);
	background: rgba(255, 255, 255, .7);
	border: 1px solid rgba(18, 19, 26, .06);
	min-width: 130px;
}
.pf-stat strong { display: block; font-family: 'Onest', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--pf-ink); line-height: 1.1; }
.pf-stat span { font-size: .82rem; color: var(--pf-muted); }

/* Floating real widgets */
.pf-hero-visual { position: relative; height: 520px; }
.pf-float { position: absolute; pointer-events: none; animation: pf-float 6s ease-in-out infinite; }
.pf-float-1 { top: 0; right: 0; animation-delay: 0s; }
.pf-float-2 { top: 150px; left: -10px; animation-delay: -2s; }
.pf-float-3 { top: 300px; right: 10px; animation-delay: -4s; }
.pf-float-4 { bottom: 0; left: 30px; animation-delay: -1s; }
@keyframes pf-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .pf-float { animation: none; } }

.pf-hero-mobile-widgets { display: grid; gap: 12px; margin-top: 2rem; pointer-events: none; justify-items: center; }
.pf-hero-mobile-widgets > div { max-width: 100%; }

@media (max-width: 1199.98px) {
	.pf-hero-card { padding: 56px 40px; }
	.pf-hero-visual { transform: scale(.88); transform-origin: top right; }
}
@media (max-width: 767.98px) {
	.pf-hero-card { padding: 36px 20px; border-radius: 24px; }
	.pf-hero-text { font-size: 1.025rem; }
	.pf-hero-ctas .pf-btn { flex: 1 1 100%; }
	.pf-stat { flex: 1 1 calc(50% - .75rem); min-width: 0; }
	.pf-section { padding: 3.5rem 0; }
}

/* ---------- Trust strip ---------- */
.pf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; padding: 2rem 0 0; color: var(--pf-muted); font-size: .95rem; }
.pf-trust span { display: inline-flex; align-items: center; gap: .5rem; }
.pf-trust i, .pf-trust svg { color: var(--pf-primary); }

/* ---------- Features grid ---------- */
.pf-feature {
	height: 100%;
	padding: 1.25rem .75rem 1rem;
	border-radius: var(--pf-radius-sm);
	background: #fff;
	border: 1px solid var(--pf-line);
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pf-feature:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow); border-color: transparent; }
.pf-feature svg { width: 76px; height: 76px; }
.pf-feature h6 { margin: .5rem 0 0; font-size: .95rem; font-weight: 600; line-height: 1.3; }

/* ---------- How it works ---------- */
.pf-step {
	position: relative;
	height: 100%;
	padding: 2rem;
	border-radius: var(--pf-radius);
	background: var(--pf-soft);
	border: 1px solid var(--pf-line);
}
.pf-step-num {
	width: 48px; height: 48px;
	border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--pf-grad-1), var(--pf-grad-2));
	color: #fff;
	font-family: 'Onest', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 10px 20px -10px rgba(118, 75, 162, .8);
}
.pf-step h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.pf-step p { margin: 0; color: var(--pf-muted); }

/* ---------- Shopify band ---------- */
.pf-shopify {
	border-radius: 32px;
	padding: 56px;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(149, 191, 71, .22) 0%, rgba(149, 191, 71, 0) 70%),
		radial-gradient(50% 70% at 0% 100%, rgba(102, 126, 234, .15) 0%, rgba(102, 126, 234, 0) 70%),
		#f5f8ef;
	border: 1px solid #e3ebd3;
}
.pf-shopify h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.15; }
.pf-check { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.pf-check li { position: relative; padding-left: 2rem; margin-bottom: .75rem; color: var(--pf-ink); font-weight: 500; }
.pf-check li::before {
	content: '';
	position: absolute; left: 0; top: .1rem;
	width: 1.3rem; height: 1.3rem;
	border-radius: 50%;
	background: #95bf47 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.pf-shopify-visual {
	position: relative;
	padding: 2rem;
	border-radius: var(--pf-radius);
	background: #fff;
	box-shadow: var(--pf-shadow-lg);
	pointer-events: none;
	display: grid;
	gap: 14px;
	justify-items: center;
}
@media (max-width: 767.98px) {
	.pf-shopify { padding: 32px 20px; border-radius: 24px; }
	.pf-shopify-visual { padding: 1.25rem .75rem; }
}

/* ---------- Integrations (CMS) ---------- */
.pf-cms-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pf-front .pf-cms-grid .index-brand-icon-container {
	margin: 0 !important;
	width: 76px; height: 76px;
	border-radius: 20px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 16px;
	background: #fff !important;
	border: 1px solid var(--pf-line);
	transition: transform .25s ease, box-shadow .25s ease;
}
.pf-front .pf-cms-grid .index-brand-icon-container:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow); }
.pf-front .pf-cms-grid .index-brand-icon-container svg { width: 100%; height: 100%; }

/* ---------- Interactive preview ---------- */
.pf-preview-stage {
	position: sticky;
	top: 100px;
	min-height: 360px;
	border-radius: var(--pf-radius);
	padding: 2rem 1.25rem;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(70% 60% at 20% 10%, #ece8ff 0%, rgba(236, 232, 255, 0) 70%),
		radial-gradient(70% 60% at 90% 90%, #ffe6f2 0%, rgba(255, 230, 242, 0) 70%),
		#f7f7fc;
	border: 1px solid var(--pf-line);
}
.pf-preview-stage-label {
	position: absolute; top: 16px; left: 20px;
	font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-muted);
}
.pf-preview-stage-label i { color: #22c55e; font-size: .55rem; vertical-align: middle; margin-right: .35rem; }
.pf-front #notification_preview { max-width: 100%; }
.pf-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-types label { margin: 0; cursor: pointer; }
.pf-type {
	height: 100%;
	display: flex; gap: .85rem; align-items: flex-start;
	padding: 1rem;
	border-radius: var(--pf-radius-sm);
	background: #fff;
	border: 1px solid var(--pf-line);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pf-type:hover { transform: translateY(-2px); box-shadow: var(--pf-shadow); }
.pf-types input:checked + .pf-type { border-color: var(--pf-grad-1); box-shadow: 0 0 0 3px rgba(102, 126, 234, .18); }
.pf-type .notification-avatar { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px !important; }
.pf-type-title { font-weight: 600; color: var(--pf-ink); line-height: 1.25; margin-bottom: .2rem; font-size: .95rem; }
.pf-type-desc { font-size: .82rem; color: var(--pf-muted); line-height: 1.4; }
@media (max-width: 575.98px) {
	.pf-types { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
	.pf-preview-stage { position: relative; top: 0; min-height: 260px; margin-bottom: 1.5rem; }
}

/* ---------- Notification handlers ---------- */
.pf-handlers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pf-handler {
	display: flex; align-items: center; gap: .75rem;
	padding: 1rem 1.1rem;
	border-radius: var(--pf-radius-sm);
	background: #fff;
	border: 1px solid var(--pf-line);
	font-weight: 600; color: var(--pf-ink); font-size: .95rem;
	min-width: 0;
}
.pf-handler span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-handler i, .pf-handler svg { font-size: 1.25rem; flex-shrink: 0; }
@media (max-width: 991.98px) { .pf-handlers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- API ---------- */
.pf-api-code {
	border-radius: var(--pf-radius);
	background: #12131a;
	color: #d7dcef;
	padding: 1.75rem;
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .85rem;
	line-height: 1.8;
	overflow-x: auto;
	box-shadow: var(--pf-shadow-lg);
}
.pf-api-code .pf-c { color: #a5b4fc; }
.pf-api-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin: 1.5rem 0 2rem; font-size: .95rem; }

/* ---------- Testimonials ---------- */
.pf-quote {
	height: 100%;
	padding: 2rem;
	border-radius: var(--pf-radius);
	background: #fff;
	border: 1px solid var(--pf-line);
	display: flex; flex-direction: column;
}
.pf-quote-stars { color: #f5b301; margin-bottom: 1rem; letter-spacing: 2px; }
.pf-quote p { color: var(--pf-ink); font-size: 1.02rem; line-height: 1.6; flex: 1; }
.pf-quote-author { display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem; }
.pf-quote-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pf-quote-author strong { display: block; color: var(--pf-ink); line-height: 1.2; }
.pf-quote-author span { font-size: .85rem; color: var(--pf-muted); }

/* ---------- Plans (restyle only, markup untouched) ---------- */
.pf-front .pf-plans .card { border-radius: var(--pf-radius) !important; border: 1px solid var(--pf-line) !important; box-shadow: none; transition: box-shadow .25s ease, transform .25s ease; }
.pf-front .pf-plans .card:hover { box-shadow: var(--pf-shadow-lg); transform: translateY(-4px); }
.pf-front .pf-plans .btn-primary,
.pf-front .pf-plans .btn-outline-primary { border-radius: 999px; font-weight: 600; }
.pf-front .pf-plans .btn-primary { background: var(--pf-ink); border-color: var(--pf-ink); }
.pf-front .pf-plans .btn-primary:hover { background: #262836; border-color: #262836; }

/* ---------- FAQ ---------- */
.pf-front .pf-faq .index-faq .card {
	border: 1px solid var(--pf-line) !important;
	border-radius: var(--pf-radius-sm) !important;
	margin-bottom: 12px;
	box-shadow: none;
}
.pf-front .pf-faq .index-faq .card .btn { font-family: 'Onest', sans-serif; font-size: 1.05rem; text-align: left; white-space: normal; color: var(--pf-ink) !important; }
.pf-front .pf-faq .index-faq .card .btn span:first-child { padding-right: 1rem; }

/* ---------- Final CTA ---------- */
.pf-cta {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	padding: 72px 40px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(50% 80% at 10% 0%, rgba(102, 126, 234, .55) 0%, rgba(102, 126, 234, 0) 70%),
		radial-gradient(50% 80% at 90% 100%, rgba(118, 75, 162, .6) 0%, rgba(118, 75, 162, 0) 70%),
		#14152a;
}
.pf-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.12; margin-bottom: 1rem; }
.pf-cta p { color: rgba(255, 255, 255, .78); font-size: 1.1rem; max-width: 620px; margin: 0 auto 2rem; }
.pf-cta .pf-btn-light { border-color: transparent; }
.pf-cta .pf-btn-ghost { background: rgba(255, 255, 255, .1); color: #fff !important; border-color: rgba(255, 255, 255, .25); }
.pf-cta .pf-btn-ghost:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 767.98px) { .pf-cta { padding: 48px 20px; border-radius: 24px; } .pf-cta .pf-btn { width: 100%; } }

/* ---------- Blog ---------- */
.pf-post {
	height: 100%;
	border-radius: var(--pf-radius);
	background: #fff;
	border: 1px solid var(--pf-line);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}
.pf-post:hover { box-shadow: var(--pf-shadow); transform: translateY(-4px); }
.pf-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pf-post-body { padding: 1.5rem; }
.pf-post h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin-bottom: .5rem; }
.pf-post h3 a { color: var(--pf-ink); }

/* ---------- Footer ---------- */
.pf-front .pf-footer-wrap {
	margin-top: 5rem;
	padding: 3.5rem 0 2rem;
	background: var(--pf-soft);
	border-top: 1px solid var(--pf-line);
}
.pf-front .pf-footer-wrap .footer { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
.pf-front .pf-footer-wrap .footer-logo { max-height: 34px; width: auto; }
.pf-front .pf-footer-wrap a { color: var(--pf-text); }
.pf-front .pf-footer-wrap a:hover { color: var(--pf-ink); }
.pf-front .pf-footer-tagline { max-width: 360px; color: var(--pf-muted); font-size: .95rem; margin: .5rem 0 1rem; }

/* ---------- Generic front pages (pricing, contact, blog, pages) ---------- */
.pf-front main .card { border-radius: var(--pf-radius-sm); }
.pf-front .btn { border-radius: 999px; }
.pf-front .form-control, .pf-front .custom-select { border-radius: 12px; }

/* ---------- Fixes after first visual review ---------- */
body.pf-front { background-color: #fff !important; }
@media (min-width: 1360px) { .pf-front .container { max-width: 1320px; } }
.pf-front .pf-cms-grid .index-brand-icon-container,
.pf-front .pf-cms-grid .index-brand-icon-container svg,
.pf-front .pf-cms-grid .index-brand-icon-container:hover,
.pf-front .pf-cms-grid .index-brand-icon-container:hover svg { transform: none; }
.pf-front .pf-cms-grid .index-brand-icon-container svg { width: 38px; height: 38px; }
@media (min-width: 1200px) { .pf-hero-visual .pf-float { scale: 1.12; } .pf-float-1, .pf-float-3 { transform-origin: right center; } }
.pf-preview-stage-label { display: flex; align-items: center; }

/* Pricing cards (shared plans partial, restyled only on front pages) */
.pf-front .pricing-palden .pricing-item {
	background: #fff;
	border: 1px solid var(--pf-line);
	border-radius: var(--pf-radius);
	margin: 1rem .5rem;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}
.pf-front .pricing-palden .pricing-item:hover { box-shadow: var(--pf-shadow-lg); transform: translateY(-4px); }
.pf-front .pricing-palden .pricing-deco {
	background: linear-gradient(180deg, #f3f1ff 0%, #ffffff 100%) !important;
	padding: 2rem 1.5rem 1.25rem;
	border-radius: 0;
}
.pf-front .pricing-palden .pricing-deco-img { display: none; }
.pf-front .pricing-palden .pricing-title { color: var(--pf-primary); font-family: 'Onest', sans-serif; font-weight: 700; letter-spacing: .12em; }
.pf-front .pricing-palden .pricing-price { color: var(--pf-ink); font-family: 'Onest', sans-serif; font-size: 3.25rem; font-weight: 800; letter-spacing: -0.03em; margin-top: 1.25rem; line-height: 1; }
.pf-front .pricing-palden .pricing-currency { color: var(--pf-muted); font-weight: 600; }
.pf-front .pricing-palden .pricing-sub { color: var(--pf-muted); margin: 1rem 0 0; }
.pf-front .pricing-palden .pricing-feature { color: var(--pf-text); font-size: .93rem; padding: .35rem 0; border-bottom: 1px dashed var(--pf-line); }
.pf-front .pricing-palden .pricing-feature:last-child { border-bottom: 0; }
.pf-front .pricing-palden .pricing-item .btn { border-radius: 999px; font-weight: 600; padding: .75rem 1rem; }
.pf-front .pricing-palden .pricing-item .btn-primary { background: var(--pf-ink); border-color: var(--pf-ink); }
.pf-front .pricing-palden .pricing-item .btn-primary:hover { background: #262836; border-color: #262836; }
.pf-front .pf-plans .nav-pills .nav-link,
.pf-front .custom-price-plans .nav-pills .nav-link { border-radius: 999px; }

/* =========================================================
   Round 2: typography, marquee, preview, alerts, API, pricing, footer
   ========================================================= */

/* Balanced headings, no orphan words, no forced line breaks from old texts */
.pf-front h1, .pf-front h2, .pf-front h3, .pf-front .pf-h2 { text-wrap: balance; }
.pf-front p, .pf-front .pf-lead, .pf-front .pf-hero-text { text-wrap: pretty; }
.pf-section-head p, .pf-cta p, .pf-step p { text-wrap: balance; }
.pf-section-head p br, .pf-lead br, .pf-hero-text br, .pf-cta p br, .pf-shopify p br { display: none; }
.pf-section-head { max-width: 780px; }
.pf-section-head p { max-width: 640px; margin-left: auto; margin-right: auto; }
.pf-h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.15; margin-bottom: 1rem; }
.pf-lead { font-size: 1.075rem; color: var(--pf-muted); line-height: 1.6; margin-bottom: 0; }

/* Widgets keep their own colors on our pages */
.pf-front .altumcode-social-share-button,
.pf-front .altumcode-social-share-button:hover,
.pf-front .altumcode-contact-us-button,
.pf-front .altumcode-contact-us-button:hover { color: #fff !important; }
.pf-front .altumcode-social-share-button svg,
.pf-front .altumcode-contact-us-button svg { fill: #fff; color: #fff; }
.pf-type-desc br { display: none; }

/* ---------- Integrations marquee ---------- */
.pf-marquee-wrap {
	display: grid;
	gap: 16px;
	mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.pf-marquee { overflow: hidden; padding: 4px 0; }
.pf-marquee-track {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: pf-marquee 34s linear infinite;
}
.pf-marquee-reverse .pf-marquee-track { animation-direction: reverse; animation-duration: 44s; }
.pf-marquee-wrap:hover .pf-marquee-track { animation-play-state: paused; }
@keyframes pf-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-25% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .pf-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }
.pf-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 22px 10px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--pf-line);
	box-shadow: 0 1px 2px rgba(18, 19, 26, .03);
	transition: transform .25s ease, box-shadow .25s ease;
}
.pf-brand:hover { transform: translateY(-3px); box-shadow: var(--pf-shadow); }
.pf-brand-logo { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 11px; flex-shrink: 0; }
.pf-brand-logo svg { width: 100%; height: 100%; }
.pf-brand-name { font-family: 'Onest', sans-serif; font-weight: 600; color: var(--pf-ink); white-space: nowrap; }

/* ---------- Preview stage ---------- */
.pf-preview-stage { display: block; padding: 0; min-height: 420px; }
.pf-preview-stage-label {
	position: absolute; top: 18px; left: 18px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--pf-line);
	font-size: .75rem; letter-spacing: .08em;
	color: var(--pf-ink);
	z-index: 2;
}
.pf-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pf-ping 1.8s ease-out infinite; }
@keyframes pf-ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }
.pf-preview-canvas {
	min-height: 420px;
	padding: 72px 28px 40px;
	display: flex; align-items: center; justify-content: center;
}
.pf-front #notification_preview { display: flex; justify-content: center; max-width: none; }
@media (max-width: 991.98px) { .pf-preview-stage, .pf-preview-canvas { min-height: 300px; } .pf-preview-canvas { padding: 64px 16px 28px; } }

/* ---------- Alerts (notification handlers) ---------- */
.pf-handlers-card {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	padding: 56px;
	background:
		radial-gradient(50% 70% at 100% 0%, #efe9ff 0%, rgba(239, 233, 255, 0) 70%),
		radial-gradient(45% 60% at 0% 100%, #ffeef6 0%, rgba(255, 238, 246, 0) 70%),
		var(--pf-soft);
	border: 1px solid var(--pf-line);
}
.pf-handlers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pf-handler {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	gap: .8rem;
	padding: 1.15rem;
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pf-handler-icon {
	width: 44px; height: 44px;
	border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pf-soft);
	font-size: 1.25rem;
	transition: transform .35s ease;
}
.pf-handler-name { font-size: .95rem; font-weight: 600; color: var(--pf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pf-handler-check {
	position: absolute; top: 12px; right: 12px;
	width: 22px; height: 22px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #22c55e; color: #fff; font-size: .65rem;
	opacity: 0; transform: scale(.4);
	transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.pf-handler.is-active { transform: translateY(-4px); border-color: rgba(102, 126, 234, .45); box-shadow: 0 18px 36px -18px rgba(102, 126, 234, .55); }
.pf-handler.is-active .pf-handler-icon { transform: scale(1.08) rotate(-4deg); }
.pf-handler.is-active .pf-handler-check { opacity: 1; transform: scale(1); }

.pf-event {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25rem .9rem;
	align-items: center;
	padding: 1rem 1.1rem;
	border-radius: var(--pf-radius-sm);
	background: #fff;
	border: 1px solid var(--pf-line);
	box-shadow: var(--pf-shadow);
	max-width: 440px;
}
.pf-event.is-pulse { animation: pf-event-pop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pf-event-pop { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
.pf-event-icon {
	grid-row: span 2;
	width: 44px; height: 44px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--pf-grad-1), var(--pf-grad-2)); color: #fff;
}
.pf-event-title { font-weight: 700; color: var(--pf-ink); line-height: 1.2; }
.pf-event-text { font-size: .875rem; color: var(--pf-muted); }
.pf-event-status {
	grid-column: 1 / -1;
	margin-top: .6rem; padding-top: .6rem;
	border-top: 1px dashed var(--pf-line);
	font-size: .85rem; color: var(--pf-muted);
	display: flex; align-items: center; gap: .5rem;
}
.pf-event-status strong { color: var(--pf-ink); }
.pf-event-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pf-ping 1.8s ease-out infinite; }
@media (max-width: 991.98px) { .pf-handlers-card { padding: 32px 20px; border-radius: 24px; } .pf-handlers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- API terminal ---------- */
.pf-terminal {
	border-radius: 20px;
	background: #0f1020;
	box-shadow: 0 40px 80px -30px rgba(55, 82, 130, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
	overflow: hidden;
	position: relative;
}
.pf-terminal::before {
	content: '';
	position: absolute; top: -40%; right: -20%;
	width: 70%; height: 90%;
	background: radial-gradient(closest-side, rgba(118, 75, 162, .45), transparent);
	pointer-events: none;
}
.pf-terminal-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .06); position: relative; }
.pf-terminal-bar > span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.pf-terminal-bar > span:nth-child(2) { background: #febc2e; }
.pf-terminal-bar > span:nth-child(3) { background: #28c840; }
.pf-terminal-title { margin-left: auto; margin-right: auto; padding-right: 52px; font-size: .78rem; color: rgba(255, 255, 255, .45); font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.pf-terminal-body {
	position: relative;
	padding: 22px 24px 26px;
	min-height: 300px;
	font-family: SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	font-size: .86rem;
	line-height: 1.75;
	color: #d7dcef;
	white-space: pre-wrap;
	word-break: break-word;
}
.pf-terminal-line { white-space: pre-wrap; }
.pf-t-prompt { color: #28c840; font-weight: 700; }
.pf-t-cmd { color: #a5b4fc; font-weight: 700; }
.pf-t-flag { color: #f0abfc; }
.pf-t-str { color: #fde68a; }
.pf-t-key { color: #93c5fd; }
.pf-t-num { color: #86efac; }
.pf-t-ok { color: #28c840; font-weight: 700; }
.pf-t-caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: #a5b4fc; animation: pf-caret 1s steps(1) infinite; }
.pf-terminal.is-done .pf-t-caret { display: none; }
@keyframes pf-caret { 50% { opacity: 0; } }
.pf-terminal-response {
	margin: 1rem 0 0; padding: 0; background: none; border: 0;
	font: inherit; color: inherit; white-space: pre-wrap;
	opacity: 0; transform: translateY(6px);
	transition: opacity .4s ease, transform .4s ease;
}
.pf-terminal-response.is-visible { opacity: 1; transform: none; }

/* ---------- Pricing: compact, 4 in a row, carousel when narrow ---------- */
.pf-front .pf-plans .pricing.pricing-palden {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: 16px;
	padding: 6px 4px 16px;
}
.pf-front .pf-plans .pricing-palden .pricing-item {
	flex: 1 1 0;
	min-width: 0;
	max-width: 320px;
	margin: 0;
}
.pf-front .pf-plans .pricing-palden .pricing-deco { padding: 1.5rem 1.25rem 1rem; }
.pf-front .pf-plans .pricing-palden .pricing-price { font-size: 2.6rem; margin-top: .9rem; }
.pf-front .pf-plans .pricing-palden .pricing-sub { font-size: .85rem; line-height: 1.45; margin-top: .75rem; min-height: 4.4em; }
.pf-front .pf-plans .pricing-palden .pricing-feature-list { padding: 0 1.25rem; }
.pf-front .pf-plans .pricing-palden .pricing-feature { font-size: .86rem; padding: .3rem 0; }
.pf-front .pf-plans .pricing-palden .pricing-item > *:last-child { padding-bottom: 1.25rem; }

@media (max-width: 1199.98px) {
	.pf-front .pf-plans .pricing.pricing-palden {
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-left: 16px; padding-right: 16px;
		margin-left: -15px; margin-right: -15px;
	}
	.pf-front .pf-plans .pricing.pricing-palden::-webkit-scrollbar { display: none; }
	.pf-front .pf-plans .pricing-palden .pricing-item { flex: 0 0 290px; max-width: 290px; scroll-snap-align: center; }
}
.pf-plans-hint { display: none; text-align: center; font-size: .85rem; color: var(--pf-muted); margin-top: .5rem; }
@media (max-width: 1199.98px) { .pf-plans-hint { display: block; } }

/* ---------- Footer (influencer.md style) ---------- */
.pf-front .pf-footer-wrap {
	position: relative;
	overflow: hidden;
	margin-top: 4rem;
	padding: 4.5rem 0 2.5rem;
	background: #fff;
	border-top: 0;
}
.pf-footer-glow {
	position: absolute;
	left: 50%; bottom: -260px;
	width: 1300px; max-width: 140%; height: 420px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: linear-gradient(90deg, #667eea 0%, #f0a6ca 50%, #764ba2 100%);
	filter: blur(90px);
	opacity: .45;
	pointer-events: none;
}
.pf-front .pf-footer-wrap .footer-logo { max-height: 40px; width: auto; }
.pf-footer-brand { display: inline-block; margin-bottom: 1rem; }
.pf-front .pf-footer-tagline { max-width: 340px; color: var(--pf-muted); font-size: 1rem; line-height: 1.55; margin: 0 0 1.5rem; }
.pf-footer-heading { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); margin-bottom: 1.1rem; }
.pf-footer-links { list-style: none; padding: 0; margin: 0; }
.pf-footer-links li { margin-bottom: .7rem; }
.pf-front .pf-footer-links a { color: var(--pf-ink); font-weight: 500; text-decoration: none; transition: color .2s ease; }
.pf-front .pf-footer-links a:hover { color: var(--pf-grad-2); }
.pf-front .pf-footer-shopify {
	display: inline-flex; align-items: center; gap: .7rem;
	padding: .6rem 1.1rem .6rem .8rem;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--pf-line);
	color: var(--pf-ink);
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}
.pf-front .pf-footer-shopify:hover { box-shadow: var(--pf-shadow); transform: translateY(-2px); color: var(--pf-ink); }
.pf-footer-shopify span { display: flex; flex-direction: column; line-height: 1.15; }
.pf-footer-shopify small { font-size: .7rem; color: var(--pf-muted); }
.pf-footer-shopify strong { font-family: 'Onest', sans-serif; font-size: .95rem; }
.pf-footer-socials { display: flex; gap: .5rem; margin-top: 1.25rem; }
.pf-front .pf-footer-socials a {
	width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--pf-line); color: var(--pf-ink);
	transition: background-color .2s ease, color .2s ease;
}
.pf-front .pf-footer-socials a:hover { background: var(--pf-ink); color: #fff; }
.pf-footer-bottom {
	position: relative;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
	margin-top: 2.5rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(18, 19, 26, .08);
}
.pf-footer-copy { font-size: .875rem; color: var(--pf-muted); }
.pf-footer-switchers { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.pf-footer-switchers .dropdown, .pf-footer-switchers > div { margin: 0 !important; }
.pf-front .pf-footer-switchers .btn-link { color: var(--pf-ink); font-weight: 500; font-size: .9rem; }

/* Round 2 polish */
.pf-front .pf-plans .pricing-palden .pricing-sub { min-height: 5.9em; }
.pf-front .pf-plans .pricing-palden .pricing-feature-list > div,
.pf-front .pf-plans .pricing-palden .pricing-feature-list > div span { font-size: .86rem; }
.pf-front .pf-plans .pricing-palden .pricing-feature-list > div { padding: .3rem 0; border-bottom: 1px dashed var(--pf-line); color: var(--pf-text); }
.pf-front .pf-footer-wrap { margin-top: 0; padding-top: 3.5rem; }
.pf-footer-glow { opacity: .6; height: 460px; }

/* =========================================================
   Header v2: floating glass bar + compact user menu
   ========================================================= */
.pf-nav-wrap { padding: 14px 0; background: transparent; box-shadow: none; }
.pf-nav-wrap.pf-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; padding: 10px 0; }
.pf-front .pf-nav-bar {
	padding: 8px 8px 8px 20px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(18, 19, 26, .06);
	backdrop-filter: saturate(170%) blur(14px);
	-webkit-backdrop-filter: saturate(170%) blur(14px);
	transition: box-shadow .25s ease, background-color .25s ease;
}
.pf-nav-wrap.pf-scrolled .pf-nav-bar { background: rgba(255, 255, 255, .9); box-shadow: 0 10px 30px -12px rgba(18, 19, 26, .18); }
.pf-front .pf-nav-links .nav-link { font-size: .95rem; color: var(--pf-text) !important; }
.pf-front .pf-nav-links .nav-link:hover { color: var(--pf-ink) !important; background: rgba(18, 19, 26, .05); }

/* Icon button (bell) */
.pf-front .pf-icon-btn {
	position: relative;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--pf-ink) !important;
	background: transparent;
	transition: background-color .2s ease;
	text-decoration: none !important;
}
.pf-front .pf-icon-btn:hover, .pf-front .show > .pf-icon-btn { background: rgba(18, 19, 26, .06); }
.pf-front .pf-icon-btn::after { display: none; }
.pf-icon-btn-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px #fff; }

/* User pill */
.pf-front .pf-user-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: 4px 12px 4px 4px;
	border-radius: 999px;
	border: 1px solid var(--pf-line);
	background: #fff;
	color: var(--pf-ink) !important;
	font-weight: 600; font-size: .92rem;
	text-decoration: none !important;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.pf-front .pf-user-btn:hover, .pf-front .show > .pf-user-btn { border-color: #d5d9e6; box-shadow: var(--pf-shadow); }
.pf-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.pf-user-btn-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-user-btn-caret { color: var(--pf-muted); transition: transform .2s ease; }
.show > .pf-user-btn .pf-user-btn-caret { transform: rotate(180deg); }

/* Dropdown panel */
.pf-front .pf-dropdown {
	border: 1px solid var(--pf-line);
	border-radius: 20px;
	box-shadow: 0 24px 60px -20px rgba(18, 19, 26, .28), 0 2px 6px rgba(18, 19, 26, .04);
	margin-top: 10px !important;
}
.pf-front .pf-user-menu { width: 320px; max-width: 92vw; padding: 8px; }
.pf-user-card {
	display: flex; align-items: center; gap: .75rem;
	padding: 14px;
	border-radius: 14px;
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(118, 75, 162, .14), transparent 70%),
		radial-gradient(80% 120% at 0% 100%, rgba(102, 126, 234, .14), transparent 70%),
		#f7f6fd;
}
.pf-user-card-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff; flex-shrink: 0; }
.pf-user-card-info { min-width: 0; flex: 1; }
.pf-user-card-name { font-family: 'Onest', sans-serif; font-weight: 700; color: var(--pf-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-user-card-email { font-size: .8rem; color: var(--pf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-front .pf-plan-badge {
	flex-shrink: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient(100deg, var(--pf-grad-1), var(--pf-grad-2));
	color: #fff !important;
	font-size: .72rem; font-weight: 700;
	text-decoration: none !important;
	white-space: nowrap;
}

.pf-menu-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; }
.pf-front .pf-menu-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--pf-line);
	color: var(--pf-ink) !important;
	font-weight: 600; font-size: .86rem; line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.pf-front .pf-menu-tile:hover { background: var(--pf-soft); transform: translateY(-1px); }
.pf-front .pf-menu-tile.is-active { border-color: rgba(102, 126, 234, .5); background: #f4f5ff; }
.pf-menu-ic {
	width: 32px; height: 32px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c);
	background: color-mix(in srgb, var(--c) 14%, #fff);
	font-size: .9rem;
}

.pf-menu-list { padding: 6px 0; border-top: 1px solid var(--pf-line); }
.pf-front .pf-menu-item {
	display: flex; align-items: center; gap: .7rem;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--pf-text) !important;
	font-size: .9rem; font-weight: 500;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.pf-front .pf-menu-item i { color: var(--pf-muted); width: 18px; }
.pf-front .pf-menu-item:hover { background: var(--pf-soft); color: var(--pf-ink) !important; }
.pf-front .pf-menu-item:hover i { color: var(--pf-ink); }
.pf-front .pf-menu-item.is-active { color: var(--pf-ink) !important; background: #f4f5ff; }
.pf-front .pf-menu-item-admin { color: #5b4bd1 !important; font-weight: 600; }
.pf-front .pf-menu-item-admin i { color: #5b4bd1; }
.pf-menu-footer { padding-top: 6px; border-top: 1px solid var(--pf-line); }
.pf-front .pf-menu-logout { color: #dc2626 !important; }
.pf-front .pf-menu-logout i { color: #dc2626; }
.pf-front .pf-menu-logout:hover { background: #fef2f2; color: #b91c1c !important; }

@media (max-width: 991.98px) {
	.pf-front .pf-nav-bar { border-radius: 24px; padding: 8px 8px 8px 16px; }
	.pf-front .pf-nav .navbar-collapse { margin-top: 8px; border: 0; box-shadow: none; padding: 8px 4px 4px; background: transparent; }
	.pf-front .pf-nav-user { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
	.pf-front .pf-nav-user > li:first-child { flex: 1 1 100%; }
	.pf-front .pf-nav-user > li:first-child .pf-btn { width: 100%; }
	.pf-front .pf-user-menu { position: static !important; transform: none !important; width: 100%; box-shadow: none; margin-top: 8px !important; }
	.pf-front .pf-nav-user .dropdown { flex: 1 1 auto; }
	.pf-front .pf-nav-user .dropdown:last-child { flex: 1 1 100%; }
	.pf-front .pf-user-btn { width: 100%; justify-content: flex-start; }
	.pf-front .pf-user-btn-caret { margin-left: auto; }
}
@media (max-width: 991.98px) {
	.pf-front .pf-nav-bar { flex-wrap: wrap; }
	.pf-front .pf-nav-bar .navbar-collapse { flex: 0 0 100%; max-width: 100%; min-width: 0; }
	/* Sticky nav: the open menu scrolls inside itself so everything down to Logout is reachable */
	.pf-front .pf-nav-bar .navbar-collapse.show,
	.pf-front .pf-nav-bar .navbar-collapse.collapsing { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	.pf-front .pf-nav-bar .navbar-nav { min-width: 0; width: 100%; }
	.pf-front .pf-nav-user { flex-direction: column; align-items: stretch; gap: 8px; }
	.pf-front .pf-nav-user > li { flex: none !important; width: 100%; margin: 0 !important; }
	.pf-front .pf-icon-btn { width: 100%; height: 44px; border-radius: 12px; justify-content: flex-start; padding: 0 12px; background: var(--pf-soft); }
	.pf-icon-btn-dot { left: 26px; right: auto; }
	.pf-front #internal_notifications_content { position: static !important; transform: none !important; width: 100% !important; }
}

/* Preview: widgets made of several blocks (chat window + launcher) stack vertically */
.pf-front #notification_preview { flex-direction: column; align-items: center; gap: 14px; }
.pf-front #notification_preview:has([class*="-chat-window"]) { align-items: flex-end; }
.pf-front #notification_preview > [class*="-chat-wrapper"] { align-self: flex-end; margin: 0 !important; }

/* Notifications dropdown */
.pf-front .pf-notif-menu { width: 400px; max-width: 92vw; padding: 8px; }
.pf-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 12px; border-bottom: 1px solid var(--pf-line); margin-bottom: 6px; }
.pf-notif-title { font-family: 'Onest', sans-serif; font-weight: 700; color: var(--pf-ink); font-size: 1rem; }
.pf-front .pf-notif-all { font-size: .82rem; font-weight: 600; color: var(--pf-grad-2) !important; text-decoration: none !important; padding: 4px 10px; border-radius: 999px; background: #f4f1fb; }
.pf-front .pf-notif-all:hover { background: #ebe5f8; }
.pf-notif-list { max-height: 420px; overflow-y: auto; display: grid; gap: 4px; }
.pf-notif-item { position: relative; display: flex; gap: .8rem; padding: 10px 12px; border-radius: 14px; transition: background-color .15s ease; }
.pf-notif-item:hover { background: var(--pf-soft); }
.pf-notif-item.is-unread { background: #f6f5ff; }
.pf-notif-ic {
	flex-shrink: 0;
	width: 38px; height: 38px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(102, 126, 234, .16), rgba(118, 75, 162, .16));
	color: #5b4bd1;
}
.pf-notif-body { min-width: 0; padding-right: 14px; }
.pf-notif-item-title { font-weight: 600; font-size: .9rem; color: var(--pf-ink); line-height: 1.3; }
.pf-front .pf-notif-item-title a { color: var(--pf-ink) !important; text-decoration: none !important; }
.pf-notif-item-text { font-size: .83rem; color: var(--pf-text); line-height: 1.4; margin-top: 2px; }
.pf-notif-item-time { font-size: .75rem; color: var(--pf-muted); margin-top: 4px; }
.pf-notif-unread-dot { position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-grad-1); }
.pf-notif-empty { text-align: center; padding: 28px 16px 24px; }
.pf-notif-empty-emoji {
	width: 72px; height: 72px; margin: 0 auto 14px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem;
	background: radial-gradient(circle at 30% 30%, #fff, #efeaff 70%);
	box-shadow: 0 10px 24px -12px rgba(118, 75, 162, .5);
	animation: pf-bell 2.4s ease-in-out infinite;
}
@keyframes pf-bell { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(12deg); } 80% { transform: rotate(-10deg); } 85% { transform: rotate(6deg); } 90% { transform: rotate(-4deg); } }
.pf-notif-empty-title { font-family: 'Onest', sans-serif; font-weight: 700; color: var(--pf-ink); }
.pf-notif-empty-text { font-size: .85rem; color: var(--pf-muted); margin-top: 4px; text-wrap: balance; }
.pf-notif-loading { display: flex; justify-content: center; padding: 40px 0; }
.pf-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #ece9f9; border-top-color: var(--pf-grad-2); animation: pf-spin .8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }

.pf-front .pf-icon-btn:focus, .pf-front .pf-user-btn:focus { outline: none; }
.pf-front .pf-icon-btn:focus-visible, .pf-front .pf-user-btn:focus-visible { outline: 2px solid var(--pf-grad-1); outline-offset: 2px; }
.pf-front .show > .pf-icon-btn { background: rgba(18, 19, 26, .06); border: 0; }

/* =========================================================
   Inner pages: plan, affiliate, contact
   ========================================================= */
.pf-page-hero-section { padding-top: 8px; }
.pf-page-hero {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	padding: 56px;
	text-align: center;
	background:
		radial-gradient(60% 80% at 0% 0%, #e9e6ff 0%, rgba(233, 230, 255, 0) 70%),
		radial-gradient(55% 75% at 100% 10%, #ffe3f1 0%, rgba(255, 227, 241, 0) 70%),
		radial-gradient(60% 70% at 70% 100%, #dcefff 0%, rgba(220, 239, 255, 0) 70%),
		#f7f6fd;
}
.pf-page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 1rem; }
.pf-page-hero p { font-size: 1.1rem; color: var(--pf-text); max-width: 620px; margin: 0 auto; text-wrap: balance; }
.pf-page-hero-split, .pf-contact-side { text-align: left; }
.pf-page-hero-split p, .pf-contact-side p { margin: 0; }
.pf-breadcrumbs { list-style: none; display: inline-flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.25rem; font-size: .82rem; }
.pf-breadcrumbs li { color: var(--pf-muted); display: inline-flex; align-items: center; gap: .4rem; }
.pf-breadcrumbs li + li::before { content: '/'; color: #c3c7d4; }
.pf-front .pf-breadcrumbs a { color: var(--pf-muted); text-decoration: none; }
.pf-front .pf-breadcrumbs a:hover { color: var(--pf-ink); }
.pf-breadcrumbs .active { color: var(--pf-ink); font-weight: 600; }
.pf-page-hero > nav { display: block; }
.pf-page-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 1.75rem; color: var(--pf-ink); font-size: .92rem; font-weight: 500; }
.pf-page-hero-chips i { color: var(--pf-primary); }
@media (max-width: 767.98px) { .pf-page-hero { padding: 36px 20px; border-radius: 24px; } }

/* Plan page extras */
.pf-front .pf-plan-shopify {
	display: flex; align-items: center; gap: 1rem;
	max-width: 760px; margin: 2rem auto 0;
	padding: 1rem 1.25rem;
	border-radius: 18px;
	background: #f5f8ef;
	border: 1px solid #e3ebd3;
	color: var(--pf-ink);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pf-front .pf-plan-shopify:hover { transform: translateY(-2px); box-shadow: var(--pf-shadow); color: var(--pf-ink); }
.pf-plan-shopify-ic { width: 48px; height: 48px; border-radius: 14px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pf-plan-shopify-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pf-plan-shopify-text span { font-size: .9rem; color: var(--pf-text); }
.pf-plan-shopify-arrow { color: #4f7a2a; }
.pf-why { height: 100%; padding: 2rem; border-radius: var(--pf-radius); background: #fff; border: 1px solid var(--pf-line); transition: transform .25s ease, box-shadow .25s ease; }
.pf-why:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow); }
.pf-why-ic { width: 48px; height: 48px; border-radius: 14px; font-size: 1.15rem; margin-bottom: 1.25rem; }
.pf-why h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.pf-why p { margin: 0; color: var(--pf-muted); }

/* Affiliate */
.pf-aff-stats { display: grid; gap: 12px; margin-top: 1.75rem; }
.pf-aff-stat { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(18, 19, 26, .06); }
.pf-aff-stat .pf-menu-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.pf-aff-stat strong { display: block; font-family: 'Onest', sans-serif; font-size: 1.15rem; color: var(--pf-ink); margin-bottom: .15rem; }
.pf-aff-stat span { font-size: .88rem; color: var(--pf-muted); }
.pf-aff-visual { position: relative; }
.pf-front .affiliate-page .image-wrap img { border-radius: 24px; box-shadow: var(--pf-shadow-lg); }
.pf-aff-badge {
	position: absolute;
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .6rem 1rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--pf-shadow-lg);
	font-family: 'Onest', sans-serif; font-weight: 700; color: var(--pf-ink);
	animation: pf-float 6s ease-in-out infinite;
	z-index: 3;
}
.pf-aff-badge-1 { top: 8%; left: 0; }
.pf-aff-badge-2 { bottom: 10%; right: 0; animation-delay: -3s; }
.pf-step-icon { color: #c3c7d4; }
.pf-step:hover .pf-step-icon { color: var(--pf-grad-1); }
@media (max-width: 767.98px) { .pf-aff-badge { display: none; } }

/* Contact */
.pf-contact-points { display: grid; gap: 14px; margin-top: 2rem; }
.pf-contact-point { display: flex; gap: .9rem; align-items: flex-start; }
.pf-contact-point .pf-menu-ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.pf-contact-point strong { display: block; color: var(--pf-ink); }
.pf-contact-point span { font-size: .9rem; color: var(--pf-muted); }
.pf-form-card { height: 100%; padding: 40px; border-radius: 32px; background: #fff; border: 1px solid var(--pf-line); box-shadow: var(--pf-shadow); }
.pf-form-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
.pf-front .pf-form-card label { font-weight: 600; color: var(--pf-ink); font-size: .9rem; margin-bottom: .4rem; }
.pf-front .pf-form-card .form-control {
	height: auto;
	padding: .8rem 1rem;
	border-radius: 14px;
	border: 1px solid var(--pf-line);
	background: var(--pf-soft);
	font-size: .98rem;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pf-front .pf-form-card .form-control:focus { background: #fff; border-color: var(--pf-grad-1); box-shadow: 0 0 0 4px rgba(102, 126, 234, .15); }
.pf-front .pf-form-card .form-control.is-invalid { border-color: #ef4444; }
.pf-front .pf-form-card textarea.form-control { min-height: 160px; resize: vertical; }
.pf-front .pf-form-card .pf-btn { padding: 1rem 1.5rem; margin-top: .5rem; }
@media (max-width: 767.98px) { .pf-form-card { padding: 24px 18px; border-radius: 24px; } }
.pf-front .affiliate-page .pf-aff-visual .image-wrap .thin-image-first,
.pf-front .affiliate-page .pf-aff-visual .image-wrap .thin-image-third { width: 26%; min-height: 300px; border-radius: 999px; }
.pf-front .affiliate-page .pf-aff-visual .image-wrap .thin-image-second { width: 32%; min-height: 380px; border-radius: 999px; }
@media (max-width: 767.98px) {
	.pf-front .affiliate-page .pf-aff-visual .image-wrap .thin-image-first,
	.pf-front .affiliate-page .pf-aff-visual .image-wrap .thin-image-third { min-height: 200px; }
	.pf-front .affiliate-page .pf-aff-visual .image-wrap .thin-image-second { min-height: 250px; }
}

.pf-front main > .pf-page-hero-section:last-child { padding-bottom: 5rem; }

/* FAQ accordion: no focus box, soft open state */
.pf-front .index-faq .card { transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; overflow: hidden; }
.pf-front .index-faq .card .card-body { padding: 1.1rem 1.4rem; }
.pf-front .index-faq .btn,
.pf-front .index-faq .btn:focus,
.pf-front .index-faq .btn:active,
.pf-front .index-faq .btn:not(:disabled):not(.disabled):active:focus { box-shadow: none !important; outline: none !important; border-color: transparent !important; background: transparent !important; }
.pf-front .index-faq .btn:focus-visible { outline: 2px solid var(--pf-grad-1) !important; outline-offset: 4px; border-radius: 8px; }
.pf-front .index-faq .btn { align-items: center; gap: 1rem; font-size: 1.02rem; }
.pf-front .index-faq [data-icon] {
	flex-shrink: 0;
	width: 32px; height: 32px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pf-soft);
	color: var(--pf-muted);
	transition: background-color .25s ease, color .25s ease;
}
.pf-front .index-faq [data-icon] svg { transition: transform .3s ease; }
.pf-front .index-faq .card:hover { border-color: #d5d9e6 !important; }
.pf-front .index-faq .card:has(.collapse.show),
.pf-front .index-faq .card:has(.collapsing) {
	border-color: rgba(102, 126, 234, .35) !important;
	background: linear-gradient(180deg, #f7f6ff 0%, #ffffff 100%);
	box-shadow: 0 16px 36px -22px rgba(102, 126, 234, .55);
}
.pf-front .index-faq .card:has(.collapse.show) [data-icon],
.pf-front .index-faq .card:has(.collapsing) [data-icon] { background: linear-gradient(135deg, var(--pf-grad-1), var(--pf-grad-2)); color: #fff; }
.pf-front .index-faq .card:has(.collapse.show) [data-icon] svg { color: #fff !important; }
.pf-front .index-faq .collapse, .pf-front .index-faq .collapsing { color: var(--pf-text) !important; line-height: 1.65; }

/* FAQ icon v2 + labels on pastel heroes */
.pf-front .index-faq .btn:focus-visible { outline: none !important; }
.pf-front .index-faq [data-icon],
.pf-front .index-faq .card:has(.collapse.show) [data-icon],
.pf-front .index-faq .card:has(.collapsing) [data-icon] { background: none !important; width: auto; height: auto; }
.pf-front .index-faq [data-icon] svg { color: #c3c7d4 !important; font-size: 1.35rem; }
.pf-front .index-faq .card:hover [data-icon] svg { color: #9aa0b4 !important; }
.pf-front .index-faq .card:has(.collapse.show) [data-icon] svg { color: var(--pf-grad-1) !important; }
.pf-page-hero .pf-label { background: #fff; box-shadow: 0 2px 8px -2px rgba(55, 82, 130, .15); }

/* Gradient icon tiles on affiliate stats and contact points */
.pf-aff-stat > .pf-menu-ic,
.pf-contact-point > .pf-menu-ic {
	color: #fff !important;
	background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 55%, #764ba2) 100%);
	box-shadow: 0 10px 20px -10px var(--c);
	font-size: 1rem;
}
.pf-aff-stat > .pf-menu-ic svg, .pf-contact-point > .pf-menu-ic svg { color: #fff; }

/* FAQ chevron size fix */
.pf-front .index-faq [data-icon] { display: inline-flex !important; align-items: center; }
.pf-front .index-faq [data-icon] svg { width: 22px !important; height: 22px !important; display: block !important; }

/* Page hero labels: gradient pill */
.pf-page-hero .pf-label { background: linear-gradient(100deg, var(--pf-grad-1), var(--pf-grad-2)); color: #fff; box-shadow: 0 8px 18px -8px rgba(118, 75, 162, .6); }

/* =========================================================
   API documentation
   ========================================================= */
.pf-copy-field { position: relative; }
.pf-copy-field .form-control { padding-right: 52px !important; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem !important; }
.pf-copy-btn {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	width: 38px; height: 38px; border-radius: 10px; border: 0;
	background: #fff; color: var(--pf-ink);
	box-shadow: 0 1px 3px rgba(18, 19, 26, .12);
	transition: background-color .2s ease, color .2s ease;
}
.pf-copy-btn:hover { background: var(--pf-ink); color: #fff; }
.pf-copy-btn.is-copied { background: #22c55e; color: #fff; }

.pf-api-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pf-front .pf-api-card {
	position: relative;
	display: flex; align-items: flex-start; gap: 1rem;
	padding: 1.25rem;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--pf-line);
	color: var(--pf-ink) !important;
	text-decoration: none !important;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pf-front .pf-api-card:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow); border-color: transparent; }
.pf-api-card-ic { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; color: #fff !important; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #764ba2)); box-shadow: 0 10px 20px -10px var(--c); }
.pf-api-card-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.pf-api-card-body strong { font-family: 'Onest', sans-serif; font-size: 1.05rem; }
.pf-api-card-body span { font-size: .87rem; color: var(--pf-muted); line-height: 1.45; }
.pf-api-card-body code { align-self: flex-start; margin-top: .35rem; padding: 2px 8px; border-radius: 6px; background: var(--pf-soft); color: #5b4bd1; font-size: .78rem; }
.pf-api-card-arrow { color: #c3c7d4; margin-top: .2rem; transition: transform .25s ease, color .25s ease; }
.pf-front .pf-api-card:hover .pf-api-card-arrow { color: var(--pf-ink); transform: translateX(3px); }
@media (max-width: 991.98px) { .pf-api-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .pf-api-grid { grid-template-columns: 1fr; } }

/* Subpages */
.pf-api-doc { padding-top: 8px; padding-bottom: 4rem; }
.pf-api-hero { padding: 40px 48px; margin-bottom: 2rem; text-align: left; }
.pf-api-hero h1 { margin-bottom: 0; }
.pf-api-nav {
	position: sticky; top: 96px;
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--pf-line);
}
.pf-front .pf-api-nav-item {
	display: flex; align-items: center; gap: .6rem;
	padding: 9px 12px;
	border-radius: 12px;
	color: var(--pf-text) !important;
	font-size: .9rem; font-weight: 500;
	text-decoration: none !important;
	transition: background-color .15s ease;
}
.pf-front .pf-api-nav-item:hover { background: var(--pf-soft); color: var(--pf-ink) !important; }
.pf-front .pf-api-nav-item.is-active { background: #f1efff; color: var(--pf-ink) !important; font-weight: 700; }
.pf-front .pf-api-nav-item:first-child { color: var(--pf-muted) !important; border-bottom: 1px solid var(--pf-line); border-radius: 12px 12px 0 0; margin-bottom: 4px; }
@media (max-width: 991.98px) {
	.pf-api-hero { padding: 28px 20px; }
	.pf-api-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
	.pf-api-nav::-webkit-scrollbar { display: none; }
	.pf-front .pf-api-nav-item { white-space: nowrap; }
	.pf-front .pf-api-nav-item:first-child { border-bottom: 0; margin-bottom: 0; }
}

/* Endpoint accordions */
.pf-api-doc .accordion .card {
	border: 1px solid var(--pf-line) !important;
	border-radius: 18px !important;
	margin-bottom: 12px;
	overflow: hidden;
	box-shadow: none;
	transition: box-shadow .25s ease, border-color .25s ease;
}
.pf-api-doc .accordion .card:hover { border-color: #d5d9e6 !important; }
.pf-api-doc .accordion .card:has(.collapse.show) { border-color: rgba(102, 126, 234, .35) !important; box-shadow: 0 16px 36px -24px rgba(102, 126, 234, .6); }
.pf-api-doc .accordion .card-header { background: #fff !important; border: 0; padding: 1.05rem 1.35rem !important; }
.pf-api-doc .accordion .card:has(.collapse.show) .card-header { background: linear-gradient(180deg, #f7f6ff, #fff) !important; }
.pf-api-doc .accordion .card-header h3 { display: flex; align-items: center; justify-content: space-between; }
.pf-api-doc .accordion .card-header a { color: var(--pf-ink) !important; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1rem; }
.pf-api-doc .accordion .card-header h3::after {
	content: "\203A";
	font-size: 1.4rem; line-height: 1; color: #c3c7d4;
	transition: transform .25s ease, color .25s ease;
}
.pf-api-doc .accordion .card:has(.collapse.show) .card-header h3::after { transform: rotate(90deg); color: var(--pf-grad-1); }
.pf-api-doc .accordion .card-body { padding: 1.25rem 1.35rem 1.5rem; }
.pf-api-doc label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-muted); margin-bottom: .5rem; }

/* Code blocks (endpoint + curl examples) */
.pf-api-doc .card.bg-gray-100,
.pf-api-doc .card.bg-gray-50 {
	background: #0f1020 !important;
	border-radius: 14px !important;
	border: 0 !important;
	margin-bottom: 0;
}
.pf-api-doc .card.bg-gray-100 .card-body,
.pf-api-doc .card.bg-gray-50 .card-body {
	font-family: SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .85rem; line-height: 1.8;
	color: #d7dcef;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	white-space: nowrap;
}
.pf-api-doc .card.bg-gray-100 .text-muted { color: #d7dcef !important; }
.pf-api-doc .card.bg-gray-100 .text-primary, .pf-api-doc .card.bg-gray-50 .text-primary { color: #fde68a !important; }
.pf-api-doc .card.bg-gray-100 .badge { font-family: 'Onest', sans-serif; letter-spacing: .04em; }

/* Method + param badges */
.pf-api-doc .badge { border-radius: 999px; padding: .35em .75em; font-weight: 600; }
.pf-api-doc .badge-success { background: #dcfce7; color: #15803d; }
.pf-api-doc .badge-info { background: #e0e7ff; color: #4338ca; }
.pf-api-doc .badge-danger { background: #fee2e2; color: #b91c1c; }
.pf-api-doc .badge-secondary { background: #f1f5f9; color: #475569; }
.pf-api-doc .badge-light { background: #fff7ed; color: #c2410c; }
.pf-api-doc .card.bg-gray-100 .badge-success { background: #22c55e; color: #fff; }
.pf-api-doc .card.bg-gray-100 .badge-info { background: #6366f1; color: #fff; }
.pf-api-doc .card.bg-gray-100 .badge-danger { background: #ef4444; color: #fff; }

/* Parameters table */
.pf-api-doc .table-custom-container { border: 1px solid var(--pf-line); border-radius: 14px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.pf-api-doc .table-custom { margin: 0; font-size: .88rem; }
.pf-api-doc .table-custom thead th { background: var(--pf-soft); border: 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-muted); padding: .8rem 1rem; }
.pf-api-doc .table-custom td { border-top: 1px solid var(--pf-line); padding: .8rem 1rem; vertical-align: middle; color: var(--pf-text); }
.pf-api-doc .table-custom td:first-child { font-family: SFMono-Regular, Menlo, Consolas, monospace; color: #5b4bd1; font-weight: 600; white-space: nowrap; }
.pf-api-doc code { color: #5b4bd1; background: #f1efff; padding: 1px 6px; border-radius: 6px; }

/* JSON response (shiki) */
.pf-api-doc [data-shiki] pre, .pf-api-doc pre.shiki { border-radius: 14px; padding: 1rem 1.25rem; font-size: .84rem; line-height: 1.65; max-height: 460px; overflow: auto; margin: 0; }
.pf-api-doc [data-shiki] { border-radius: 14px; overflow: hidden; }

/* API docs: single page */
html { scroll-padding-top: 100px; }
.pf-api-section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--pf-line); }
.pf-api-section:last-child { border-bottom: 0; margin-bottom: 0; }
.pf-api-section-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.pf-api-section-head h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; }
.pf-api-section-head p { margin: 0; color: var(--pf-muted); font-size: .95rem; }
.pf-api-section-head code { margin-left: .35rem; }
.pf-api-section-head > div { flex: 1; min-width: 0; }
.pf-front .pf-api-anchor { color: #c3c7d4 !important; opacity: 0; transition: opacity .2s ease, color .2s ease; padding: .4rem; }
.pf-api-section-head:hover .pf-api-anchor { opacity: 1; }
.pf-front .pf-api-anchor:hover { color: var(--pf-grad-2) !important; }
.pf-api-doc .pf-api-nav-item:first-child { border-bottom: 0; margin-bottom: 0; color: var(--pf-text) !important; border-radius: 12px; }
.pf-api-doc .pf-api-nav-item.is-active { background: #f1efff; color: var(--pf-ink) !important; font-weight: 700; }
@media (max-width: 991.98px) {
	.pf-api-doc .pf-api-nav { position: sticky; top: 74px; z-index: 5; box-shadow: var(--pf-shadow); }
	html { scroll-padding-top: 150px; }
}

/* Hero pills stacked + Shopify visual on gradient */
.pf-hero-pills { flex-direction: column; align-items: flex-start; }
.pf-shopify-visual {
	background:
		radial-gradient(70% 80% at 0% 0%, rgba(149, 191, 71, .55) 0%, rgba(149, 191, 71, 0) 70%),
		radial-gradient(70% 80% at 100% 100%, rgba(118, 75, 162, .55) 0%, rgba(118, 75, 162, 0) 70%),
		linear-gradient(135deg, #667eea 0%, #8f6fd1 50%, #764ba2 100%);
	box-shadow: 0 30px 60px -24px rgba(102, 75, 162, .55);
	padding: 2.5rem 1.5rem;
	gap: 18px;
}

/* Smaller hero title */
.pf-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; }

/* Hero title: smaller, extra step down for long-word languages */
.pf-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
html[lang="ro"] .pf-hero h1, html[lang="ru"] .pf-hero h1 { font-size: clamp(1.75rem, 3vw, 2.45rem); }
html[lang="ro"] .pf-hero-text, html[lang="ru"] .pf-hero-text { font-size: 1.02rem; margin-bottom: 1.6rem; }

/* Shopify band: same pastel as the hero */
.pf-shopify {
	background:
		radial-gradient(60% 70% at 0% 0%, #e9e6ff 0%, rgba(233, 230, 255, 0) 70%),
		radial-gradient(55% 65% at 100% 10%, #ffe3f1 0%, rgba(255, 227, 241, 0) 70%),
		radial-gradient(60% 70% at 70% 100%, #ffe9f3 0%, rgba(255, 233, 243, 0) 70%),
		#fbf5fb;
	border: 0;
}
.pf-shopify .pf-label { background: #fff !important; color: #4f7a2a !important; box-shadow: 0 2px 8px -2px rgba(55, 82, 130, .15); }

/* Header logo a bit bigger */
.pf-front .pf-nav .navbar-logo { max-height: 44px; height: 44px; width: auto; }

/* Feature tiles (homepage) */
.pf-features-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.pf-feature-tile {
	position: relative;
	overflow: hidden;
	padding: 1.5rem 1rem 1.25rem;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--pf-line);
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pf-feature-tile::before {
	content: '';
	position: absolute; inset: auto -30% -60% -30%;
	height: 90%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.pf-feature-tile:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.pf-feature-tile:hover::before { opacity: 1; }
.pf-feature-ic {
	position: relative;
	width: 56px; height: 56px;
	margin: 0 auto .9rem;
	border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-size: 1.3rem;
	background: linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 55%, #764ba2) 100%);
	box-shadow: 0 12px 24px -12px var(--c);
	transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.pf-feature-tile:hover .pf-feature-ic { transform: scale(1.08) rotate(-6deg); }
.pf-feature-tile h3, .pf-feature-tile h6 { position: relative; margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--pf-ink); }
@media (max-width: 1199.98px) { .pf-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .pf-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .pf-feature-tile { padding: 1.1rem .5rem 1rem; } .pf-feature-ic { width: 48px; height: 48px; border-radius: 15px; font-size: 1.1rem; } .pf-feature-tile h3, .pf-feature-tile h6 { font-size: .82rem; } }
@media (max-width: 400px) { .pf-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* API docs mobile: keep the section bar stuck under the header */
@media (max-width: 991.98px) {
	.pf-api-layout > .col-lg-3 { position: sticky; top: 72px; z-index: 6; margin-bottom: 1rem !important; }
	.pf-api-doc .pf-api-nav { position: static; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
	html { scroll-padding-top: 160px; }
}

/* Space between page hero and API docs */
.pf-page-hero-section + .pf-api-doc { padding-top: 3rem; }
@media (max-width: 991.98px) { .pf-page-hero-section + .pf-api-doc { padding-top: 2rem; } }

/* =========================================================
   404 page
   ========================================================= */
.pf-404-section { padding-bottom: 4rem; }
.pf-404 { padding: 56px; text-align: left; }
.pf-404 h1 { font-size: clamp(2rem, 4vw, 3rem); }
.pf-404 p { margin: 0; }
.pf-404-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.75rem; font-size: .9rem; }
.pf-404-links span { color: var(--pf-muted); margin-right: .25rem; }
.pf-front .pf-404-links a {
	padding: .35rem .85rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(18, 19, 26, .06);
	color: var(--pf-ink) !important;
	font-weight: 500;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pf-front .pf-404-links a:hover { transform: translateY(-2px); box-shadow: var(--pf-shadow); }
.pf-404-art { width: 100%; height: auto; display: block; overflow: visible; }
@media (max-width: 991.98px) {
	.pf-404 { padding: 32px 20px; }
	.pf-404-links { justify-content: center; }
}

/* SVG animations */
.pf-404-art * { transform-box: fill-box; }
.pf404-blob { transform-origin: center; animation: pf404-blob 9s ease-in-out infinite; }
.pf404-blob-2 { animation-delay: -4s; }
@keyframes pf404-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14px, -10px) scale(1.08); } }

.pf404-floor { transform-origin: center; animation: pf404-floor 4s ease-in-out infinite; }
@keyframes pf404-floor { 0%, 100% { transform: scaleX(1); opacity: .08; } 50% { transform: scaleX(.88); opacity: .05; } }

.pf404-spark { transform-origin: center; animation: pf404-twinkle 2.6s ease-in-out infinite; }
.pf404-spark-2 { animation-delay: -.7s; }
.pf404-spark-3 { animation-delay: -1.4s; }
.pf404-spark-4 { animation-delay: -2s; }
@keyframes pf404-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .35; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

.pf404-four { animation: pf404-bob 4s ease-in-out infinite; }
.pf404-four-2 { animation-delay: -2s; }
@keyframes pf404-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.pf404-bell-wrap { animation: pf404-bubble 4s ease-in-out infinite; }
@keyframes pf404-bubble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.pf404-bell { transform-origin: 50% 0%; animation: pf404-ring 3.2s ease-in-out infinite; }
@keyframes pf404-ring {
	0%, 55%, 100% { transform: rotate(0); }
	60% { transform: rotate(16deg); } 65% { transform: rotate(-14deg); } 70% { transform: rotate(11deg); }
	75% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } 85% { transform: rotate(-2deg); }
}
.pf404-clapper { transform-origin: 50% 0%; animation: pf404-clap 3.2s ease-in-out infinite; }
@keyframes pf404-clap { 0%, 55%, 100% { transform: translateX(0); } 62% { transform: translateX(-6px); } 68% { transform: translateX(6px); } 74% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.pf404-ring { transform-origin: center; opacity: 0; animation: pf404-ping 3.2s ease-out infinite; }
.pf404-ring-2 { animation-delay: .35s; }
@keyframes pf404-ping { 0%, 55% { transform: scale(1); opacity: 0; } 58% { opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } }
.pf404-badge { animation: pf404-pop 3.2s ease-in-out infinite; }
@keyframes pf404-pop { 0%, 55%, 100% { scale: 1; } 62% { scale: 1.25; } 70% { scale: .95; } 78% { scale: 1.05; } }

.pf404-toast { animation: pf404-toast-in .8s cubic-bezier(.2, 1.3, .4, 1) both, pf404-float 5s ease-in-out infinite .8s; }
.pf404-toast-1 { animation-delay: .2s, 1s; }
.pf404-toast-2 { animation-delay: .5s, 1.3s; }
.pf404-toast-3 { animation-delay: .8s, 1.6s; }
@keyframes pf404-toast-in { from { opacity: 0; translate: 0 18px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pf404-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.pf404-dot { animation: pf404-dot 1.2s ease-in-out infinite; }
.pf404-dot-2 { animation-delay: .15s; }
.pf404-dot-3 { animation-delay: .3s; }
@keyframes pf404-dot { 0%, 100% { translate: 0 0; opacity: .4; } 40% { translate: 0 -5px; opacity: 1; } }

.pf404-search { animation: pf404-search 2.4s ease-in-out infinite; }
@keyframes pf404-search { 0%, 100% { translate: 0 0; } 25% { translate: 3px -3px; } 50% { translate: 0 -5px; } 75% { translate: -3px -2px; } }

.pf404-cursor { animation: pf404-cursor 6.4s ease-in-out infinite; }
@keyframes pf404-cursor {
	0% { transform: translate(600px, 210px); opacity: 0; }
	6% { opacity: 1; }
	22% { transform: translate(368px, 262px); }
	26% { transform: translate(368px, 262px) scale(.82); }
	30% { transform: translate(368px, 262px) scale(1); }
	55% { transform: translate(368px, 262px); opacity: 1; }
	72% { transform: translate(570px, 330px); opacity: 0; }
	100% { transform: translate(600px, 210px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pf-404-art * { animation: none !important; }
	.pf404-ring, .pf404-cursor { display: none; }
}

/* =========================================================
   Text pages (privacy policy, terms...)
   ========================================================= */
.pf-doc-head { padding-top: 2rem; padding-bottom: 2rem; max-width: 1320px; }
.pf-doc-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 .9rem; }
.pf-doc-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.pf-doc-meta span {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .35rem .8rem;
	border-radius: 999px;
	background: var(--pf-soft);
	border: 1px solid var(--pf-line);
	color: var(--pf-text);
	font-size: .82rem; font-weight: 500;
}
.pf-doc-meta i { color: var(--pf-grad-1); }
.pf-doc-lead { margin: 1.25rem 0 0; max-width: 760px; font-size: 1.1rem; color: var(--pf-text); line-height: 1.6; }

.pf-doc-page { padding-bottom: 4rem; }

/* Table of contents */
.pf-toc {
	position: sticky; top: 100px;
	padding: 1rem;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--pf-line);
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}
.pf-toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-muted); padding: .25rem .6rem .6rem; }
.pf-toc-links { display: flex; flex-direction: column; gap: 2px; position: relative; }
.pf-front .pf-toc-link {
	display: block;
	padding: .45rem .7rem;
	border-radius: 10px;
	border-left: 2px solid transparent;
	color: var(--pf-text) !important;
	font-size: .875rem; line-height: 1.35;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pf-front .pf-toc-link:hover { background: var(--pf-soft); color: var(--pf-ink) !important; }
.pf-front .pf-toc-link.is-active { background: #f1efff; color: var(--pf-ink) !important; font-weight: 600; border-left-color: var(--pf-grad-1); border-radius: 0 10px 10px 0; }
@media (max-width: 991.98px) {
	.pf-toc { position: static; max-height: none; }
	.pf-toc-links { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
	.pf-toc-links::-webkit-scrollbar { display: none; }
	.pf-front .pf-toc-link { white-space: nowrap; border: 1px solid var(--pf-line); border-radius: 999px; }
	.pf-front .pf-toc-link.is-active { border-radius: 999px; border-color: rgba(102, 126, 234, .4); }
}

/* Article typography */
.pf-prose {
	padding: 48px 56px;
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--pf-line);
	box-shadow: 0 1px 2px rgba(18, 19, 26, .03);
	color: var(--pf-text);
	font-size: 1.04rem;
	line-height: 1.75;
}
.pf-prose > *:first-child { margin-top: 0 !important; }
.pf-prose > *:last-child { margin-bottom: 0 !important; }
.pf-prose p { margin: 0 0 1.1rem; }
.pf-prose h2, .pf-prose h3, .pf-prose h4 {
	color: var(--pf-ink);
	font-family: 'Onest', sans-serif;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	scroll-margin-top: 110px;
}
.pf-prose h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.pf-prose h3 {
	position: relative;
	font-size: 1.3rem;
	margin: 2.4rem 0 .9rem;
	padding-top: 2rem;
	border-top: 1px solid var(--pf-line);
}
.pf-prose h3::before {
	content: '';
	position: absolute; top: -1px; left: 0;
	width: 48px; height: 3px; border-radius: 3px;
	background: linear-gradient(90deg, var(--pf-grad-1), var(--pf-grad-2));
}
.pf-prose > h3:first-child { border-top: 0; padding-top: 0; }
.pf-prose > h3:first-child::before { display: none; }
.pf-prose h4 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.pf-prose strong, .pf-prose b { color: var(--pf-ink); font-weight: 600; }
.pf-front .pf-prose a { color: #5b4bd1 !important; text-decoration: underline; text-decoration-color: rgba(91, 75, 209, .35); text-underline-offset: 3px; }
.pf-front .pf-prose a:hover { text-decoration-color: currentColor; }
.pf-prose ul, .pf-prose ol { margin: 0 0 1.25rem; padding-left: 0; list-style: none; }
.pf-prose li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; }
.pf-prose ul > li::before {
	content: '';
	position: absolute; left: .35rem; top: .7em;
	width: 7px; height: 7px; border-radius: 50%;
	background: linear-gradient(135deg, var(--pf-grad-1), var(--pf-grad-2));
}
.pf-prose ol { counter-reset: pf-ol; }
.pf-prose ol > li { counter-increment: pf-ol; padding-left: 2.25rem; }
.pf-prose ol > li::before {
	content: counter(pf-ol);
	position: absolute; left: 0; top: .1em;
	width: 1.6rem; height: 1.6rem; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #f1efff; color: #5b4bd1;
	font-size: .8rem; font-weight: 700; line-height: 1;
}
.pf-prose li > ul, .pf-prose li > ol { margin: .55rem 0 0; }
.pf-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--pf-grad-1); background: #f7f6ff; border-radius: 0 14px 14px 0; color: var(--pf-ink); }
.pf-prose table { width: 100%; margin: 1.5rem 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--pf-line); border-radius: 14px; overflow: hidden; font-size: .95rem; }
.pf-prose th, .pf-prose td { padding: .7rem 1rem; border-top: 1px solid var(--pf-line); text-align: left; }
.pf-prose thead th { background: var(--pf-soft); border-top: 0; color: var(--pf-ink); }
.pf-prose hr { border: 0; border-top: 1px solid var(--pf-line); margin: 2rem 0; }
.pf-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.pf-prose code { color: #5b4bd1; background: #f1efff; padding: 1px 6px; border-radius: 6px; font-size: .9em; }
@media (max-width: 767.98px) {
	.pf-prose { padding: 28px 20px; border-radius: 22px; font-size: 1rem; }
	.pf-prose h3 { font-size: 1.15rem; }
}

/* Share + help */
.pf-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 20px; border: 1px solid var(--pf-line); background: #fff; }
.pf-share > span { font-weight: 600; color: var(--pf-ink); }
.pf-share .btn { border-radius: 999px; }
.pf-doc-help {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	margin-top: 1.25rem; padding: 1.25rem 1.5rem;
	border-radius: 20px;
	background:
		radial-gradient(60% 120% at 0% 0%, #ece8ff 0%, rgba(236, 232, 255, 0) 70%),
		radial-gradient(60% 120% at 100% 100%, #ffe6f2 0%, rgba(255, 230, 242, 0) 70%),
		#f7f6fd;
}
.pf-doc-help > .pf-menu-ic { width: 44px; height: 44px; border-radius: 14px; color: #fff !important; background: linear-gradient(135deg, var(--pf-grad-1), var(--pf-grad-2)); flex-shrink: 0; }
.pf-doc-help > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.pf-doc-help strong { color: var(--pf-ink); font-family: 'Onest', sans-serif; }
.pf-doc-help span { color: var(--pf-muted); font-size: .92rem; }

/* TOC anchors: rely only on the global scroll-padding (no double offset) */
.pf-prose h2, .pf-prose h3, .pf-prose h4 { scroll-margin-top: 0; }

/* =========================================================
   Auth pages (login, register, lost / reset password, resend activation)
   ========================================================= */
body.pf-auth-body { background: #fff !important; }
.pf-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.pf-auth-side { display: flex; flex-direction: column; padding: 28px 48px; min-width: 0; }
.pf-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pf-auth-logo img { height: 44px; width: auto; }
.pf-front .pf-auth-back {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	border: 1px solid var(--pf-line);
	color: var(--pf-text) !important;
	font-size: .88rem; font-weight: 500;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.pf-front .pf-auth-back:hover { background: var(--pf-soft); color: var(--pf-ink) !important; }
.pf-auth-card { width: 100%; max-width: 440px; margin: auto; padding: 48px 0; }
.pf-auth-foot { text-align: center; font-size: .82rem; color: var(--pf-muted); }
.pf-front .pf-auth-foot a { color: var(--pf-muted) !important; }
.pf-front .pf-auth-foot a:hover { color: var(--pf-ink) !important; }

/* Form content (markup unchanged, styled here) */
.pf-auth-card h1 { font-size: clamp(1.7rem, 3vw, 2.2rem) !important; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: .5rem !important; }
.pf-auth-card form.mt-4 { margin-top: 1.75rem !important; }
.pf-auth-card label { font-weight: 600; color: var(--pf-ink); font-size: .9rem; margin-bottom: .4rem; }
.pf-auth-card .form-group { margin-bottom: 1.15rem; }
.pf-front .pf-auth-card .form-control {
	height: auto;
	padding: .85rem 1rem;
	border-radius: 14px;
	border: 1px solid var(--pf-line);
	background: var(--pf-soft);
	font-size: 1rem;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pf-front .pf-auth-card .form-control:focus { background: #fff; border-color: var(--pf-grad-1); box-shadow: 0 0 0 4px rgba(102, 126, 234, .15); }
.pf-front .pf-auth-card .form-control.is-invalid { border-color: #ef4444; background: #fff; }
.pf-auth-card .invalid-feedback { font-size: .83rem; }
.pf-front .pf-auth-card .btn-primary {
	padding: .9rem 1.25rem;
	border-radius: 999px;
	border: 0;
	background: var(--pf-ink);
	color: #fff;
	font-family: 'Onest', sans-serif; font-weight: 600; font-size: 1rem;
	box-shadow: 0 10px 24px -10px rgba(18, 19, 26, .6);
	transition: transform .2s ease, background-color .2s ease;
}
.pf-front .pf-auth-card .btn-primary:hover:not(:disabled) { background: #262836; transform: translateY(-1px); }
.pf-front .pf-auth-card .btn-primary:disabled { opacity: .5; }
.pf-front .pf-auth-card .btn-light {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .8rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--pf-line);
	background: #fff;
	color: var(--pf-ink);
	font-weight: 600;
	transition: background-color .2s ease, box-shadow .2s ease;
}
.pf-front .pf-auth-card .btn-light:hover { background: var(--pf-soft); box-shadow: var(--pf-shadow); }
.pf-auth-card .btn-light img { width: 20px; height: 20px; margin: 0 !important; }
.pf-auth-card hr { position: relative; margin: 1.5rem 0 !important; border-color: var(--pf-line) !important; }
.pf-front .pf-auth-card a:not(.btn) { color: var(--pf-ink) !important; font-weight: 600; }
.pf-front .pf-auth-card a.text-muted { color: var(--pf-muted) !important; font-weight: 500; }
.pf-front .pf-auth-card a:not(.btn):hover { color: var(--pf-grad-2) !important; }
.pf-auth-card .custom-control-label::before { border-radius: 6px; border-color: #cfd3e1; }
.pf-auth-card .custom-control-input:checked ~ .custom-control-label::before { background: linear-gradient(135deg, var(--pf-grad-1), var(--pf-grad-2)); border-color: transparent; }
.pf-auth-card .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(102, 126, 234, .2); }
.pf-auth-card .text-muted { color: var(--pf-muted) !important; }
.pf-auth-card .alert { border-radius: 14px; border: 0; font-size: .92rem; }
.pf-auth-card .mt-5.text-center { margin-top: 2rem !important; padding-top: 1.5rem; border-top: 1px solid var(--pf-line); }

/* Right visual panel */
.pf-auth-visual {
	position: relative;
	margin: 16px 16px 16px 0;
	border-radius: 32px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px;
	color: #fff;
	background:
		radial-gradient(55% 60% at 15% 10%, rgba(102, 126, 234, .65) 0%, rgba(102, 126, 234, 0) 70%),
		radial-gradient(55% 60% at 90% 95%, rgba(118, 75, 162, .75) 0%, rgba(118, 75, 162, 0) 70%),
		radial-gradient(40% 40% at 85% 20%, rgba(240, 166, 202, .45) 0%, rgba(240, 166, 202, 0) 70%),
		#14152a;
}
.pf-auth-visual::after {
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 80%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 80%);
	pointer-events: none;
}
.pf-auth-visual-inner { position: relative; z-index: 1; width: 100%; max-width: 480px; }
.pf-auth-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: .82rem; font-weight: 600; }
.pf-auth-visual h2 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin: 1.1rem 0 .8rem; }
.pf-auth-visual p { color: rgba(255, 255, 255, .78); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.pf-auth-widgets { position: relative; height: 300px; margin: 2rem 0 1.5rem; pointer-events: none; }
.pf-auth-w { position: absolute; animation: pf-float 6s ease-in-out infinite; }
.pf-auth-w-1 { top: 0; left: 0; }
.pf-auth-w-2 { top: 100px; right: -10px; animation-delay: -2s; }
.pf-auth-w-3 { top: 205px; left: 30px; animation-delay: -4s; }
.pf-auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.pf-auth-points li { display: flex; align-items: center; gap: .6rem; color: rgba(255, 255, 255, .9); font-weight: 500; }
.pf-auth-points i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .15); font-size: .65rem; }

@media (max-width: 1199.98px) {
	.pf-auth-visual { padding: 40px; }
	.pf-auth-widgets { transform: scale(.88); transform-origin: top left; }
}
@media (max-width: 991.98px) {
	.pf-auth { grid-template-columns: 1fr; }
	.pf-auth-visual { display: none; }
	.pf-auth-side { padding: 20px 16px; min-height: 100vh; }
	.pf-auth-card { padding: 32px 0; }
	.pf-auth-logo img { height: 38px; }
}

/* Auth v2: pastel form side, white inputs, more space between widgets */
.pf-auth-side {
	background:
		radial-gradient(60% 50% at 0% 0%, #e9e6ff 0%, rgba(233, 230, 255, 0) 70%),
		radial-gradient(55% 45% at 100% 20%, #ffe3f1 0%, rgba(255, 227, 241, 0) 70%),
		radial-gradient(60% 50% at 40% 100%, #dcefff 0%, rgba(220, 239, 255, 0) 70%),
		#f7f6fd;
}
.pf-front .pf-auth-card .form-control { background: #fff; border-color: rgba(18, 19, 26, .08); box-shadow: 0 1px 2px rgba(18, 19, 26, .04); }
.pf-front .pf-auth-back { background: rgba(255, 255, 255, .7); }
.pf-auth-card hr, .pf-auth-card .mt-5.text-center { border-color: rgba(18, 19, 26, .08) !important; }
.pf-auth-widgets { height: 380px; }
.pf-auth-w-1 { top: 0; left: 0; }
.pf-auth-w-2 { top: 130px; right: -10px; }
.pf-auth-w-3 { top: 268px; left: 20px; }

/* Auth: pastel background behind the whole page, also around the dark panel */
.pf-auth {
	background:
		radial-gradient(40% 50% at 0% 0%, #e9e6ff 0%, rgba(233, 230, 255, 0) 70%),
		radial-gradient(35% 45% at 55% 10%, #ffe3f1 0%, rgba(255, 227, 241, 0) 70%),
		radial-gradient(45% 50% at 30% 100%, #dcefff 0%, rgba(220, 239, 255, 0) 70%),
		radial-gradient(40% 50% at 100% 100%, #ffe9f3 0%, rgba(255, 233, 243, 0) 70%),
		#f7f6fd;
}
.pf-auth-side { background: transparent; }
body.pf-auth-body { background: #f7f6fd !important; }

/* Auth inputs: visible soft border */
.pf-front .pf-auth-card .form-control { border: 1.5px solid #dcd9f2; box-shadow: 0 2px 6px -2px rgba(102, 126, 234, .12); }
.pf-front .pf-auth-card .form-control:hover { border-color: #c4bff0; }
.pf-front .pf-auth-card .form-control:focus { border-color: #8b7fe8; box-shadow: 0 0 0 4px rgba(118, 75, 162, .14); }
.pf-front .pf-auth-card .form-control.is-invalid { border-color: #ef4444; }

/* Auth checkboxes: visible box */
.pf-auth-card .custom-control-label::before { background: #fff; border: 1.5px solid #c4bff0; width: 1.1rem; height: 1.1rem; top: .15rem; }
.pf-auth-card .custom-control-label::after { width: 1.1rem; height: 1.1rem; top: .15rem; }
.pf-auth-card .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { border-color: transparent; }

/* Auth checkboxes v2: stronger box */
.pf-front .pf-auth-card .custom-control-label::before { border: 2px solid #a99ff0 !important; border-radius: 6px !important; background-color: #fff !important; box-shadow: 0 2px 6px -2px rgba(102, 126, 234, .25); }
.pf-front .pf-auth-card .custom-control-input:checked ~ .custom-control-label::before { background: linear-gradient(135deg, #667eea, #764ba2) !important; border-color: #764ba2 !important; }
.pf-front .pf-auth-card .custom-control-label:hover::before { border-color: #764ba2 !important; }

/* reCAPTCHA: hide Google grey frame, wrap it in our rounded border */
.pf-front .pf-auth-card .g-recaptcha,
.pf-front .pf-form-card .g-recaptcha {
	width: 300px !important; height: 74px !important;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 0 0 1.5px #dcd9f2, 0 6px 16px -8px rgba(102, 126, 234, .35);
	background: #f9f9f9;
}
.pf-front .pf-auth-card .g-recaptcha > div,
.pf-front .pf-form-card .g-recaptcha > div { margin: -2px 0 0 -2px; }
.pf-front .pf-auth-card .g-recaptcha:hover,
.pf-front .pf-form-card .g-recaptcha:hover { box-shadow: 0 0 0 1.5px #c4bff0, 0 6px 16px -8px rgba(102, 126, 234, .45); }
.pf-front .pf-auth-card .form-group:has(.g-recaptcha) { margin: 1.25rem 0; }

/* reCAPTCHA aligned left with the fields */
.pf-front .pf-auth-card .d-flex:has(> .g-recaptcha),
.pf-front .pf-form-card .d-flex:has(> .g-recaptcha),
.pf-front .pf-auth-card .cf-turnstile, .pf-front .pf-form-card .cf-turnstile { justify-content: flex-start !important; }

/* Empty states (no_data partial) */
.pf-empty-emoji-lg { width: 84px; height: 84px; font-size: 2.4rem; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, #fff, #efeaff 70%); box-shadow: 0 14px 30px -16px rgba(118, 75, 162, .55); }
.pf-app main .pf-empty-emoji-lg + h2.h5 { color: var(--pf-ink) !important; font-family: "Onest", sans-serif; font-weight: 700; }

/* Accessibility: the demo widgets on our own pages keep the default widget colours, darkened just enough for WCAG AA contrast */
.pf-front .container-disabled-simple [style*="color: #47b2e4"] { color: #1877ab !important; }
.pf-front .container-disabled-simple [style*="color: #657d90"] { color: #5a7083 !important; }
.pf-front .container-disabled-simple [style*="background: #47b2e4"] { background: #1877ab !important; }
.pf-front .container-disabled-simple .altumcode-coupon-coupon-code { color: #1877ab !important; }
.pf-front .container-disabled-simple .altumcode-conversions-counter-time { color: #6b6b6b !important; }
