/* ============================================================
   stride.css — Stripe-style theme system
   Modeled after ViralGPT's design language, with Stride's
   blue→purple brand gradient preserved.
   Tokens kept lean and consistent so every page feels of a piece.
   ============================================================ */

:root {
	/* Brand gradient (preserved) */
	--stride-grad-1: #AF40FF;
	--stride-grad-2: #5B42F3;
	--stride-grad-3: #00DDEB;
	--stride-gradient: linear-gradient(135deg, #AF40FF 0%, #5B42F3 50%, #00DDEB 100%);
	--stride-gradient-2: linear-gradient(135deg, #5B42F3 0%, #00DDEB 100%);

	/* Stripe-style neutral tokens */
	--c-bg:          #f6f9fc;
	--c-bg-elev:     #ffffff;
	--c-dark:        #0a2540;     /* headings */
	--c-body:        #425466;     /* body text */
	--c-muted:       #8898aa;     /* tertiary */
	--c-border:      #e3e8ee;
	--c-border-soft: #f0f4f8;
	--c-primary:     #5B42F3;     /* brand purple (matches gradient mid-stop) */
	--c-primary-2:   #4f37e5;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(50, 50, 93, 0.06);
	--shadow-md: 0 2px 4px rgba(50, 50, 93, 0.06), 0 6px 12px -2px rgba(50, 50, 93, 0.08);
	--shadow-lg: 0 30px 60px -12px rgba(50, 50, 93, 0.15), 0 18px 36px -18px rgba(0, 0, 0, 0.12);
	--shadow-hover: 0 12px 24px rgba(50, 50, 93, 0.10);
	--shadow-glow: 0 4px 14px rgba(91, 66, 243, 0.30);

	/* Radii */
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 16px;
	--r-xl: 20px;

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   BASE
   ============================================================ */

html, body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	max-width: 100%;
	min-height: 100vh;
}

body { display: flex; flex-direction: column; }
.stride-footer { margin-top: auto !important; }

/* Light-theme bodies inherit the deep navy; dark pages keep their inline color */
body[style*="#f7f7f7"],
body[style*="#f6f9fc"],
body[style*="#ffffff"] { color: var(--c-dark); }

body[style*="#f7f7f7"] p,
body[style*="#f6f9fc"] p,
body[style*="#ffffff"] p,
body[style*="#f7f7f7"] li,
body[style*="#f6f9fc"] li { color: var(--c-body); }

strong, b { font-weight: 600; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	color: inherit;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; }
h5 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
h6 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; }

.main-title { letter-spacing: 9px !important; }

/* Stripe-style heading helpers (ports of ViralGPT's classes) */
.stripe-heading      { font-weight: 700; color: var(--c-dark); letter-spacing: -0.025em; line-height: 1.15; }
.stripe-heading--xl  { font-size: clamp(2.5rem, 5.5vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.05; }
.stripe-heading--lg  { font-size: clamp(2rem, 4vw, 2.5rem); }
.stripe-heading--md  { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.stripe-heading--sm  { font-size: 1.5rem; letter-spacing: -0.01em; }
.stripe-heading--xs  { font-size: 1.1rem; }

.stripe-body         { color: var(--c-body); line-height: 1.6; }
.stripe-body--lg     { font-size: 1.2rem; }
.stripe-body--md     { font-size: 1.1rem; }
.stripe-body--sm     { font-size: 0.95rem; }
.stripe-body--xs     { font-size: 0.85rem; }

.stripe-text-dark    { color: var(--c-dark); }
.stripe-text-body    { color: var(--c-body); }
.stripe-text-muted   { color: var(--c-muted); }

.stripe-label {
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--c-primary);
}

/* ============================================================
   LAYOUT — sections and containers
   ============================================================ */

.stripe-section { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.stripe-section--gradient { background: linear-gradient(180deg, var(--c-bg) 0%, #ffffff 100%); }
.stripe-section--white    { background: #ffffff; }
.stripe-section--soft     { background: var(--c-bg); }

.stripe-container { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 1.5rem); }
.stripe-container--narrow { max-width: 720px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 1.5rem); }
.stripe-container--wide   { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 1.5rem); }

/* ============================================================
   CARDS
   ============================================================ */

.stripe-card {
	background: var(--c-bg-elev);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-border);
	box-shadow: var(--shadow-md);
	transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.stripe-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.stripe-card--flat       { box-shadow: var(--shadow-sm); }
.stripe-card--elevated   { box-shadow: var(--shadow-lg); }
.stripe-card--static:hover { transform: none !important; box-shadow: var(--shadow-lg) !important; }

/* Brand-bordered card (gradient outline) */
.stripe-card--brand {
	border: 2px solid transparent;
	background-image:
		linear-gradient(#ffffff, #ffffff),
		var(--stride-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 20px 40px -12px rgba(91, 66, 243, 0.18), 0 8px 20px -8px rgba(0, 0, 0, 0.08);
}
.stripe-card--brand:hover { box-shadow: 0 24px 48px -12px rgba(91, 66, 243, 0.26), 0 12px 24px -8px rgba(0, 0, 0, 0.1); transform: translateY(-4px); }

/* ============================================================
   BUTTONS
   ============================================================ */

.stripe-btn {
	border-radius: var(--r-md);
	font-weight: 600;
	font-size: 0.95rem;
	border: none;
	transition: all 0.2s var(--ease);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.75rem 1.5rem;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

.stripe-btn--primary {
	background: var(--c-primary) !important;
	color: #ffffff !important;
	box-shadow: var(--shadow-glow), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.stripe-btn--primary:hover {
	background: var(--c-primary-2) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(91, 66, 243, 0.35), 0 3px 6px rgba(0, 0, 0, 0.1);
	color: #ffffff !important;
}

.stripe-btn--dark {
	background: var(--c-dark) !important;
	color: #ffffff !important;
	box-shadow: var(--shadow-sm);
}
.stripe-btn--dark:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(10, 37, 64, 0.2); color: #ffffff !important; }

.stripe-btn--outline {
	background: #ffffff !important;
	color: var(--c-dark) !important;
	border: 1.5px solid var(--c-border);
	box-shadow: var(--shadow-sm);
}
.stripe-btn--outline:hover {
	background: var(--c-bg) !important;
	border-color: #bcc5d0;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(50, 50, 93, 0.1);
	color: var(--c-dark) !important;
}

.stripe-btn--gradient {
	background: var(--stride-gradient) !important;
	color: #ffffff !important;
	box-shadow: var(--shadow-glow);
}
.stripe-btn--gradient:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 10px 24px rgba(91, 66, 243, 0.40);
	color: #ffffff !important;
}

.stripe-btn--lg { padding: 1rem 1.75rem; font-size: 1rem; border-radius: var(--r-lg); }
.stripe-btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: var(--r-sm); }

/* Override the legacy .button-64 inline-style block that ships with
   builder-flow / scanner-flow / login-white / etc. Double-class selector
   bumps specificity over the page's inline <style> block (which uses a
   single .button-64 selector) regardless of source order.

   Buttons are SOLID purple — not gradient. Gradient is reserved for
   brand decoration (icon boxes, hero accents). This restores hierarchy. */
.button-64.button-64,
.button-64 {
	background: var(--c-primary) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--r-md) !important;
	box-shadow: 0 4px 12px rgba(91, 66, 243, 0.25), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
	color: #ffffff !important;
	display: inline-flex !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	align-items: center !important;
	justify-content: center !important;
	letter-spacing: 0.005em !important;
	min-width: 140px !important;
	padding: 0.75rem 1.5rem !important;
	text-decoration: none !important;
	user-select: none;
	white-space: nowrap !important;
	cursor: pointer;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease) !important;
	line-height: 1 !important;
	width: auto !important;
	max-width: 100% !important;
	text-transform: none !important;
}
.button-64.button-64:hover,
.button-64:hover {
	background: var(--c-primary-2) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 18px rgba(91, 66, 243, 0.35), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
.button-64.button-64:active,
.button-64:active { transform: translateY(0) !important; }
.button-64.button-64 span,
.button-64 span {
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	background: none !important;
	border-radius: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	line-height: 1 !important;
}
.button-64 span strong { font-weight: 600 !important; letter-spacing: 0.005em; }

/* ============================================================
   CHECKOUT — consistent across builder / scanner / marketplace
   Full-width inputs + Buy Now button; stop the order-summary card
   (.card.h-100) from stretching to full height and dropping to the footer.
   ============================================================ */
.checkout-form .input-group { width: 100% !important; }
.checkout-form .d-flex { gap: 0.5rem; }
.checkout-form .d-flex .input-group { flex: 1 1 0; width: auto !important; }
#pay.button-64 { width: 100% !important; max-width: 100% !important; }

/* Stripe-style order-summary card: clean frame, calm header, even rhythm.
   The card is #checkoutBox itself (builder/scanner/marketplace) OR a .card nested
   inside it (dashboard Plan & Pricing) — target both so the h-100 card never
   stretches to full height and drops into the footer. */
#checkoutBox { height: auto !important; }
#checkoutBox.card,
#checkoutBox > .card {
	height: auto !important;
	max-width: 460px !important;
	margin: 1.5rem auto 2.5rem !important;
	background: #ffffff !important;
	border: 1px solid var(--c-border) !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 3px rgba(50,50,93,0.08), 0 16px 40px -16px rgba(50,50,93,0.20) !important;
	overflow: hidden;
}
/* Replace the loud gradient header with a clean titled bar */
#checkoutBox .header.bg-instagram {
	background: #ffffff !important;
	background-image: none !important;
	color: var(--c-dark) !important;
	border-bottom: 1px solid var(--c-border);
	border-radius: 0 !important;
	padding: 1.15rem 1.5rem !important;
	text-align: left !important;
}
#checkoutBox .header .badge {
	background: transparent !important;
	color: var(--c-dark) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	padding: 0 !important;
}
#checkoutBox .card-body { padding: 1.5rem 1.5rem 0.5rem !important; }
#checkoutBox .card-text { color: var(--c-body); font-size: 0.92rem; margin: 0.5rem 0 1rem; }
#checkoutBox hr { border: 0; border-top: 1px solid var(--c-border); opacity: 1; margin: 1.25rem 0; }
#checkoutBox h4 { font-size: 1.15rem; font-weight: 700; color: var(--c-dark); margin: 1rem 0 0.75rem; }
#checkoutBox .checkout-form .input-group { margin-bottom: 0.75rem; }
#checkoutBox .input-group-text { background: #f6f9fc; border-color: var(--c-border); color: var(--c-body); }
#checkoutBox .form-control { border-color: var(--c-border); }
/* give the form/total block consistent side padding to match the body.
   Builder/scanner/marketplace: the form center is a direct child of #checkoutBox.
   Dashboard Plan & Pricing: #checkoutBox wraps a .card, so the center is one level deeper. */
#checkoutBox > center,
#checkoutBox > .card > center { display: block; padding: 0 1.5rem 1.5rem; }

/* When .button-64 lives inside a leadType / similar selectable card,
   center it and give breathing room. */
.leadType .button-64,
.button-64.choosePackage {
	margin: 1rem auto 0 !important;
	min-width: 180px !important;
}

/* ============================================================
   FUNNEL CARD TIGHT-UP
   The legacy `.leadType` cards on builder-flow / dashboard scanner
   are too wide with awkward empty space. Tighten them down.
   ============================================================ */

.leadType[style*="0 -3px 0 inset"],
[style*="0 -3px 0 inset"].leadType {
	max-width: 360px !important;
	padding: 2rem 1.75rem !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

/* Center the icon block inside the lead-type card */
.leadType .fa-stack,
.leadType .circle-icon-cases {
	margin: 0 auto !important;
}

/* Lead-type card heading: cleaner, no <strong> chunky look */
.leadType h5,
.leadType h4 {
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	color: var(--c-dark);
	margin: 0.5rem 0 !important;
	text-align: center;
}
.leadType h5 strong,
.leadType h4 strong { font-weight: 700 !important; }

/* Pricing tier cards on /dashboard/packages: cleaner padding so the
   Buy Now button doesn't look cramped against the card bottom. */
[data-value="starter"][style*="0 -3px 0 inset"],
[data-value="premium"][style*="0 -3px 0 inset"],
[data-value="elite"][style*="0 -3px 0 inset"],
[data-value="More"][style*="0 -3px 0 inset"] {
	padding: 1.75rem 1.5rem 1.75rem !important;
	display: flex !important;
	flex-direction: column;
}
[data-value="starter"] .button-64,
[data-value="premium"] .button-64,
[data-value="elite"] .button-64,
[data-value="More"] .button-64 {
	width: 100% !important;
	max-width: 100% !important;
	margin-top: auto !important;
	margin-bottom: 0 !important;
}

/* "Need Bulk?" / Contact card on builder-flow */
a[href="/contact"] [style*="0 -3px 0 inset"] {
	max-width: 360px !important;
	padding: 2rem 1.75rem !important;
}

/* Twitter profile picker (Choose your profiles): align the avatar row */
.pfp,
[class*="profileName-"] img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	margin: 0.25rem !important;
	border: 2px solid rgba(91, 66, 243, 0.18);
	transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.pfp:hover,
[class*="profileName-"] img:hover {
	transform: scale(1.08);
	border-color: var(--c-primary);
}

/* Profile picker control row: input + add button alignment */
#addProfile,
button#addProfile {
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	padding: 0 !important;
	font-size: 1.4rem !important;
}
#completeList,
button#completeList { min-width: 220px !important; margin-top: 1rem !important; }

/* ============================================================
   POPULAR PROFILES CARDS (builder-flow)
   The header row uses .d-flex with .circle-icon + .card-title h6,
   but the h6 has margin-top:10px from inline style and the icon is
   sized via .circle-icon. Force vertical-center alignment. */

.d-flex > .fa-stack.circle-icon {
	width: 40px !important;
	height: 40px !important;
	border-radius: 12px !important;
	flex-shrink: 0;
	align-self: center !important;
}
.d-flex > .fa-stack.circle-icon .fa-stack-1x { font-size: 0.95rem !important; }
.d-flex > .fa-stack.circle-icon + .card-title,
.d-flex > .fa-stack.circle-icon + h6.card-title {
	margin: 0 0 0 0.75rem !important;
	align-self: center !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.3 !important;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* The wrapper itself needs proper centering */
.d-flex.rounded[style*="#f7f7f7"] {
	align-items: center !important;
	padding: 0.75rem !important;
}

/* ============================================================
   INPUT GROUP — Twitter handle entry on /dashboard/scanner/create
   Join the icon prefix + input + submit button into one cohesive
   pill-shaped input group. */

.input-group.flex-nowrap {
	border-radius: 12px !important;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(50, 50, 93, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	background: #ffffff;
	border: 1px solid var(--c-border);
}
.input-group.flex-nowrap .input-group-text {
	background: #f6f9fc !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--c-muted) !important;
	padding: 0 0.875rem !important;
}
.input-group.flex-nowrap .form-control,
.input-group.flex-nowrap input.form-control {
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	background: #ffffff !important;
}
.input-group.flex-nowrap .form-control:focus {
	box-shadow: none !important;
	background: #ffffff !important;
}
/* When the form-control is focused, glow the whole input group */
.input-group.flex-nowrap:focus-within {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 4px rgba(91, 66, 243, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* "Add profile" / "Scan profile" small square button-64 inside an input row.
   The inner span has class="mb-3" (margin-bottom 1rem) that mis-aligns the
   icon. Override and center properly. */
#createScan,
button#createScan,
button.button-64[type="button"][style*="width:50px"] {
	width: 50px !important;
	height: 50px !important;
	min-width: 50px !important;
	padding: 0 !important;
	margin-left: 0.5rem !important;
	border-radius: 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#createScan span,
button#createScan span,
button.button-64[type="button"][style*="width:50px"] span {
	margin: 0 !important;
	width: auto !important;
	padding: 0 !important;
	font-size: 1.1rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
/* Defeat the inline .mb-3 on the inner span */
.button-64 span.mb-3 { margin-bottom: 0 !important; }

/* ============================================================
   BADGES & PILLS
   ============================================================ */

.stripe-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.stripe-badge--green  { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.stripe-badge--red    { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.stripe-badge--yellow { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.stripe-badge--blue   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.stripe-badge--purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.stripe-badge--brand  {
	background: rgba(91, 66, 243, 0.10);
	color: var(--c-primary);
	border: 1px solid rgba(91, 66, 243, 0.20);
}

/* Trust pill (used in hero) */
.stripe-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(91, 66, 243, 0.06);
	border: 1px solid rgba(91, 66, 243, 0.18);
	border-radius: 999px;
	padding: 0.4rem 0.875rem;
	font-size: 0.825rem;
	font-weight: 500;
	color: var(--c-dark);
	box-shadow: var(--shadow-sm);
}
.stripe-trust-pill i { color: var(--c-primary); font-size: 0.75rem; }

/* Trust line (under CTAs) */
.stripe-trust-line {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fafbfc;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	padding: 0.4rem 0.875rem;
	font-size: 0.8rem;
	color: var(--c-body);
}
.stripe-trust-line .sep { color: var(--c-border); }
.stripe-trust-line i { color: #16a34a; font-size: 0.7rem; }

/* ============================================================
   ICON BOXES
   ============================================================ */

.stripe-icon-box {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: var(--c-primary);
	background: linear-gradient(135deg, #f0ebff 0%, #e8e0ff 100%);
}
.stripe-icon-box--lg {
	width: 60px; height: 60px; border-radius: 14px; font-size: 1.5rem;
}
.stripe-icon-box--brand {
	background: var(--stride-gradient);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(91, 66, 243, 0.30);
}

/* ============================================================
   GRADIENT TEXT (Stride brand)
   ============================================================ */

.text-stride,
.stride-gradient-text,
.gradient-text {
	background: var(--stride-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.text-stride-dark {
	background: linear-gradient(135deg, #AF40FF 0%, #5B42F3 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ============================================================
   FORMS
   ============================================================ */

.stripe-input,
.form-control,
.form-select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-md) !important;
	font-size: 0.95rem;
	background: #ffffff !important;
	color: var(--c-dark);
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	outline: none;
}
.stripe-input:focus,
.form-control:focus,
.form-select:focus {
	border-color: var(--c-primary) !important;
	box-shadow: 0 0 0 4px rgba(91, 66, 243, 0.12) !important;
	outline: none !important;
}

/* Lighter placeholder text — was inheriting browser default dark gray */
.stripe-input::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
	color: #b0b8c4 !important;
	opacity: 1;
	font-weight: 400;
}
.stripe-input::-webkit-input-placeholder,
.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder { color: #b0b8c4 !important; }
.stripe-input::-moz-placeholder,
.form-control::-moz-placeholder,
input::-moz-placeholder { color: #b0b8c4 !important; opacity: 1; }
.stripe-input:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
input:-ms-input-placeholder { color: #b0b8c4 !important; }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */

.stripe-faq .accordion {
	background: #ffffff !important;
	border-radius: var(--r-xl) !important;
	border: 1px solid var(--c-border);
	box-shadow: var(--shadow-md) !important;
	overflow: hidden;
}
.stripe-faq .accordion-item {
	background: transparent !important;
	border-radius: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--c-border) !important;
	margin: 0 !important;
}
.stripe-faq .accordion-item:last-child { border-bottom: 0 !important; }
.stripe-faq .accordion-button {
	background: transparent !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	color: var(--c-dark) !important;
	padding: 1.25rem 1.5rem !important;
	box-shadow: none !important;
}
.stripe-faq .accordion-button:not(.collapsed) { background: rgba(91, 66, 243, 0.04) !important; color: var(--c-primary) !important; }
.stripe-faq .accordion-body {
	background: transparent !important;
	padding: 0 1.5rem 1.5rem !important;
	color: var(--c-body) !important;
	font-size: 0.95rem;
	line-height: 1.65;
}
.stripe-faq .accordion-body a {
	color: var(--c-primary) !important;
	font-weight: 500;
}
.stripe-faq .accordion-body a:hover { opacity: 0.8; }
.stripe-faq .accordion-body strong { color: var(--c-dark); }
/* Ensure gradient-text spans render visibly inside FAQ */
.stripe-faq .accordion-body .text-stride,
.stripe-faq .accordion-body .text-stride-dark {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ============================================================
   DIVIDER
   ============================================================ */

.stripe-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--c-border), transparent); border: 0; }

/* ============================================================
   SCROLLBAR + SELECTION
   ============================================================ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: rgba(91, 66, 243, 0.20);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(91, 66, 243, 0.4); background-clip: padding-box; }
::selection { background: rgba(91, 66, 243, 0.20); }

/* ============================================================
   NAVBAR — Stripe-style modern nav
   .stride-nav--light  → white bg, dark text   (used on most pages)
   .stride-nav--dark   → translucent dark glass (marketplace, login, etc.)
   ============================================================ */

.stride-nav {
	padding: 0;
	min-height: 68px;
	border-bottom: 1px solid transparent;
	box-shadow: none;
	/* Self-adjusting full-bleed: spans the viewport regardless of parent padding
	   (0 on `p-0` bodies, -12px on gutter'd `container-fluid` bodies). The old
	   fixed `margin: 0 -12px` overflowed by 24px on padding-less pages, causing
	   horizontal scroll on mobile. Any scrollbar-width spill is clipped by the
	   `overflow-x: hidden` on html/body. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	z-index: 1030;
}
.stride-nav__inner {
	display: flex;
	/* Allow the collapsed mobile menu (#strideNav) to wrap onto its own full-width
	   row below the brand + toggler instead of expanding inline and overlapping. */
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 0.875rem clamp(1.25rem, 2.5vw, 2.25rem);
}
.stride-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	flex-shrink: 0;
}
.stride-nav__brand:hover { opacity: 0.85; }
.stride-nav__logo { width: 32px; height: 32px; }
.stride-nav__brand .main-title {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 7px !important;
	line-height: 1;
}
.stride-nav__collapse {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: 1 1 auto;
}
.stride-nav__links {
	list-style: none;
	padding: 0;
	margin: 0 auto 0 1.5rem;  /* margin-left:auto pushes actions to the far right; small left margin separates from brand */
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
}
.stride-nav__links li { display: flex; }
.stride-nav__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.875rem;
	border-radius: 10px;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.stride-nav__links a i { font-size: 0.85rem; opacity: 0.85; }
.stride-nav__actions {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex: 0 0 auto;
}
.stride-nav__support {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 160ms var(--ease);
}
.stride-nav__support i { font-size: 0.85rem; }
.stride-nav__cta { white-space: nowrap; }
.stride-nav__toggle {
	border: 1px solid transparent;
	background: transparent;
	padding: 0.45rem 0.6rem;
	border-radius: 10px;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

/* Light variant */
.stride-nav--light {
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom-color: var(--c-border);
}
.stride-nav--light .stride-nav__links a { color: var(--c-body); }
.stride-nav--light .stride-nav__links a:hover { color: var(--c-dark); background: rgba(91, 66, 243, 0.06); }
.stride-nav--light .stride-nav__support { color: var(--c-body); }
.stride-nav--light .stride-nav__support:hover { color: var(--c-dark); }
.stride-nav--light .stride-nav__toggle { color: var(--c-dark); border-color: var(--c-border); }

/* Dark variant */
.stride-nav--dark {
	background: rgba(15, 12, 26, 0.78);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
.stride-nav--dark .stride-nav__links a { color: rgba(255, 255, 255, 0.75); }
.stride-nav--dark .stride-nav__links a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.stride-nav--dark .stride-nav__support { color: rgba(255, 255, 255, 0.75); }
.stride-nav--dark .stride-nav__support:hover { color: #ffffff; }
.stride-nav--dark .stride-nav__toggle { color: #ffffff; border-color: rgba(255, 255, 255, 0.15); }

/* Mobile collapse */
@media (max-width: 991.98px) {
	.stride-nav__collapse {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding: 1rem 0 0.5rem;
		width: 100%;
		flex-basis: 100%;  /* force a wrap to a new full-width row below brand + toggler */
	}
	.stride-nav--light .stride-nav__collapse { border-top: 1px solid var(--c-border); margin-top: 0.5rem; }
	.stride-nav--dark .stride-nav__collapse { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.5rem; }
	.stride-nav__links {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}
	.stride-nav__links a { padding: 0.625rem 0.875rem; font-size: 0.95rem; }
	.stride-nav__actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.625rem;
		padding-top: 0.5rem;
	}
	.stride-nav__cta { width: 100%; justify-content: center; }
	.stride-nav__support { padding: 0.5rem 0.875rem; justify-content: flex-start; }
}

/* Hide the legacy `<hr>` after the navbar that some pages still emit */
.stride-nav + hr { display: none; }

/* Legacy fallback for .navbar (preserve other surfaces using bootstrap nav) */
.navbar { border-bottom: 1px solid transparent; }
.navbar-white .nav-link { color: var(--c-body) !important; font-weight: 500; letter-spacing: -0.005em; transition: color 160ms var(--ease); }
.navbar-white .nav-link:hover { color: var(--c-dark) !important; }

/* ============================================================
   LEGACY INLINE-SHADOW SOFTENING
   The site has many hard `box-shadow: rgb(0 0 0 / 40%) ... 0 -3px 0 inset` inline styles.
   Replace with Stripe-style soft elevation, opt-in via attribute selector.
   ============================================================ */

[style*="0 -3px 0 inset"] {
	box-shadow: var(--shadow-md) !important;
	border: 1px solid var(--c-border) !important;
	border-radius: var(--r-lg) !important;
	transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease) !important;
}
[style*="0 -3px 0 inset"][style*="cursor:pointer"]:hover,
[style*="0 -3px 0 inset"][style*="cursor: pointer"]:hover,
.leadType[style*="0 -3px 0 inset"]:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover) !important;
}

[style*="box-shadow: 0px 5px 15px #000"],
[style*="box-shadow: 0px 10px 20px #000"],
[style*="box-shadow:0px 10px 20px #000"],
[style*="box-shadow: rgb(0, 0, 0) 0px 10px 20px"] {
	box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   SIDEBAR (dashboard)
   ============================================================ */

.accordion-flush .accordion-item {
	background: transparent !important;
	border: 0 !important;
	border-radius: 10px !important;
	margin: 2px 0;
	transition: background-color 160ms var(--ease);
}
.accordion-flush .accordion-item:hover { background-color: rgba(91, 66, 243, 0.06) !important; }
.accordion-flush .accordion-header h6 {
	font-size: 0.95rem;
	font-weight: 600;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	margin-bottom: 0;
}
.accordion-flush a {
	display: block;
	border-radius: 8px;
	padding: 6px 10px;
	margin: 2px 0;
	transition: background-color 160ms var(--ease);
}
.accordion-flush a:hover { background-color: rgba(91, 66, 243, 0.08); }

.strideActive { color: var(--c-primary) !important; font-weight: 700; }

/* ============================================================
   GRADIENT MESH on light-bg pages
   ============================================================ */

body[style*="#f7f7f7"]::before,
body[style*="#f6f9fc"]::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 50% 35% at 90% 0%, rgba(175, 64, 255, 0.05), transparent 55%),
		radial-gradient(ellipse 45% 30% at 0% 25%, rgba(0, 221, 235, 0.04), transparent 55%);
}

/* Dark gradient pages keep their atmosphere */
body[style*="linear-gradient(to right, #17141f"]::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 40% at 15% 10%, rgba(175, 64, 255, 0.18), transparent 55%),
		radial-gradient(ellipse 50% 35% at 90% 30%, rgba(0, 221, 235, 0.10), transparent 55%),
		radial-gradient(ellipse 70% 50% at 50% 110%, rgba(91, 66, 243, 0.16), transparent 60%);
}
body[style*="linear-gradient(to right, #17141f"] > * { position: relative; z-index: 1; }

/* ============================================================
   LEGACY FUNNEL UPGRADES
   Pages like builder-flow / scanner-flow / marketplace-product use
   older patterns (.circle-icon gradient rings, h1>strong heroes).
   These rules upgrade them without touching the markup so the
   purchase funnel matches the new design system.
   ============================================================ */

/* Legacy gradient ring icons → soft modern gradient pill */
.circle-icon {
	background-image: var(--stride-gradient) !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 16px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(91, 66, 243, 0.28);
	transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.circle-icon:hover { transform: translateY(-2px); }

/* Hide the inner white/dark circle when its color is set inline — leaves the
   solid gradient bg + foreground glyph visible. Works for both light and
   dark theme inline overrides because we explicitly target both colors. */
.circle-icon .fa-stack-2x[style*="color:white"],
.circle-icon .fa-stack-2x[style*="color: white"],
.circle-icon .fa-stack-2x[style*="color:#13101b"] {
	display: none !important;
}

/* Foreground glyph: solid white on the gradient bg */
.circle-icon .fa-stack-1x {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 1.2rem !important;
	position: static !important;
	width: auto !important;
	line-height: 1 !important;
}

/* The bigger circle-icon-cases variant used on home unique cards */
.circle-icon-cases {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	padding: 0;
	background-image: var(--stride-gradient);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.circle-icon-cases .fa-stack-1x {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 2.5rem !important;
	position: static !important;
}
.circle-icon-cases .fa-stack-2x.fa-circle { display: none !important; }

/* Smaller scanner-list circle */
.circle-icon-scanner {
	background-image: var(--stride-gradient);
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0;
	vertical-align: middle;
	margin-right: 0.4rem;
}
.circle-icon-scanner .fa-stack-1x {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 0.7rem !important;
	position: static !important;
	line-height: 1 !important;
}
.circle-icon-scanner .fa-stack-2x.fa-circle { display: none !important; }

/* Legacy hero headings on funnel pages — tighten to match home */
.container-fluid > .row > .col > .title h1,
.container-fluid > .row > h1,
body > .row h1 { letter-spacing: -0.025em; }

/* Legacy `.card-title` font-weight: 900 was set inline on some pages */
.card-title { font-weight: 700 !important; letter-spacing: -0.015em; }

/* ============================================================
   DASHBOARD SIDEBAR (simplified — no dropdowns)
   ============================================================ */

.stride-sidebar {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(50,50,93,0.04), 0 6px 16px -4px rgba(50,50,93,0.06);
	padding: 1rem 0.75rem;
	position: sticky;
	top: 88px;
	margin-top: 1.5rem;
}
.stride-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.stride-sidebar__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	color: var(--c-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	text-decoration: none !important;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
	cursor: pointer;
}
.stride-sidebar__item:hover { background: rgba(91, 66, 243, 0.06); color: var(--c-dark); }
.stride-sidebar__item.is-active {
	background: rgba(91, 66, 243, 0.10);
	color: var(--c-primary);
	font-weight: 600;
}
.stride-sidebar__item.is-active .stride-sidebar__icon { color: var(--c-primary); }
.stride-sidebar__icon {
	width: 18px;
	font-size: 0.95rem;
	color: var(--c-muted);
	flex-shrink: 0;
	text-align: center;
	transition: color 160ms var(--ease);
}
.stride-sidebar__item:hover .stride-sidebar__icon { color: var(--c-primary); }
.stride-sidebar__divider {
	height: 1px;
	background: var(--c-border);
	margin: 0.75rem 0.25rem;
}
.stride-sidebar__footer {
	margin-top: 1rem;
	padding: 0.875rem;
	background: linear-gradient(135deg, rgba(91,66,243,0.05), rgba(0,221,235,0.04));
	border: 1px solid rgba(91,66,243,0.12);
	border-radius: 12px;
}
.stride-sidebar__plan-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.stride-sidebar__plan-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-dark);
	letter-spacing: -0.015em;
	text-transform: capitalize;
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.stride-sidebar__expiring {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: #fffbeb;
	color: #d97706;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid #fde68a;
	text-transform: uppercase;
}
.stride-sidebar__email {
	font-size: 0.78rem;
	color: var(--c-muted);
	margin-top: 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dashboard mode: when a page has the sidebar, hide the marketing
   navbar links so users only see the dashboard nav (sidebar) + brand.
   The Dashboard CTA is also hidden — you're already in the dashboard. */
body:has(.stride-sidebar) .stride-nav__links,
body:has(.stride-sidebar) .stride-nav__support,
body:has(.stride-sidebar) .stride-nav__cta {
	display: none !important;
}

/* Sidebar drawer overlay (mobile) */
.stride-sidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 37, 64, 0.5);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	z-index: 1039;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--ease);
}
body.sidebar-open .stride-sidebar-backdrop {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile dashboard: vertical sidebar slides in as a drawer from the left.
   The hamburger button in the top navbar toggles `body.sidebar-open`. */
@media (max-width: 991.98px) {
	body:has(.stride-sidebar) .stride-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: 280px;
		max-width: 82vw;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: 1rem;
		border-radius: 0;
		border: 0;
		border-right: 1px solid var(--c-border);
		overflow-y: auto;
		transform: translateX(-105%);
		transition: transform 220ms var(--ease);
		z-index: 1050;
		box-shadow: 24px 0 48px -12px rgba(50, 50, 93, 0.25);
	}
	body.sidebar-open:has(.stride-sidebar) .stride-sidebar {
		transform: translateX(0);
	}

	/* Show the sidebar toggle button only on mobile when a sidebar exists */
	body:has(.stride-sidebar) .stride-nav__toggle { display: inline-flex !important; }

	/* Hide the original navbar collapse menu since the hamburger now opens the sidebar */
	body:has(.stride-sidebar) .stride-nav__collapse { display: none !important; }

	/* Sidebar wrapper col collapses to zero width on mobile but stays
	   in the DOM so the fixed-position sidebar inside it can render. */
	#scannerPage > .col:first-child,
	#scannerViewPage > .col:first-child,
	#scannerCreatePage > .col:first-child,
	#accountPage > .col:first-child,
	#packagesPage > .col:first-child,
	#listsPage > .col:first-child,
	#singleListPage > .col:first-child {
		flex: 0 0 0%;
		max-width: 0;
		padding: 0;
		overflow: visible;
	}
	/* Main content col takes full width */
	#scannerPage > .col-lg-9,
	#scannerViewPage > .col-lg-9,
	#scannerCreatePage > .col-lg-9,
	#accountPage > .col-lg-9,
	#packagesPage > .col-lg-9,
	#listsPage > .col-lg-9,
	#singleListPage > .col-lg-9 { flex: 0 0 100%; max-width: 100%; margin-top: 0 !important; }
}

/* ============================================================
   BUILDER-FLOW LEAD CARD — icon centering fix
   ============================================================ */

.builder-lead-card { align-items: center !important; text-align: center; }
.builder-lead-card__icon { margin: 0 0 1.25rem !important; }
.builder-lead-card__body { width: 100%; text-align: center; }
.builder-lead-card__title { width: 100%; }
.builder-lead-card__desc { width: 100%; }

/* ============================================================
   BUILDER PACKAGE CARDS (/builder/create step 2)
   ============================================================ */

.pkg-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
}
.pkg-head { text-align: center; max-width: 720px; margin: 0 auto 1.75rem; }
.pkg-head h1 { margin-bottom: 0.75rem; }
.pkg-head p { margin: 0; }

.pkg-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	max-width: 540px;
	margin: 0 auto 1rem;
}
.pkg-stat {
	background: rgba(91, 66, 243, 0.05);
	border: 1px solid rgba(91, 66, 243, 0.12);
	border-radius: 12px;
	padding: 0.875rem 1rem;
	text-align: center;
}
.pkg-stat__label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}
.pkg-stat__value {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--c-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.pkg-stat__sub { font-size: 0.85rem; font-weight: 500; color: var(--c-muted); }

.pkg-profile-row {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	max-width: 540px;
	margin: 0 auto;
	background: #fafbfc;
	border: 1px solid var(--c-border);
	border-radius: 12px;
}
.pkg-profile-slot img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 2px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(50,50,93,0.10);
	margin: 0 !important;
}
.pkg-edit-link { text-align: center; font-size: 0.85rem; color: var(--c-muted); margin: 0.75rem 0 2rem; }
.pkg-edit-link a { color: var(--c-primary); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.pkg-edit-link a:hover { opacity: 0.8; }

.pkg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 880px) { .pkg-grid { grid-template-columns: 1fr; } }

/* ============================================================
   POPULAR PROFILES header
   ============================================================ */

.premade-lists {
	margin: 2.5rem auto 0;
	max-width: 1100px;
}
.premade-lists__head {
	text-align: center;
	max-width: 480px;
	margin: 0 auto 1.5rem;
}
.premade-lists__head .stripe-label { margin-bottom: 0.5rem; }
.premade-lists__title {
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-dark);
	margin: 0 0 0.4rem;
}
.premade-lists__sub {
	font-size: 0.92rem;
	color: var(--c-body);
	margin: 0;
	line-height: 1.45;
}

/* ============================================================
   "Popular Profiles" card avatar grid (builder-flow)
   Markup wraps 10 avatars in two inline-block groups of 5 with no
   vertical gap — force them into a clean 5-col grid with row gap.
   ============================================================ */

.premadePFP img,
.pop-card-avatars img { display: block; }

/* Force the avatar grid to 2 rows × 5 cols regardless of the wrapping
   <span class="d-inline-block"> groups in the markup. `display: contents`
   on the inline-block wrappers makes their children behave as direct
   grid items of the parent. */
#premadeLists .card .container.justify-content-around > div {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.35rem;
	justify-items: center;
	max-width: 100%;
}
#premadeLists .card .container.justify-content-around > div > span.d-inline-block {
	display: contents !important;
}
#premadeLists .card .container.justify-content-around .premadePFP {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#premadeLists .card .container.justify-content-around .premadePFP img {
	width: 32px !important;
	height: 32px !important;
	border: 2px solid #ffffff;
	border-radius: 50% !important;
	box-shadow: 0 2px 6px rgba(50, 50, 93, 0.10);
	transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
#premadeLists .card .container.justify-content-around .premadePFP:hover img {
	transform: scale(1.10);
	border-color: var(--c-primary);
}

/* ============================================================
   NEW DYNAMIC PACKAGE SELECTOR (single card + tier chips)
   ============================================================ */

.pkg-selector {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: 0 2px 4px rgba(50,50,93,0.04), 0 18px 36px -12px rgba(50,50,93,0.10);
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}
.pkg-selector * { text-align: inherit; }
.pkg-selector__price-block { text-align: right !important; }
.pkg-selector__cta, .pkg-selector__cta * { text-align: center !important; }
.pkg-selector__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--c-border-soft);
}
@media (max-width: 560px) {
	.pkg-selector__head {
		grid-template-columns: 1fr;
		align-items: flex-start;
	}
	.pkg-selector__price-block { text-align: left !important; }
}
.pkg-selector__count {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.25rem 0 0.3rem;
	line-height: 1;
}
.pkg-selector__num {
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	background: var(--stride-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pkg-selector__noun {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--c-dark);
	text-transform: capitalize;
	letter-spacing: -0.01em;
}
.pkg-selector__sub { font-size: 0.88rem; color: var(--c-body); max-width: 420px; line-height: 1.45; margin: 0; }
.pkg-selector__price-block { text-align: right; }
.pkg-selector__price-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.25rem; }
.pkg-selector__price-value { font-size: 1.85rem; font-weight: 800; color: var(--c-dark); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1; }

/* Email preview — grows with selection to communicate "more emails" visually */
.pkg-preview {
	background: #fafbfc;
	border: 1px solid var(--c-border-soft);
	border-radius: 14px;
	padding: 0.75rem;
	max-height: 360px;
	overflow: hidden;
	position: relative;
	margin-bottom: 1.25rem;
	transition: max-height 320ms var(--ease);
}
.pkg-preview .pkg-email-list { display: flex; flex-direction: column; gap: 6px; }
.pkg-preview__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(250,251,252,0), rgba(250,251,252,1)); pointer-events: none; }

/* Tier chips */
.pkg-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.625rem;
	margin-bottom: 1.25rem;
}
@media (max-width: 560px) { .pkg-tiers { grid-template-columns: 1fr; } }

.pkg-tier {
	background: #ffffff;
	border: 2px solid var(--c-border);
	border-radius: 14px;
	padding: 0.875rem 1rem;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.pkg-tier:hover { border-color: rgba(91, 66, 243, 0.30); transform: translateY(-1px); }
.pkg-tier.is-active {
	border-color: var(--c-primary);
	background: rgba(91, 66, 243, 0.04);
	box-shadow: 0 4px 12px rgba(91, 66, 243, 0.15);
}
.pkg-tier.is-active::after {
	content: '✓';
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pkg-tier__count {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--c-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.05;
}
.pkg-tier.is-active .pkg-tier__count {
	background: var(--stride-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.pkg-tier__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.2rem; }
.pkg-tier.is-active .pkg-tier__label { color: var(--c-primary); }
.pkg-tier__sub { font-size: 0.78rem; font-weight: 500; color: var(--c-body); margin-top: 1px; }
.pkg-tier__price { font-size: 0.9rem; font-weight: 700; color: var(--c-dark); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-border-soft); font-variant-numeric: tabular-nums; }
.pkg-tier__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--stride-gradient);
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(91,66,243,0.30);
	white-space: nowrap;
}

/* Trust strip */
.pkg-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.25rem;
	padding: 0.75rem 1rem;
	background: #fafbfc;
	border: 1px solid var(--c-border-soft);
	border-radius: 12px;
	margin-bottom: 1.25rem;
	font-size: 0.82rem;
	color: var(--c-body);
}
.pkg-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pkg-trust i { color: var(--c-primary); font-size: 0.78rem; }

/* Higher-specificity overrides to beat .button-64.button-64 (which forces
   display: inline-flex) — the parent .pkg-selector also has
   text-align: left which would push an inline-flex item to the left.
   Force the CTA into a block-level centered layout. */
.pkg-selector .pkg-selector__cta,
.pkg-selector .button-64.pkg-selector__cta,
.button-64.pkg-selector__cta {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto !important;
	padding: 0.95rem 1.5rem !important;
	font-size: 1rem !important;
	text-align: center !important;
}
.pkg-selector .pkg-selector__cta .text {
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.pkg-card {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 1.5rem;
	box-shadow: 0 1px 2px rgba(50,50,93,0.04), 0 8px 20px -8px rgba(50,50,93,0.06);
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: pointer;
	transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.pkg-card:hover { transform: translateY(-4px); border-color: rgba(91,66,243,0.25); box-shadow: 0 14px 28px rgba(50,50,93,0.10); }
.pkg-card--popular {
	border: 2px solid transparent;
	background-image: linear-gradient(#ffffff,#ffffff), var(--stride-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 18px 36px -10px rgba(91,66,243,0.22);
}
.pkg-card__badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--stride-gradient); color: #fff;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 5px 12px; border-radius: 999px;
	box-shadow: 0 6px 14px rgba(91,66,243,0.30); white-space: nowrap;
}
.pkg-card__head { margin-bottom: 1rem; }
.pkg-card__name { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.4rem; }
.pkg-card--popular .pkg-card__name { color: var(--c-primary); }
.pkg-card__amount-row { display: flex; align-items: baseline; gap: 0.4rem; }
.pkg-card__amount { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; color: var(--c-dark); line-height: 1; font-variant-numeric: tabular-nums; }
.pkg-card__amount-sub { font-size: 0.92rem; color: var(--c-body); font-weight: 500; }

.pkg-card__preview {
	background: #fafbfc; border: 1px solid var(--c-border-soft); border-radius: 12px;
	padding: 0.75rem; margin: 0 0 1rem; height: 168px; overflow: hidden; position: relative;
}
.pkg-email-list { display: flex; flex-direction: column; gap: 6px; }
.pkg-email-row {
	display: flex; align-items: center; gap: 0.55rem; padding: 6px 8px;
	background: #ffffff; border: 1px solid var(--c-border-soft); border-radius: 8px;
	animation: pkg-row-in 400ms var(--ease) backwards;
}
.pkg-email-row:nth-child(n) { animation-delay: calc((var(--n, 0) * 60ms)); }
.pkg-email-row:nth-child(1) { animation-delay: 0ms; }
.pkg-email-row:nth-child(2) { animation-delay: 60ms; }
.pkg-email-row:nth-child(3) { animation-delay: 120ms; }
.pkg-email-row:nth-child(4) { animation-delay: 180ms; }
.pkg-email-row:nth-child(5) { animation-delay: 240ms; }
.pkg-email-row:nth-child(6) { animation-delay: 300ms; }
.pkg-email-row:nth-child(7) { animation-delay: 360ms; }
.pkg-email-row:nth-child(8) { animation-delay: 420ms; }
@keyframes pkg-row-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.pkg-email-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--stride-gradient); flex-shrink: 0; box-shadow: 0 2px 4px rgba(91,66,243,0.25); }
.pkg-email-text {
	font-size: 0.82rem;
	font-family: 'SFMono-Regular', Menlo, monospace;
	color: var(--c-dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: baseline;
}
.pkg-email-local {
	filter: blur(3.5px);
	user-select: none;
	color: var(--c-dark);
}
.pkg-email-domain {
	color: var(--c-body);
	font-weight: 500;
}
.pkg-card__preview::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(to bottom, rgba(250,251,252,0), rgba(250,251,252,1)); pointer-events: none; }
.pkg-card__preview-bar { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.5rem; height: 4px; background: rgba(91,66,243,0.10); border-radius: 999px; overflow: hidden; z-index: 2; }
.pkg-card__preview-bar span { display: block; height: 100%; background: var(--stride-gradient); border-radius: 999px; transition: width 600ms var(--ease); }

.pkg-card__features { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pkg-card__features li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--c-dark); }
.pkg-card__features li i { color: var(--c-primary); font-size: 0.75rem; width: 16px; text-align: center; }
.pkg-card__features li i.fa-bolt { color: #f59e0b; }
.pkg-card__footer { margin-top: auto; }
.pkg-card__price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--c-border-soft); }
.pkg-card__price-label { font-size: 0.78rem; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.pkg-card__price-value { font-size: 1.4rem; font-weight: 800; color: var(--c-dark); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pkg-card__cta { width: 100% !important; justify-content: center; }

.pkg-bulk-row {
	display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #0a2540 0%, #1a1f4b 100%);
	border-radius: 14px; text-decoration: none !important; color: #ffffff;
	transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
	box-shadow: 0 8px 20px -6px rgba(10, 37, 64, 0.28);
}
.pkg-bulk-row:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 28px -8px rgba(10,37,64,0.32); }
.pkg-bulk-row__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--stride-gradient); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 14px rgba(91,66,243,0.30); flex-shrink: 0; }
.pkg-bulk-row__copy { flex: 1; min-width: 0; line-height: 1.3; }
.pkg-bulk-row__copy strong { display: block; font-size: 1rem; letter-spacing: -0.01em; }
.pkg-bulk-row__copy span { font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.pkg-bulk-row__cta { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20); padding: 0.5rem 0.95rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; flex-shrink: 0; }
@media (max-width: 560px) { .pkg-bulk-row { flex-direction: column; align-items: flex-start; } .pkg-bulk-row__cta { align-self: stretch; justify-content: center; } }

/* Scan loader overlay (fake 10-second "Generating email list" anim) */
.scan-loader {
	position: fixed; inset: 0; z-index: 1060;
	background: rgba(10, 37, 64, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	padding: 1rem;
}
.scan-loader__card {
	background: #ffffff; border-radius: 20px; padding: 2rem;
	max-width: 480px; width: 100%;
	box-shadow: 0 30px 80px rgba(10,37,64,0.40);
	text-align: center;
}
.scan-loader__icon {
	width: 64px; height: 64px; border-radius: 18px;
	background: var(--stride-gradient); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.6rem; margin-bottom: 1rem;
	box-shadow: 0 12px 28px rgba(91,66,243,0.40);
	animation: scan-loader-pulse 1.8s ease-in-out infinite;
}
@keyframes scan-loader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.scan-loader__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: var(--c-dark); margin: 0 0 0.5rem; }
.scan-loader__sub { font-size: 0.92rem; color: var(--c-body); margin: 0 0 1.5rem; }
.scan-loader__progress { height: 6px; background: rgba(91,66,243,0.10); border-radius: 999px; overflow: hidden; margin-bottom: 1.25rem; }
.scan-loader__progress span { display: block; height: 100%; width: 0%; background: var(--stride-gradient); border-radius: 999px; animation: scan-loader-fill 10s linear forwards; }
@keyframes scan-loader-fill { 0% { width: 0%; } 100% { width: 100%; } }
.scan-loader__steps { display: flex; flex-direction: column; gap: 0.5rem; max-height: 260px; overflow-y: auto; text-align: left; }
.scan-loader__step {
	display: flex; align-items: center; gap: 0.625rem;
	padding: 0.625rem 0.875rem;
	border-radius: 10px;
	background: #f6f9fc;
	border: 1px solid var(--c-border-soft);
	font-size: 0.88rem;
	color: var(--c-dark);
	animation: scan-loader-step-in 220ms var(--ease) backwards;
}
@keyframes scan-loader-step-in { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }
.scan-loader__step > i:first-child { color: var(--c-primary); font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0; }
.scan-loader__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 3px rgba(50,50,93,0.18);
}
.scan-loader__step span { flex: 1; min-width: 0; }
.scan-loader__spin { color: var(--c-muted); font-size: 0.85rem; flex-shrink: 0; }
.scan-loader__step.is-done .scan-loader__spin { color: #16a34a; }
.scan-loader__step.is-done { background: rgba(22,163,74,0.05); border-color: rgba(22,163,74,0.18); }

/* ============================================================
   DYNAMIC PLAN SELECTOR (/dashboard/packages — scanner slots)
   Mirrors the .pkg-selector pattern used in the builder flow.
   ============================================================ */

.plan-selector {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 20px;
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: 0 2px 4px rgba(50,50,93,0.04), 0 18px 36px -12px rgba(50,50,93,0.10);
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}
.plan-selector * { text-align: inherit; }
.plan-selector__price-block { text-align: right !important; }

.plan-selector__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--c-border-soft);
}
@media (max-width: 560px) {
	.plan-selector__head {
		grid-template-columns: 1fr;
		align-items: flex-start;
	}
	.plan-selector__price-block { text-align: left !important; }
}
.plan-selector__count { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.25rem 0 0; line-height: 1; }
.plan-selector__num {
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	background: var(--stride-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.plan-selector__noun {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--c-dark);
	letter-spacing: -0.01em;
}
.plan-selector__price-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.25rem; }
.plan-selector__price-value {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--c-dark);
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.plan-selector__currency { font-size: 1rem; color: var(--c-muted); font-weight: 600; align-self: flex-start; margin-top: 0.4rem; }
.plan-selector__period { font-size: 0.92rem; color: var(--c-muted); font-weight: 500; margin-left: 4px; }

/* Slot meter — each tile is a profile photo with an animated pulse-scan
   ring to communicate "actively monitoring this account." Empty slots
   stay as dashed outlines with a faint + */
.plan-slots {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
	padding: 0.875rem;
	background: #fafbfc;
	border: 1px solid var(--c-border-soft);
	border-radius: 14px;
	margin-bottom: 1.25rem;
}
.plan-slot {
	position: relative;
	height: 64px;
	border-radius: 50%;
	border: 1px dashed var(--c-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	overflow: visible;
	transition: opacity 220ms var(--ease), transform 220ms var(--ease);
	margin: 0 auto;
	width: 64px;
	max-width: 64px;
}
.plan-slot__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--stride-gradient);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	border: 2px solid #ffffff;
	box-shadow: 0 4px 10px rgba(91, 66, 243, 0.25);
	opacity: 1;
	transition: transform 220ms var(--ease);
	z-index: 2;
}
.plan-slot__avatar i { line-height: 1; }
/* Hide avatar entirely in empty slot, show a faint + */
.plan-slot:not(.is-filled) .plan-slot__avatar { display: none; }
.plan-slot:not(.is-filled)::after {
	content: '+';
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--c-border);
}
.plan-slot:not(.is-filled) .plan-slot__pulse { display: none; }

/* Filled slot: clear avatar, no border, pulse rings live */
.plan-slot.is-filled {
	border: 0;
	background: transparent;
	animation: plan-slot-pop 280ms var(--ease) backwards;
	animation-delay: calc(var(--i, 0) * 80ms);
}
.plan-slot.is-filled .plan-slot__avatar {
	transform: scale(1);
}
@keyframes plan-slot-pop {
	0% { opacity: 0; transform: scale(0.85); }
	100% { opacity: 1; transform: scale(1); }
}

/* Animated radar pulse rings emanating from each filled slot */
.plan-slot__pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	border: 2px solid rgba(91, 66, 243, 0.55);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}
.plan-slot.is-filled .plan-slot__pulse {
	animation: plan-slot-pulse 2.2s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 240ms);
}
.plan-slot.is-filled .plan-slot__pulse--2 {
	animation-delay: calc(var(--i, 0) * 240ms + 1.1s);
}
@keyframes plan-slot-pulse {
	0%   { transform: scale(0.85); opacity: 0.65; border-color: rgba(91, 66, 243, 0.6); }
	60%  { opacity: 0.15; }
	100% { transform: scale(1.7); opacity: 0; border-color: rgba(0, 221, 235, 0.35); }
}

/* Live status dot on each active slot */
.plan-slot.is-filled .plan-slot__avatar::after { content: ''; }
.plan-slot.is-filled::before {
	content: '';
	position: absolute;
	bottom: 4px;
	right: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #16a34a;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
	animation: plan-slot-dot 1.6s ease-in-out infinite;
	z-index: 3;
}
@keyframes plan-slot-dot {
	0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
	50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* Infinite (Enterprise) — show an ∞ in each slot instead of pulse */
.plan-slot.is-infinite .plan-slot__avatar { display: none; }
.plan-slot.is-infinite .plan-slot__pulse { display: none; }
.plan-slot.is-infinite::after {
	content: '∞';
	font-size: 1.6rem;
	font-weight: 800;
	background: var(--stride-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.plan-slot.is-infinite::before { display: none; }
.plan-slot.is-infinite {
	border: 1px dashed rgba(91, 66, 243, 0.35);
	background: rgba(91, 66, 243, 0.04);
}

/* Tier chips */
.plan-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
	margin-bottom: 1.25rem;
}
@media (max-width: 720px) { .plan-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .plan-tiers { grid-template-columns: 1fr; } }

.plan-tier {
	background: #ffffff;
	border: 2px solid var(--c-border);
	border-radius: 14px;
	padding: 0.875rem 1rem;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 180ms var(--ease), background-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.plan-tier:hover { border-color: rgba(91, 66, 243, 0.30); transform: translateY(-1px); }
.plan-tier.is-active {
	border-color: var(--c-primary);
	background-color: #ffffff;
	background-image: linear-gradient(180deg, rgba(91, 66, 243, 0.10) 0%, rgba(91, 66, 243, 0.03) 100%);
	box-shadow: 0 6px 16px rgba(91, 66, 243, 0.18);
}
.plan-tier.is-active::after {
	content: '✓';
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* The legacy JS adds .opacity-50 to the user's CURRENT plan so they can't
   re-purchase it. Override the raw transparency with a clear "Current plan"
   chip — solid bg, "Current plan" pill in the same top-center slot as the
   "Most popular" badge for visual consistency. */
.plan-tier.opacity-50 {
	opacity: 1 !important;
	background-color: #f6f9fc !important;
	background-image: none !important;
	border-color: var(--c-border) !important;
	box-shadow: none !important;
	cursor: default !important;
	pointer-events: none;
}
.plan-tier.opacity-50 .plan-tier__badge { display: none !important; }
.plan-tier.opacity-50::before {
	content: 'Current plan';
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--c-dark);
	color: #ffffff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(10, 37, 64, 0.20);
	white-space: nowrap;
}
/* When the chip is also the visually-selected one, suppress the purple ✓
   since "Current plan" already communicates it. */
.plan-tier.opacity-50.is-active::after { display: none; }
.plan-tier__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 0.25rem; }
.plan-tier.is-active .plan-tier__label { color: var(--c-primary); }
.plan-tier__count { font-size: 0.95rem; color: var(--c-dark); }
.plan-tier__count strong { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.plan-tier.is-active .plan-tier__count strong {
	background: var(--stride-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.plan-tier__price { font-size: 0.82rem; font-weight: 600; color: var(--c-dark); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--c-border-soft); font-variant-numeric: tabular-nums; }
.plan-tier__price::before { content: '$'; color: var(--c-muted); margin-right: 1px; }
.plan-tier--alt { background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%); }
.plan-tier--alt .plan-tier__price::before { content: ''; }
.plan-tier__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--stride-gradient);
	color: #ffffff;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 4px 10px rgba(91, 66, 243, 0.30);
	white-space: nowrap;
}

.plan-selector .plan-selector__cta,
.plan-selector .button-64.plan-selector__cta,
.button-64.plan-selector__cta {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto !important;
	padding: 0.95rem 1.5rem !important;
	font-size: 1rem !important;
	text-align: center !important;
}
.plan-selector .plan-selector__cta .text {
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ============================================================
   PRICING CARDS (/dashboard/packages) — legacy grid (unused now)
   ============================================================ */

.pricing-toggle-wrap {
	display: flex;
	justify-content: center;
	margin: 0.5rem 0 1.75rem;
}
.pricing-toggle {
	display: inline-flex;
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	padding: 4px;
	gap: 4px;
	box-shadow: 0 1px 2px rgba(50,50,93,0.04);
}
.pricing-toggle__btn {
	border: 0;
	background: transparent;
	padding: 0.5rem 1.1rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--c-body);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	position: relative;
}
.pricing-toggle__btn:hover { color: var(--c-dark); }
.pricing-toggle__btn.is-active,
.pricing-toggle__btn.active {
	background: var(--c-dark);
	color: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pricing-toggle__save {
	background: #ecfdf5;
	color: #059669;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid #a7f3d0;
}
.pricing-toggle__btn.is-active .pricing-toggle__save { background: rgba(167, 243, 208, 0.25); border-color: rgba(167, 243, 208, 0.5); color: #d1fae5; }

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 100%;
	margin: 0 auto;
}
@media (max-width: 1280px) {
	.pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 560px) {
	.pricing-grid { grid-template-columns: 1fr; }
}
.pricing-card { padding: 1.5rem 1.25rem 1.25rem; min-width: 0; }
.pricing-card__amount { font-size: 2.25rem; }
.pricing-card__currency { font-size: 1rem; margin-top: 0.4rem; }
.pricing-card {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: 1.75rem 1.5rem 1.5rem;
	box-shadow: 0 1px 2px rgba(50,50,93,0.04), 0 8px 20px -8px rgba(50,50,93,0.06);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(50,50,93,0.10), 0 4px 8px rgba(0,0,0,0.04);
	border-color: rgba(91,66,243,0.20);
}

.pricing-card--popular {
	border: 2px solid transparent;
	background-image:
		linear-gradient(#ffffff, #ffffff),
		var(--stride-gradient);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	box-shadow: 0 18px 36px -10px rgba(91,66,243,0.20), 0 8px 16px -8px rgba(0,0,0,0.06);
	transform: translateY(-6px);
}
.pricing-card--popular:hover { transform: translateY(-10px); }
.pricing-card__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--stride-gradient);
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	box-shadow: 0 6px 14px rgba(91,66,243,0.30);
	white-space: nowrap;
}

.pricing-card__head { margin-bottom: 1rem; }
.pricing-card__name {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 0.4rem;
}
.pricing-card--popular .pricing-card__name { color: var(--c-primary); }
.pricing-card__tagline {
	font-size: 0.88rem;
	color: var(--c-body);
	margin: 0;
	line-height: 1.45;
}
.pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin-bottom: 0.5rem;
	color: var(--c-dark);
	font-weight: 700;
	letter-spacing: -0.025em;
}
.pricing-card__currency { font-size: 1.1rem; align-self: flex-start; margin-top: 0.5rem; color: var(--c-muted); font-weight: 600; }
.pricing-card__amount { font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pricing-card__period { font-size: 0.92rem; color: var(--c-muted); font-weight: 500; margin-left: 4px; }
.pricing-card__profiles {
	font-size: 0.88rem;
	color: var(--c-body);
	padding: 0.6rem 0.75rem;
	background: rgba(91, 66, 243, 0.04);
	border: 1px solid rgba(91, 66, 243, 0.10);
	border-radius: 10px;
	margin-bottom: 1.25rem;
	line-height: 1.35;
}
.pricing-card__profiles strong { color: var(--c-dark); }

.pricing-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1 0 auto;
}
.pricing-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--c-dark);
	line-height: 1.4;
}
.pricing-card__features li i {
	color: var(--c-primary);
	font-size: 0.78rem;
	margin-top: 4px;
	width: 16px;
	flex-shrink: 0;
	text-align: center;
}
.pricing-card__features li i.fa-bolt { color: #f59e0b; }
.pricing-card__features li strong { font-weight: 700; color: var(--c-dark); }

.pricing-card__cta {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	justify-content: center;
}
.pricing-card__cta--outline {
	background: #ffffff !important;
	background-image: none !important;
	color: var(--c-dark) !important;
	border: 1.5px solid var(--c-border) !important;
	box-shadow: 0 1px 2px rgba(50,50,93,0.06) !important;
}
.pricing-card__cta--outline:hover {
	background: var(--c-bg) !important;
	border-color: var(--c-primary) !important;
	color: var(--c-primary) !important;
}

/* Enterprise card: subtle dark accent */
.pricing-card--enterprise {
	background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

/* ============================================================
   LEAD TYPE TOGGLE (segmented Business/Personal switch)
   ============================================================ */

.lead-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0.4rem;
	background: #f6f9fc;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	margin-bottom: 0.5rem;
}
.lead-toggle__opt {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border-radius: 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
	text-align: left;
	color: var(--c-body);
	font-family: inherit;
	width: 100%;
	font-size: 0.9rem;
}
.lead-toggle__opt i {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(91, 66, 243, 0.08);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.lead-toggle__opt span {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}
.lead-toggle__opt strong {
	font-weight: 700;
	color: var(--c-dark);
	font-size: 0.92rem;
	letter-spacing: -0.01em;
}
.lead-toggle__opt small {
	font-size: 0.75rem;
	color: var(--c-muted);
	margin-top: 1px;
}
.lead-toggle__opt:not(.is-active) { opacity: 0.55; }
.lead-toggle__opt:not(.is-active):hover { background: rgba(91, 66, 243, 0.06); opacity: 0.85; }
.lead-toggle__opt.is-active {
	background: #ffffff;
	box-shadow: 0 2px 6px rgba(50, 50, 93, 0.10), 0 0 0 2px var(--c-primary);
}
.lead-toggle__opt.is-active i {
	background: var(--stride-gradient);
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(91, 66, 243, 0.30);
}
.lead-toggle__opt.is-active strong { color: var(--c-primary); }
.lead-toggle__opt.is-active::after {
	content: '✓';
	margin-left: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.lead-toggle { grid-template-columns: 1fr; }
}

/* ============================================================
   PROFILE PICKER (builder-flow step 2) — clean layout
   ============================================================ */

.profile-picker-wrap { max-width: 760px; margin: 0 auto; padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 4vw, 2.5rem); width: 100%; }
.profile-picker-head { margin-bottom: 1.5rem; }
.profile-picker-card { padding: clamp(1.25rem, 2.5vw, 1.75rem) !important; }
.profile-picker-slots { padding: 1rem 0.75rem; gap: 0.5rem; }
.profile-slot img { width: 44px !important; height: 44px !important; }
@media (max-width: 640px) {
	.profile-picker-slots { padding: 0.875rem 0.5rem; gap: 0.35rem; grid-template-columns: repeat(5, 1fr); }
	.profile-slot img { width: 40px !important; height: 40px !important; }
}
.profile-picker-head { text-align: center; margin-bottom: 2.5rem; }
.profile-picker-head .stripe-label { margin-bottom: 0.75rem; }
.profile-picker-head h1 { margin-bottom: 0.75rem; }
.profile-picker-head p { margin: 0; }
.profile-picker-card {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 18px;
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: 0 2px 4px rgba(50,50,93,0.04), 0 12px 32px -8px rgba(50,50,93,0.08);
}
.profile-picker-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}
.profile-picker-input { margin-bottom: 1.5rem; max-width: 100%; }
.profile-picker-input #addProfile {
	border-radius: 0 12px 12px 0 !important;
	border-left: 0 !important;
	margin: 0 !important;
}

.profile-picker-slots {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	justify-items: center;
	gap: 0.4rem;
	padding: 0.875rem;
	background: #fafbfc;
	border: 1px solid var(--c-border-soft);
	border-radius: 12px;
	margin-bottom: 0.6rem;
}
@media (max-width: 640px) {
	.profile-picker-slots { grid-template-columns: repeat(5, 1fr); }
}
.profile-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.profile-slot img {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	border: 2px solid #ffffff !important;
	box-shadow: 0 2px 6px rgba(50,50,93,0.10);
	transition: transform 180ms var(--ease), border-color 180ms var(--ease);
	margin: 0 !important;
}
.profile-slot img:hover { transform: scale(1.08); border-color: var(--c-primary) !important; }

.profile-picker-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	color: var(--c-muted);
	margin-bottom: 1.25rem;
}
.profile-picker-hint i { font-size: 0.75rem; }

.profile-picker-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	padding: 1rem;
	background: rgba(91,66,243,0.04);
	border: 1px solid rgba(91,66,243,0.10);
	border-radius: 12px;
	margin-bottom: 1.25rem;
}
.profile-picker-stat__label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}
.profile-picker-stat__value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--c-dark);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.015em;
}
.profile-picker-cta {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* ============================================================
   TABS, TABLES, PILLS, EMPTY STATES (dashboard)
   ============================================================ */

.stride-tabs {
	display: inline-flex;
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	padding: 4px;
	gap: 3px;
	margin-bottom: 1.25rem;
	box-shadow: 0 1px 2px rgba(50,50,93,0.04);
}
.stride-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border-radius: 10px;
	border: 0;
	background: transparent;
	color: var(--c-body);
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 160ms var(--ease), color 160ms var(--ease);
	white-space: nowrap;
	font-family: inherit;
}
.stride-tab i { font-size: 0.78rem; opacity: 0.85; }
.stride-tab:hover { background: rgba(91, 66, 243, 0.06); color: var(--c-dark); }
.stride-tab.is-active {
	background: var(--c-dark);
	color: #ffffff;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.stride-tab.is-active i { opacity: 1; }
.stride-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(91, 66, 243, 0.10);
	color: var(--c-primary);
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.stride-tab.is-active .stride-tab__count {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.stride-table-wrap {
	background: #ffffff;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(50, 50, 93, 0.04), 0 8px 20px -8px rgba(50, 50, 93, 0.06);
}
.stride-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	background: #ffffff;
}
.stride-table th {
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	font-size: 0.72rem;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--c-border);
	background: #fafbfc;
	white-space: nowrap;
}
.stride-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--c-border-soft);
	color: var(--c-dark);
	vertical-align: middle;
}
.stride-table tbody tr { transition: background 0.15s var(--ease); }
.stride-table tbody tr:hover { background: #fafbfc; }
.stride-table tbody tr:last-child td { border-bottom: 0; }

.stride-row-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 0.95rem;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(50,50,93,0.12);
}
.stride-row-avatar {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.stride-row-avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 6px rgba(50, 50, 93, 0.14);
	background: #f6f9fc;
}
.stride-row-avatar__more {
	position: absolute;
	right: -6px;
	bottom: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--c-dark);
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.02em;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Mosaic-tile avatar for Builder rows — packs 1–4 profile photos into
   the same 36×36 footprint as a single Scanner avatar.
     1 image  → full circle
     2 images → two halves (split vertical)
     3 images → first spans full height on left, other two stacked right
     4+ images → 2×2 quadrants
   The +N badge floats outside the clipped grid (via wrapper). */
.stride-row-mosaic-wrap {
	position: relative;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}
.stride-row-mosaic {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	overflow: hidden;
	background: #f6f9fc;
	box-shadow: 0 2px 6px rgba(50, 50, 93, 0.14);
	display: grid;
	gap: 1px;
}
.stride-row-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	border-radius: 0;
	margin: 0;
	background: #e3e8ee;
}

/* 1 image — full circle (no grid) */
.stride-row-mosaic[data-count="1"] {
	border-radius: 50%;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

/* 2 images — split vertically */
.stride-row-mosaic[data-count="2"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

/* 3 images — first full-height left, other two stacked right */
.stride-row-mosaic[data-count="3"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.stride-row-mosaic[data-count="3"] img:first-child {
	grid-row: 1 / span 2;
}

/* 4 images — 2×2 quadrants */
.stride-row-mosaic[data-count="4"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

/* "+N" corner badge — shown whenever the bundle has more than 1 profile */
.stride-row-mosaic__count {
	position: absolute;
	right: -4px;
	bottom: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--c-dark);
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
	z-index: 2;
}
.stride-row-title {
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--c-dark);
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}
.stride-row-sub {
	font-size: 0.78rem;
	color: var(--c-muted);
	margin-top: 1px;
}
.stride-row-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--c-primary);
	font-weight: 600;
	font-size: 0.85rem;
	text-decoration: none !important;
	white-space: nowrap;
	transition: opacity 160ms var(--ease);
}
.stride-row-link:hover { opacity: 0.75; color: var(--c-primary); }

.stride-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.01em;
	text-transform: capitalize;
}
.stride-pill--green  { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.stride-pill--red    { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.stride-pill--yellow { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.stride-pill--blue   { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.stride-pill--purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.stride-pill--gray   { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

.stride-empty {
	background: #ffffff;
	border: 1px dashed var(--c-border);
	border-radius: 16px;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	text-align: center;
}
.stride-empty__icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(91, 66, 243, 0.08);
	color: var(--c-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin: 0 auto 1rem;
}

/* Make the table responsive — collapse to cards on narrow screens */
@media (max-width: 640px) {
	.stride-table thead { display: none; }
	.stride-table, .stride-table tbody, .stride-table tr, .stride-table td { display: block; width: 100%; }
	.stride-table tr {
		padding: 1rem;
		border-bottom: 1px solid var(--c-border);
	}
	.stride-table td {
		padding: 4px 0;
		border: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
	}
	.stride-table td::before {
		content: attr(data-label);
		font-size: 0.7rem;
		font-weight: 600;
		color: var(--c-muted);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
}

/* ============================================================
   FOOTER
   ============================================================ */

.stride-footer {
	margin-top: 3rem;
	padding: 1.25rem 1rem 1rem;
	border-top: 1px solid var(--c-border);
}
.stride-footer--light { background: #ffffff; }
.stride-footer--dark  { background: rgba(15, 12, 26, 0.6); border-top-color: rgba(255,255,255,0.08); }
.stride-footer__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}
.stride-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.stride-footer__logo { width: 28px; height: 28px; }
.stride-footer__brand .main-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 6px !important;
	line-height: 1;
}
.stride-footer__legal { display: flex; flex-direction: column; gap: 0.25rem; }
.stride-footer--light .stride-footer__legal small { color: var(--c-muted); font-size: 0.8rem; }
.stride-footer--dark .stride-footer__legal small { color: rgba(255,255,255,0.55); font-size: 0.8rem; }
.stride-footer__links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.85rem;
	align-items: center;
}
.stride-footer--light .stride-footer__links a { color: var(--c-body); text-decoration: none; transition: color 160ms; }
.stride-footer--light .stride-footer__links a:hover { color: var(--c-dark); }
.stride-footer--dark .stride-footer__links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 160ms; }
.stride-footer--dark .stride-footer__links a:hover { color: #ffffff; }
.stride-footer--light .stride-footer__links .sep { color: var(--c-border); }
.stride-footer--dark .stride-footer__links .sep { color: rgba(255,255,255,0.2); }

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
	html, body { font-size: 15.5px; }
	.stripe-section { padding: clamp(2.5rem, 6vw, 3.5rem) 0; }
	.stripe-btn { padding: 0.7rem 1.25rem; }
	.stripe-btn--lg { padding: 0.9rem 1.5rem; }
	.button-64 { min-height: 44px; }
	.navbar { min-height: 60px; padding: 0.5rem 0.75rem; }
}

@media (hover: none) {
	.stripe-card:hover,
	.stripe-btn:hover,
	[style*="0 -3px 0 inset"][style*="cursor:pointer"]:hover,
	.leadType[style*="0 -3px 0 inset"]:hover { transform: none !important; }
}

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