/* ---------------------------------------------------------------------
 * PMBO - Export-my-shop marketing page
 * Layered on top of pmbo-plans.css. Adds hero, integrations strip,
 * how-it-works grid, reviews wrapper, FAQ, and final CTA.
 * Mobile-first; clamp()-driven type scale; no JS dependencies.
 * --------------------------------------------------------------------- */

/* Note: horizontal-overflow clipping for marketing pages that use the
 * `100vw / -50vw` full-bleed pattern lives in PMBO_Shortcodes::
 * maybe_suppress_page_title() which prints a small `<style>` tag in
 * the head: `html, body.pmbo-hide-page-title { overflow-x: hidden }`.
 * That avoids relying on body→viewport overflow propagation which is
 * spec-mandated but not reliable across all theme stacks. */

.pmbo-export-page {
	--pmbo-ink: #0f172a;
	--pmbo-ink-2: #334155;
	--pmbo-muted: #64748b;
	--pmbo-line: #e2e8f0;
	--pmbo-bg-soft: #f8fafc;
	--pmbo-brand-2: #6366f1;
	--pmbo-accent-2: #ec4899;
	--pmbo-accent: #f59e0b;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--pmbo-ink);
	line-height: 1.55;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.pmbo-export-page * { box-sizing: border-box; }

.pmbo-export-page > section,
.pmbo-export-page > .pmbo-plans {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

/* ============================ HERO ============================ */
.pmbo-export-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 6vw, 5rem) 1.25rem clamp(2rem, 4vw, 3rem);
	max-width: none !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	left: 50%;
	right: 50%;
	width: 100vw;
	background:
		radial-gradient(1000px 400px at 80% -10%, rgba(99,102,241,.18), transparent 60%),
		radial-gradient(800px 360px at -5% 110%, rgba(236,72,153,.14), transparent 60%),
		linear-gradient(180deg, #ffffff 0%, var(--pmbo-bg-soft) 100%);
	text-align: center;
}

.pmbo-export-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pmbo-export-hero-bg .pmbo-blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(60px);
	opacity: .5;
}
.pmbo-export-hero-bg .pmbo-blob-1 { width: 360px; height: 360px; top: -80px; left: -60px; background: radial-gradient(closest-side, #818cf8, transparent); }
.pmbo-export-hero-bg .pmbo-blob-2 { width: 320px; height: 320px; bottom: -100px; right: -40px; background: radial-gradient(closest-side, #f472b6, transparent); }

.pmbo-export-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}

.pmbo-export-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(99,102,241,.12);
	color: #4f46e5;
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .02em;
	margin-bottom: 1.1rem;
}
.pmbo-export-eyebrow .pmbo-pulse {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 0 rgba(16,185,129,.6);
	animation: pmboExportPulse 2s ease-out infinite;
}
@keyframes pmboExportPulse {
	0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
	70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
	100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.pmbo-export-hero h1 {
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.08;
	margin: 0 0 1rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pmbo-ink);
}
.pmbo-export-hero h1 em {
	font-style: normal;
	background: linear-gradient(90deg, #6366f1, #ec4899);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pmbo-export-lead {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	color: var(--pmbo-ink-2);
	margin: 0 auto 1.6rem;
	max-width: 60ch;
}

.pmbo-export-hero-trust {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	color: var(--pmbo-muted);
	font-size: .88rem;
}
.pmbo-export-hero-trust span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.pmbo-export-hero-trust svg {
	width: 18px;
	height: 18px;
	color: #10b981;
	flex-shrink: 0;
}

/* ===================== INTEGRATIONS STRIP ===================== */
.pmbo-export-integrations {
	padding: clamp(2rem, 4vw, 3rem) 1.25rem;
	text-align: center;
}
.pmbo-export-integrations-label {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pmbo-muted);
	margin: 0 0 1.5rem;
}
.pmbo-export-integrations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
}
.pmbo-export-integration {
	background: #fff;
	border: 1px solid var(--pmbo-line);
	border-radius: 14px;
	padding: 1rem .75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pmbo-export-integration:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(15,23,42,.08);
	border-color: rgba(99,102,241,.35);
}
.pmbo-export-integration-ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, #eef2ff, #fdf2f8);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #4f46e5;
}
.pmbo-export-integration-ic svg { width: 22px; height: 22px; }
.pmbo-export-integration strong { font-size: .9rem; color: var(--pmbo-ink); }
.pmbo-export-integration small { font-size: .72rem; color: var(--pmbo-muted); }

/* per-icon brand tinting */
.pmbo-export-integration .pmbo-ic-instagram { background: linear-gradient(135deg,#fef3c7,#fce7f3,#ede9fe); color:#be185d; }
.pmbo-export-integration .pmbo-ic-snapchat  { background: #fef9c3; color:#854d0e; }
.pmbo-export-integration .pmbo-ic-whatsapp  { background: #dcfce7; color:#15803d; }
.pmbo-export-integration .pmbo-ic-meta      { background: #dbeafe; color:#1d4ed8; }
.pmbo-export-integration .pmbo-ic-google    { background: #fee2e2; color:#b91c1c; }
.pmbo-export-integration .pmbo-ic-razorpay  { background: #e0e7ff; color:#3730a3; }
.pmbo-export-integration .pmbo-ic-shiprocket{ background: #ffedd5; color:#9a3412; }
.pmbo-export-integration .pmbo-ic-gst       { background: #f1f5f9; color:#0f172a; }

/* ===================== PLANS GRID OVERRIDES =================== */
.pmbo-export-plans { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 1rem; }
.pmbo-export-plans-head { text-align: center; margin-bottom: 1.5rem; }
.pmbo-export-plans-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .5rem; font-weight: 800; letter-spacing: -.01em; }
.pmbo-export-plans-head p { color: var(--pmbo-muted); margin: 0; }

.pmbo-export-plans .pmbo-plan {
	border-radius: 16px;
	padding: 1.6rem 1.4rem 1.5rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pmbo-export-plans .pmbo-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(15,23,42,.18);
	border-color: rgba(99,102,241,.35);
}
.pmbo-export-plans .pmbo-plan--featured {
	background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
	border-color: var(--pmbo-brand-2);
	box-shadow: 0 0 0 2px rgba(99,102,241,.18), 0 24px 50px -24px rgba(99,102,241,.4);
}
.pmbo-plan-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, #eef2ff, #fce7f3);
	color: #4f46e5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto .6rem;
}
.pmbo-plan-icon svg { width: 22px; height: 22px; }
.pmbo-plan--featured .pmbo-plan-icon { background: linear-gradient(135deg, #6366f1, #ec4899); color: #fff; }
.pmbo-plan-feature .pmbo-plan-check { color: #10b981; display: inline-flex; }
.pmbo-plan-feature .pmbo-plan-check svg { width: 16px; height: 16px; }
.pmbo-plan-price small { display: block; font-size: .72rem; font-weight: 500; color: var(--pmbo-muted); margin-top: .15rem; }
.pmbo-plan-cta--primary { background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); border-color: transparent; }
.pmbo-plan-cta--primary:hover { filter: brightness(1.06); }

/* ===================== HOW IT WORKS =========================== */
.pmbo-export-how {
	padding: clamp(2.5rem, 5vw, 4rem) 1.25rem;
}
.pmbo-export-section-head { text-align: center; margin-bottom: 2rem; }
.pmbo-export-section-head .pmbo-kicker {
	display: inline-block;
	padding: .25rem .7rem;
	border-radius: 999px;
	background: rgba(99,102,241,.1);
	color: #4f46e5;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: .65rem;
}
.pmbo-export-section-head h2 {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin: 0;
	font-weight: 800;
	letter-spacing: -.01em;
}
.pmbo-export-how-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}
.pmbo-export-step {
	background: #fff;
	border: 1px solid var(--pmbo-line);
	border-radius: 16px;
	padding: 1.5rem 1.25rem;
	position: relative;
	transition: transform .2s, box-shadow .2s;
}
.pmbo-export-step:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -16px rgba(15,23,42,.18);
}
.pmbo-export-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: linear-gradient(135deg, #4f46e5, #ec4899);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	margin-bottom: .65rem;
}
.pmbo-export-step h3 { font-size: 1.05rem; margin: 0 0 .35rem; font-weight: 700; }
.pmbo-export-step p { font-size: .92rem; color: var(--pmbo-ink-2); margin: 0; }

/* ===================== REVIEWS WRAPPER ======================== */
.pmbo-export-reviews { padding: clamp(2rem, 4vw, 3rem) 1.25rem; }

/* ===================== FAQ ==================================== */
.pmbo-export-faq { padding: clamp(2.5rem, 5vw, 4rem) 1.25rem; }
.pmbo-export-faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .6rem; }
.pmbo-export-faq-list details {
	background: #fff;
	border: 1px solid var(--pmbo-line);
	border-radius: 12px;
	padding: 0;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
.pmbo-export-faq-list details[open] { border-color: rgba(99,102,241,.45); box-shadow: 0 8px 24px -12px rgba(15,23,42,.12); }
.pmbo-export-faq-list summary {
	cursor: pointer;
	padding: 1rem 1.1rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--pmbo-ink);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.pmbo-export-faq-list summary::-webkit-details-marker { display: none; }
.pmbo-export-faq-list summary::after {
	content: "";
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
	transition: transform .2s ease;
	flex-shrink: 0;
}
.pmbo-export-faq-list details[open] summary::after { transform: rotate(180deg); }
.pmbo-export-faq-list details > div { padding: 0 1.1rem 1rem; color: var(--pmbo-ink-2); font-size: .94rem; line-height: 1.6; }

/* ===================== FINAL CTA ============================== */
.pmbo-export-final {
	position: relative; /* required so left/right:50% recenter the
	                       full-bleed section against the page wrapper. */
	text-align: center;
	padding: clamp(3rem, 6vw, 5rem) 1.25rem;
	max-width: none !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	left: 50%;
	right: 50%;
	width: 100vw;
	background:
		radial-gradient(900px 360px at 80% 110%, rgba(99,102,241,.18), transparent 60%),
		radial-gradient(900px 360px at -10% -10%, rgba(236,72,153,.14), transparent 60%),
		#0f172a;
	color: #fff;
}
.pmbo-export-final h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .6rem; font-weight: 800; }
.pmbo-export-final p { color: #cbd5e1; margin: 0 0 1.4rem; }

.pmbo-export-page .pmbo-btn {
	appearance: none;
	border: 1px solid var(--pmbo-line);
	background: #fff;
	color: var(--pmbo-ink);
	padding: .85rem 1.4rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: transform .15s, box-shadow .15s, filter .15s;
}
.pmbo-export-page .pmbo-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.18); }
.pmbo-export-page .pmbo-btn-primary {
	background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
	color: #fff;
	border: 0;
}
.pmbo-export-page .pmbo-btn-primary:hover { filter: brightness(1.08); }
.pmbo-export-page .pmbo-btn-large { padding: 1rem 1.6rem; font-size: 1.05rem; }

/* ===================== MOBILE TUNING ========================== */
@media (max-width: 640px) {
	.pmbo-export-page > section,
	.pmbo-export-page > .pmbo-plans {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.pmbo-export-integrations-grid { grid-template-columns: repeat(2, 1fr); }
	.pmbo-export-hero-trust { gap: .6rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pmbo-export-eyebrow .pmbo-pulse { animation: none; }
	.pmbo-export-integration,
	.pmbo-export-step,
	.pmbo-export-plans .pmbo-plan { transition: none; }
}