/**
 * BFPT Premium Navbar & Hero Redesign Styles
 *
 * Implements:
 * - 3-Column Header: 1fr auto 1fr inside max-width 1280px, padding 0 32px, height 80px
 * - Logo height: 50px (proper prominent size)
 * - Centered Nav with 8px gaps, 16px text, Home pill 10px 20px padding (#FFECEE bg, #E11D2E text)
 * - Right Search Pill (#F1F5F9, 999px, 10px 18px padding, icon + "Ctrl + K")
 * - Header transparent at top of page (no border-bottom), white blur + border-bottom when scrolled > 10px
 * - Hero uses SAME 1280px container with 0 32px padding, left-aligned sharing logo left edge
 * - Fits comfortably on 1440x900 viewport above the fold
 * - H1 clamp(38px, 4.2vw, 54px), line-height 1.08, letter-spacing -0.02em, subtext max-width 520px
 * - Cards: grid-template-columns 1fr 1fr, gap 32px
 * - Each card: grid-template-columns 1fr 1.1fr, align-items center, min-height 290px, padding 32px 0 32px 32px, radius 24px
 * - Illustrations:
 *   - PDF card: tilted -8deg document, folded red corner with white flap, skeleton lines, blue signature (#2563EB), cursor, floating toolbar, red sparkle badge with rays
 *   - BG Remover card: overlapping portrait cards (back -4deg on lavender, front +5deg on checkerboard), curved arrow, white sparkle badge
 *   - Drop shadows: 0 24px 48px rgba(99,102,241,.18) and 0 24px 48px rgba(225,29,46,.15)
 * - Wide search pill below cards: max-width 760px, height 64px, radius 999px, bg #F1F5F9 + 48px red submit circle + shield privacy line
 * - Decorative layers: two large pink curved ribbon shapes, lavender orb (~80px) with sweeping purple line, soft red glow
 * - Parallax mouse-follow + subtle floating loops
 *
 * @package Blocksy_Child
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. NAVIGATION BAR (HEADER)
   ========================================================================== */

header#header.bfpt-header,
.bfpt-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 80px !important;
	min-height: 80px !important;
	max-height: 80px !important;
	display: block !important;
	background-color: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
	z-index: 9999 !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: background-color 0.25s ease, backdrop-filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	box-sizing: border-box !important;
}

/* Scrolled state (>10px) */
header#header.bfpt-header.bfpt-header--scrolled,
header#header.bfpt-header.is-scrolled,
.bfpt-header.bfpt-header--scrolled,
.bfpt-header.is-scrolled,
.bfpt-header--solid {
	background-color: rgba(255, 255, 255, 0.94) !important;
	backdrop-filter: blur(14px) !important;
	-webkit-backdrop-filter: blur(14px) !important;
	border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
	box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
}

/* 3-Column Header Grid Layout: 1fr auto 1fr */
.bfpt-header-inner {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 32px !important;
	height: 80px !important;
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	align-items: center !important;
	box-sizing: border-box !important;
}

/* Left Column: Logo Only (48-52px height) */
.bfpt-header-brand {
	justify-self: start !important;
	display: flex !important;
	align-items: center !important;
}

.bfpt-header-logo-link {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 0 !important;
	text-decoration: none !important;
}

.bfpt-header-logo-img {
	height: 50px !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain !important;
	display: block !important;
}

/* Center Column: Navigation (Home, PDF Tools, Other Tools, Blog) */
.bfpt-header-nav {
	justify-self: center !important;
	display: flex !important;
	align-items: center !important;
}

.bfpt-nav-list {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bfpt-nav-item {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bfpt-nav-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 16px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #1E293B !important;
	text-decoration: none !important;
	border-radius: 9999px !important;
	transition: color 200ms ease, background-color 200ms ease !important;
	line-height: 1.4 !important;
}

.bfpt-nav-link:hover {
	color: #E11D2E !important;
}

/* Active Item ("Home") - 10px 20px padding */
.bfpt-nav-item.is-active .bfpt-nav-link,
.bfpt-nav-link--active {
	background-color: #FFECEE !important;
	color: #E11D2E !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
}

/* Dropdown Chevrons */
.bfpt-dropdown-chevron {
	transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	stroke: currentColor !important;
}

.bfpt-nav-item--has-dropdown:hover .bfpt-dropdown-chevron,
.bfpt-nav-item--has-dropdown:focus-within .bfpt-dropdown-chevron {
	transform: rotate(180deg) !important;
}

/* Dropdown Panels */
.bfpt-dropdown-panel {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	left: 50% !important;
	transform: translateX(-50%) translateY(-8px) !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(226, 232, 240, 0.85) !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.05) !important;
	padding: 16px !important;
	min-width: 320px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms ease !important;
	z-index: 1000 !important;
}

/* Hover Bridge - Eliminates 8px dead zone gap */
.bfpt-dropdown-panel::before {
	content: '' !important;
	position: absolute !important;
	top: -24px !important;
	left: 0 !important;
	right: 0 !important;
	height: 24px !important;
	background: transparent !important;
	pointer-events: auto !important;
}

.bfpt-dropdown-panel--wide {
	min-width: 580px !important;
}

.bfpt-dropdown-panel--pdf-mega {
	min-width: 820px !important;
	max-width: 900px !important;
	padding: 20px 24px 16px 24px !important;
}

.bfpt-dropdown-panel--other-mega {
	min-width: 880px !important;
	max-width: 960px !important;
	padding: 20px 24px 16px 24px !important;
}

.bfpt-nav-item--has-dropdown:hover .bfpt-dropdown-panel,
.bfpt-nav-item--has-dropdown:focus-within .bfpt-dropdown-panel,
.bfpt-nav-item--has-dropdown.is-open .bfpt-dropdown-panel {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateX(-50%) translateY(0) !important;
}

.bfpt-dropdown-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.bfpt-dropdown-grid--columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
}

.bfpt-dropdown-grid--4col {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}

.bfpt-dropdown-col {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.bfpt-dropdown-col-heading {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #64748B !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 4px 8px 8px 8px !important;
	border-bottom: 1px solid #E2E8F0 !important;
	margin-bottom: 6px !important;
}

.bfpt-dropdown-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	color: #1E293B !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	transition: background-color 150ms ease, color 150ms ease !important;
}

.bfpt-dropdown-item:hover,
.bfpt-dropdown-item:focus-visible {
	background-color: #F1F5F9 !important;
	color: #E5322D !important;
}

.bfpt-dropdown-item--featured {
	background-color: #F8FAFC !important;
}

.bfpt-dropdown-item--highlight {
	background-color: #FAFAFB !important;
}

.bfpt-dropdown-icon,
.bfpt-dropdown-item .material-symbols-rounded {
	font-size: 19px !important;
	color: #E5322D !important;
	flex-shrink: 0 !important;
}

.bfpt-dropdown-item-text {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.bfpt-dropdown-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.bfpt-dropdown-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0F172A !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.bfpt-badge-pill {
	font-size: 10px !important;
	font-weight: 700 !important;
	color: #E11D2E !important;
	background: #FFECEE !important;
	padding: 2px 7px !important;
	border-radius: 999px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

.bfpt-badge-pill--indigo {
	color: #6366F1 !important;
	background: #EEF2FF !important;
}

.bfpt-dropdown-desc {
	font-size: 12px !important;
	color: #64748B !important;
	line-height: 1.4 !important;
}

.bfpt-dropdown-footer {
	border-top: 1px solid #E2E8F0 !important;
	margin-top: 14px !important;
	padding-top: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.bfpt-dropdown-tagline {
	font-size: 12px !important;
	color: #64748B !important;
	font-weight: 500 !important;
}

.bfpt-dropdown-sub-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #059669 !important;
	text-decoration: none !important;
	padding: 6px 12px !important;
	border-radius: 8px !important;
	transition: background-color 150ms ease !important;
}

.bfpt-dropdown-sub-link:hover {
	background-color: #ECFDF5 !important;
}

.bfpt-dropdown-sub-link .material-symbols-rounded {
	font-size: 18px !important;
	color: #059669 !important;
}

.bfpt-badge-pill--green {
	color: #059669 !important;
	background: #DEF7EC !important;
}

.bfpt-dropdown-all-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 14px !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #E11D2E !important;
	text-decoration: none !important;
	transition: background-color 150ms ease !important;
}

.bfpt-dropdown-all-link:hover {
	background-color: #FFECEE !important;
}

/* Right Column: Search Pill (right-aligned) */
.bfpt-header-actions {
	justify-self: end !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.bfpt-header .bfpt-search-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background-color: #F1F5F9 !important;
	color: #64748B !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 18px !important;
	cursor: pointer !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	transition: background-color 150ms ease, color 150ms ease !important;
}

.bfpt-header .bfpt-search-pill:hover {
	background-color: #E2E8F0 !important;
	color: #0F172A !important;
}

.bfpt-search-icon {
	color: #64748B !important;
	flex-shrink: 0 !important;
}

.bfpt-search-pill-label {
	font-weight: 500 !important;
	font-size: 14px !important;
}

/* Mobile Hamburger Button */
.bfpt-hamburger-btn {
	display: none !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 5px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	width: 44px !important;
	height: 44px !important;
	padding: 10px 8px !important;
	background: transparent !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
}

.bfpt-hamburger-line {
	width: 100% !important;
	height: 2px !important;
	background-color: #0F172A !important;
	border-radius: 2px !important;
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Mobile Slide-In Navigation Drawer */
body.bfpt-drawer-open {
	overflow: hidden !important;
	touch-action: none !important;
}

.bfpt-mobile-drawer {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000 !important;
	display: flex !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: visibility 0.25s ease !important;
}

.bfpt-mobile-drawer.is-open {
	visibility: visible !important;
	pointer-events: auto !important;
}

.bfpt-mobile-drawer-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.5) !important;
	backdrop-filter: blur(4px) !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
}

.bfpt-mobile-drawer.is-open .bfpt-mobile-drawer-backdrop {
	opacity: 1 !important;
}

.bfpt-mobile-drawer-panel {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 85% !important;
	max-width: 360px !important;
	background: #FFFFFF !important;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1) !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 24px 20px !important;
	padding-top: max(24px, env(safe-area-inset-top)) !important;
	padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
	transform: translateX(100%) !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior: contain !important;
}

.bfpt-mobile-drawer.is-open .bfpt-mobile-drawer-panel {
	transform: translateX(0) !important;
}

.bfpt-mobile-drawer-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid #F1F5F9 !important;
	margin-bottom: 20px !important;
}

.bfpt-mobile-drawer-close {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	color: #64748B !important;
	min-width: 44px !important;
	min-height: 44px !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	touch-action: manipulation !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.bfpt-mobile-drawer-close:hover,
.bfpt-mobile-drawer-close:focus-visible {
	background-color: #F1F5F9 !important;
	color: #0F172A !important;
}

.bfpt-mobile-drawer-search {
	margin-bottom: 24px !important;
}

.bfpt-mobile-search-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	background: #F1F5F9 !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 999px !important;
	padding: 10px 16px !important;
	color: #64748B !important;
	font-size: 14px !important;
	cursor: pointer !important;
}

.bfpt-mobile-kbd {
	background: #FFFFFF !important;
	border: 1px solid #CBD5E1 !important;
	border-radius: 4px !important;
	padding: 2px 6px !important;
	font-size: 11px !important;
}

.bfpt-mobile-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.bfpt-mobile-nav-link {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #0F172A !important;
	text-decoration: none !important;
	transition: background-color 150ms ease !important;
}

.bfpt-mobile-nav-item.is-active .bfpt-mobile-nav-link {
	background-color: #FFECEE !important;
	color: #E11D2E !important;
	font-weight: 600 !important;
}

.bfpt-mobile-accordion-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 14px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #0F172A !important;
	cursor: pointer !important;
	min-height: 48px !important;
	text-align: left !important;
	touch-action: manipulation !important;
	transition: background-color 150ms ease, color 150ms ease !important;
}

.bfpt-mobile-accordion-btn:hover,
.bfpt-mobile-accordion-btn:focus-visible {
	background-color: #F8FAFC !important;
	color: #E11D2E !important;
}

.bfpt-mobile-accordion-chevron {
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	color: #64748B !important;
	flex-shrink: 0 !important;
}

.bfpt-mobile-nav-item.is-expanded .bfpt-mobile-accordion-chevron,
.bfpt-mobile-accordion-btn[aria-expanded="true"] .bfpt-mobile-accordion-chevron {
	transform: rotate(180deg) !important;
	color: #E11D2E !important;
}

.bfpt-mobile-sublist {
	list-style: none !important;
	padding: 0 0 0 20px !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	max-height: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	visibility: hidden !important;
	transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.3s !important;
}

.bfpt-mobile-nav-item.is-expanded .bfpt-mobile-sublist,
.bfpt-mobile-sublist.is-open {
	max-height: 1000px !important;
	opacity: 1 !important;
	visibility: visible !important;
	padding: 6px 0 10px 20px !important;
}

.bfpt-mobile-sublist a {
	font-size: 14.5px !important;
	color: #475569 !important;
	text-decoration: none !important;
	padding: 10px 12px !important;
	display: flex !important;
	align-items: center !important;
	min-height: 44px !important;
	border-radius: 8px !important;
	transition: background-color 140ms ease, color 140ms ease !important;
}

.bfpt-mobile-sublist a:hover,
.bfpt-mobile-sublist a:focus-visible {
	background-color: #F1F5F9 !important;
	color: #E11D2E !important;
}

.bfpt-mobile-all-link {
	color: #E11D2E !important;
	font-weight: 600 !important;
}

.bfpt-mobile-drawer-footer {
	margin-top: auto !important;
	padding-top: 24px !important;
	border-top: 1px solid #F1F5F9 !important;
}

.bfpt-mobile-privacy-text {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: #64748B !important;
	margin: 0 !important;
}


/* ==========================================================================
   2. HERO SECTION
   ========================================================================== */

.bfpt-hero-wrap {
	position: relative !important;
	background-color: #FFFFFF !important;
	padding-top: 80px !important; /* Offset for 80px fixed header */
	overflow: hidden !important;
}

/* Same container as Header: max-width 1280px, padding 40px 32px 48px 32px */
.bfpt-hero-container {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 40px 32px 48px 32px !important;
	position: relative !important;
	z-index: 2 !important;
	box-sizing: border-box !important;
}

/* Decorative Background Layers (Behind Content, Pointer-Events None) */
.bfpt-hero-decor {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	z-index: 1 !important;
}

.bfpt-decor-layer {
	position: absolute !important;
	will-change: transform !important;
}

/* Pink Curved Ribbon Shapes on Left Edge */
.bfpt-decor-paper-1 {
	top: 240px !important;
	left: -50px !important;
	animation: bfptFloatDrift1 8s ease-in-out infinite alternate !important;
}

.bfpt-decor-paper-2 {
	top: 560px !important;
	left: -40px !important;
	animation: bfptFloatDrift2 9s ease-in-out infinite alternate !important;
}

/* Lavender Orb (~80px) & Sweeping Purple Curve (Top Right) */
.bfpt-decor-orb-wrap {
	top: 110px !important;
	right: 70px !important;
	position: absolute !important;
	width: 80px !important;
	height: 80px !important;
	animation: bfptFloatDrift3 10s ease-in-out infinite alternate !important;
}

.bfpt-decor-orb {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at 35% 35%, #DDD6FE, #818CF8) !important;
	opacity: 0.85 !important;
	box-shadow: 0 16px 40px rgba(129, 140, 248, 0.32) !important;
}

.bfpt-decor-sweeping-line {
	position: absolute !important;
	top: -20px !important;
	left: -160px !important;
	pointer-events: none !important;
	overflow: visible !important;
}

/* Soft Red Glow (Bottom Left) */
.bfpt-decor-glow-left {
	bottom: -50px !important;
	left: -50px !important;
	width: 380px !important;
	height: 380px !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(225, 29, 46, 0.08) 0%, transparent 70%) !important;
	filter: blur(50px) !important;
}

/* Idle Drift Keyframes */
@keyframes bfptFloatDrift1 {
	0% { transform: translateY(0) rotate(0deg); }
	100% { transform: translateY(-14px) rotate(2deg); }
}

@keyframes bfptFloatDrift2 {
	0% { transform: translateY(0) rotate(0deg); }
	100% { transform: translateY(12px) rotate(-1.5deg); }
}

@keyframes bfptFloatDrift3 {
	0% { transform: translateY(0) scale(1); }
	100% { transform: translateY(-10px) scale(1.03); }
}

/* Headline & Text Block (Left-Aligned, Shares Logo Left Edge) */
.bfpt-hero-intro {
	margin-bottom: 28px !important;
	text-align: left !important;
}

/* "FREE ONLINE TOOLS" Badge Pill */
.bfpt-hero-badge-pill {
	display: inline-flex !important;
	align-items: center !important;
	background-color: #FFECEE !important;
	color: #E11D2E !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 6px 14px !important;
	border-radius: 9999px !important;
	margin-bottom: 12px !important;
}

/* H1: clamp(38px, 4.2vw, 54px), line-height: 1.08, letter-spacing: -0.02em */
.bfpt-hero-heading {
	font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: clamp(38px, 4.2vw, 54px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.02em !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	margin: 0 0 12px 0 !important;
	max-width: 820px !important;
}

.bfpt-hero-heading-highlight {
	color: #E11D2E !important;
}

/* Subtext: max-width 520px */
.bfpt-hero-subtext {
	color: #64748B !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
	max-width: 520px !important;
	margin: 0 !important;
}


/* ==========================================================================
   3. TWO OPTION CARDS (PDF EDITORS & BACKGROUND REMOVER)
   ========================================================================== */

/* Full container width grid: 1fr 1fr, gap 32px */
.bfpt-hero-cards-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 32px !important;
	margin-bottom: 28px !important;
	width: 100% !important;
}

/* Each card: 2 columns (1fr 1.1fr), min-height 290px, padding 32px 0 32px 32px, radius 24px */
.bfpt-tool-card {
	background-color: #FFFFFF !important;
	border-radius: 24px !important;
	padding: 32px 0 32px 32px !important;
	min-height: 290px !important;
	display: grid !important;
	grid-template-columns: 1fr 1.1fr !important;
	align-items: center !important;
	position: relative !important;
	overflow: hidden !important;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
	box-sizing: border-box !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.bfpt-tool-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.1) !important;
}

/* Left Column: Content (max-width 260px) */
.bfpt-tool-card-content {
	max-width: 260px !important;
	z-index: 2 !important;
}

/* Card Icons */
.bfpt-tool-card-icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 14px !important;
}

.bfpt-tool-card-icon--red {
	background-color: #FFECEE !important;
	color: #E11D2E !important;
}

.bfpt-tool-card-icon--indigo {
	background-color: #EEF2FF !important;
	color: #4F46E5 !important;
}

.bfpt-tool-card-title {
	font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.25 !important;
}

.bfpt-tool-card-desc {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #64748B !important;
	margin: 0 0 22px 0 !important;
	max-width: 260px !important;
}

/* Card Buttons (Pills with 9999px radius) */
.bfpt-card-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 24px !important;
	border-radius: 9999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	color: #FFFFFF !important;
	transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.bfpt-card-btn:active {
	transform: scale(0.98) !important;
}

.bfpt-card-btn--red {
	background-color: #E11D2E !important;
}

.bfpt-card-btn--red:hover {
	background-color: #C8101F !important;
}

.bfpt-card-btn--indigo {
	background-color: #4F46E5 !important;
}

.bfpt-card-btn--indigo:hover {
	background-color: #4338CA !important;
}


/* ==========================================================================
   4. CARD 1 ILLUSTRATION (TILTED PDF SHEET, TOOLBAR, BADGE)
   ========================================================================== */

.bfpt-tool-card-visual {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 250px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Tilted -8deg PDF Sheet (~260px wide, drop shadow 0 24px 48px rgba(225,29,46,.15)) */
.bfpt-pdf-sheet {
	width: 260px !important;
	height: 255px !important;
	background: #FFFFFF !important;
	border-radius: 16px !important;
	position: relative !important;
	transform: rotate(-8deg) !important;
	box-shadow: 0 24px 48px rgba(225, 29, 46, 0.15), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	border: 1px solid #F1F5F9 !important;
	padding: 20px 18px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	margin-right: -20px !important; /* Bleed slightly past card right edge */
	will-change: transform !important;
	animation: bfptFloatDrift1 8s ease-in-out infinite alternate !important;
}

/* Folded Corner */
.bfpt-pdf-corner-fold {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 50px !important;
	height: 50px !important;
	z-index: 3 !important;
}

.bfpt-pdf-sheet-tag {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #0F172A !important;
	margin-bottom: 14px !important;
	letter-spacing: -0.01em !important;
}

.bfpt-pdf-sheet-lines {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.bfpt-pdf-line {
	height: 6px !important;
	background: #E2E8F0 !important;
	border-radius: 4px !important;
	display: block !important;
}

.bfpt-pdf-line--title {
	width: 75% !important;
}

.bfpt-pdf-line--full {
	width: 95% !important;
}

.bfpt-pdf-line--short {
	width: 65% !important;
}

.bfpt-pdf-signature-wrap {
	margin-top: 14px !important;
}

/* Mouse Cursor */
.bfpt-pdf-cursor {
	position: absolute !important;
	right: 52px !important;
	bottom: 30px !important;
	z-index: 6 !important;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) !important;
	animation: bfptCursorDrift 6s ease-in-out infinite alternate !important;
}

@keyframes bfptCursorDrift {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-8px, -6px); }
}

/* Attached Floating Vertical Toolbar on PDF Right Edge */
.bfpt-pdf-floating-toolbar {
	position: absolute !important;
	right: -14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
	padding: 7px 5px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 7px !important;
	z-index: 5 !important;
	animation: bfptFloatDrift2 7s ease-in-out infinite alternate !important;
}

.bfpt-toolbar-btn {
	width: 24px !important;
	height: 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	color: #64748B !important;
	cursor: pointer !important;
	padding: 0 !important;
}

.bfpt-toolbar-btn.is-active {
	background-color: #FFECEE !important;
	color: #E11D2E !important;
}

.bfpt-toolbar-t {
	font-size: 13px !important;
	font-weight: 800 !important;
}

/* Red Sparkle Badge with Radiating Rays */
.bfpt-sparkle-badge-wrap--red {
	position: absolute !important;
	top: 8px !important;
	right: 28px !important;
	z-index: 6 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	animation: bfptSparklePulse 4s ease-in-out infinite !important;
}

.bfpt-sparkle-rays {
	margin-bottom: -2px !important;
}

.bfpt-visual-badge--sparkle-red {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	background: #E11D2E !important;
	color: #FFFFFF !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 6px 16px rgba(225, 29, 46, 0.35) !important;
}

@keyframes bfptSparklePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12) rotate(10deg); }
}


/* ==========================================================================
   5. CARD 2 ILLUSTRATION (OVERLAPPING PORTRAIT CARDS & CHECKERBOARD)
   ========================================================================== */

.bfpt-bg-cards-stack {
	position: relative !important;
	width: 290px !important;
	height: 245px !important;
	margin-right: -25px !important; /* Bleed slightly past card right edge */
}

/* Overlapping Portrait Cards (~165px x 225px each) */
.bfpt-bg-card {
	position: absolute !important;
	width: 165px !important;
	height: 220px !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	will-change: transform !important;
}

/* Back Card: Original Portrait on Lavender (Rotated -4deg, Drop Shadow 0 24px 48px rgba(99,102,241,.18)) */
.bfpt-bg-card--back {
	left: 10px !important;
	top: 10px !important;
	background-color: #EDE9FE !important;
	transform: rotate(-4deg) !important;
	border: 1px solid rgba(199, 210, 254, 0.6) !important;
	box-shadow: 0 24px 48px rgba(99, 102, 241, 0.18) !important;
	z-index: 1 !important;
	animation: bfptFloatDrift1 8s ease-in-out infinite alternate !important;
}

.bfpt-bg-card-photo-wrap,
.bfpt-bg-card-photo {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Front Card: Cutout on Checkerboard (Rotated +5deg, Offset Right, Drop Shadow 0 24px 48px rgba(99,102,241,.22)) */
.bfpt-bg-card--front {
	left: 85px !important;
	top: 20px !important;
	transform: rotate(5deg) !important;
	border: 2px solid #FFFFFF !important;
	box-shadow: 0 24px 48px rgba(99, 102, 241, 0.22) !important;
	z-index: 2 !important;
	animation: bfptFloatDrift2 9s ease-in-out infinite alternate !important;
}

/* CSS Checkerboard Transparency Pattern */
.bfpt-checkerboard-canvas {
	width: 100% !important;
	height: 100% !important;
	background-color: #FFFFFF !important;
	background-image:
		linear-gradient(45deg, #E2E8F0 25%, transparent 25%),
		linear-gradient(-45deg, #E2E8F0 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #E2E8F0 75%),
		linear-gradient(-45deg, transparent 75%, #E2E8F0 75%) !important;
	background-size: 16px 16px !important;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;
}

.bfpt-bg-card-cutout {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Small Curved Blue Arrow Above Transition */
.bfpt-visual-curved-arrow {
	position: absolute !important;
	top: 0 !important;
	left: 60% !important;
	transform: translateX(-50%) !important;
	z-index: 4 !important;
	animation: bfptFloatDrift3 6s ease-in-out infinite alternate !important;
}

/* White Sparkle Badge on Card Edge */
.bfpt-visual-badge--sparkle-white {
	position: absolute !important;
	right: -10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 8px !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(99, 102, 241, 0.15) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 5 !important;
	animation: bfptSparklePulse 4s ease-in-out infinite !important;
}


/* ==========================================================================
   6. WIDE CENTERED SEARCH PILL BELOW CARDS (max-width 760px, height 64px, bg #F1F5F9)
   ========================================================================== */

.bfpt-hero-search-wrap {
	width: 100% !important;
	max-width: 760px !important;
	margin: 28px auto 0 !important;
	text-align: center !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.bfpt-hero-search-pill {
	height: 64px !important;
	border-radius: 999px !important;
	background: #F1F5F9 !important;
	border: none !important;
	padding: 0 10px 0 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.bfpt-hero-search-pill:hover {
	background-color: #E2E8F0 !important;
}

.bfpt-hero-search-inner-left {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}

.bfpt-hero-search-icon {
	color: #64748B !important;
	flex-shrink: 0 !important;
}

.bfpt-hero-search-text {
	font-size: 16px !important;
	color: #64748B !important;
	font-weight: 400 !important;
}

.bfpt-hero-search-arrow {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: #E11D2E !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
	transition: transform 0.15s ease, background-color 0.15s ease !important;
}

.bfpt-hero-search-pill:hover .bfpt-hero-search-arrow {
	transform: scale(1.05) !important;
	background-color: #C8101F !important;
}

/* Centered Privacy Line */
.bfpt-hero-privacy-note {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: 14px !important;
	font-size: 13px !important;
	color: #94A3B8 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.bfpt-privacy-shield-icon {
	color: #94A3B8 !important;
	stroke: #94A3B8 !important;
}

.bfpt-privacy-sub {
	color: #94A3B8 !important;
}


/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
	.bfpt-header-inner {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 24px !important;
	}

	.bfpt-header-nav {
		display: none !important;
	}

	.bfpt-header .bfpt-search-pill {
		display: none !important;
	}

	.bfpt-header-actions {
		display: flex !important;
		margin-left: auto !important;
	}

	.bfpt-hamburger-btn {
		display: flex !important;
	}

	.bfpt-hero-cards-grid {
		gap: 20px !important;
	}

	.bfpt-tool-card {
		padding: 24px 0 24px 20px !important;
	}

	.bfpt-pdf-sheet {
		width: 210px !important;
		height: 220px !important;
	}

	.bfpt-bg-cards-stack {
		width: 240px !important;
		height: 210px !important;
	}

	.bfpt-bg-card {
		width: 140px !important;
		height: 185px !important;
	}

	.bfpt-bg-card--front {
		left: 70px !important;
		top: 18px !important;
	}
}

@media (max-width: 768px) {
	.bfpt-decor-orb-wrap {
		display: none !important;
	}

	.bfpt-header-inner {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 20px !important;
		height: 70px !important;
	}

	.bfpt-header-logo-img {
		height: 42px !important;
	}

	.bfpt-hero-wrap {
		padding-top: 70px !important;
	}

	.bfpt-hero-container {
		padding: 28px 20px 40px 20px !important;
	}

	.bfpt-hero-heading {
		font-size: clamp(32px, 8vw, 40px) !important;
		line-height: 1.12 !important;
	}

	.bfpt-hero-subtext {
		font-size: 15px !important;
	}

	.bfpt-hero-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.bfpt-tool-card {
		grid-template-columns: 1fr !important;
		padding: 24px 20px !important;
		min-height: auto !important;
	}

	.bfpt-tool-card-content {
		max-width: 100% !important;
		margin-bottom: 20px !important;
	}

	.bfpt-tool-card-visual {
		margin: 0 auto !important;
		min-height: 220px !important;
	}

	.bfpt-pdf-sheet {
		margin-right: 0 !important;
	}

	.bfpt-bg-cards-stack {
		margin-right: 0 !important;
	}

	.bfpt-hero-search-pill {
		height: 56px !important;
		padding: 0 8px 0 16px !important;
	}

	.bfpt-hero-search-text {
		font-size: 15px !important;
	}

	.bfpt-hero-search-arrow {
		width: 42px !important;
		height: 42px !important;
	}

	.bfpt-privacy-sub {
		display: none !important;
	}
}