/* fastIEP Theme Main Stylesheet */
/* Enhanced with React Design System tokens (DESIGN_SYSTEM_TOKENS.json) */

:root {
	/* ── Brand Colors ────────────────────────────── */
	--color-brand: #FF1493;           /* Deep Pink — logo, brand headlines */
	--color-brand-legacy: #fe00c3;    /* Legacy brand (reference only) */

	/* ── Primary Dark (text & UI) ────────────────── */
	--color-primary: #FF1493;         /* Near-black — headings, dark UI */
	--color-primary-dark: #030213;
	--color-primary-light: #374151;
	--color-primary-foreground: #ffffff; /* Synced from React design system */

	/* ── Secondary Colors (from React system) ────── */
	--color-secondary: #f3f3f5;
	--color-secondary-foreground:#FF1493;
	
	/* ── Muted Colors (from React system) ────────── */
	--color-muted: #ececf0;
	--color-muted-foreground: #6b7280;

	/* ── Accent Colors (from React system) ──────── */
	--color-accent: #e9ebef;
	--color-accent-foreground: #030213;

	/* ── CTA Gradient ────────────────────────────── */
	--color-cta-from: #C026D3;        /* Fuchsia-600 */
	--color-cta-to: #DB2777;          /* Pink-600 */
	--color-cta-hover-from: #A21CAF;  /* Fuchsia-700 */
	--color-cta-hover-to: #BE185D;    /* Pink-700 */
	--gradient-cta: linear-gradient(135deg, var(--color-cta-from), var(--color-cta-to));
	--gradient-cta-hover: linear-gradient(135deg, var(--color-cta-hover-from), var(--color-cta-hover-to));

	/* ── Interactive (links, focus) ──────────────── */
	--color-interactive: #C026D3;
	--color-interactive-hover: #A21CAF;
	--color-interactive-light: #D946EF;

	/* ── Destructive/Semantic Colors (from React) ── */
	--color-destructive: #d4183d;
	--color-destructive-foreground: #ffffff;

	/* ── Background Gradients ────────────────────── */
	--color-bg-gradient-from: #FAF5FF; /* Light purple-pink */
	--color-bg-gradient-to: #FDF2F8;
	--gradient-bg: linear-gradient(135deg, var(--color-bg-gradient-from), var(--color-bg-gradient-to));

	/* ── Text ────────────────────────────────────── */
	--color-text: #111827;
	--color-text-muted: #6B7280;
	--color-text-subtle: #9CA3AF;

	/* ── Backgrounds ─────────────────────────────── */
	--color-bg: #FFFFFF;
	--color-bg-alt: #F3F3F5;
	--color-bg-light: #F9FAFB;
	--color-bg-pink-light: #FAF5FF;
	--color-bg-dark: #030213;

	/* ── Borders ─────────────────────────────────── */
	--color-border: #E9EBEF;
	--color-border-light: #ECECF0;
	--color-border-muted: #CBCED4;

	/* ── Semantic Colors ─────────────────────────── */
	--color-error: #D4183D;
	--color-success: #10B981;
	--color-warning: #F59E0B;
	--color-info: #3B82F6;

	/* ── Form Controls (from React system) ────────── */
	--color-input: transparent;
	--color-input-background: #f3f3f5;
	--color-switch-background: #cbced4;

	/* ── Focus/Ring color (from React system) ────── */
	--color-ring: #d4d4d8;

	/* ── Feature/Platform Accent Colors ─────────────
	   Each platform feature gets a gradient + icon color */
	--feature-blue-from: #DBEAFE; --feature-blue-to: #CFFAFE;   --feature-blue-icon: #2563EB;
	--feature-purple-from: #F3E8FF; --feature-purple-to: #E0E7FF; --feature-purple-icon: #9333EA;
	--feature-green-from: #D1FAE5; --feature-green-to: #CCFBF1;  --feature-green-icon: #059669;
	--feature-orange-from: #FFEDD5; --feature-orange-to: #FEF3C7; --feature-orange-icon: #EA580C;
	--feature-lime-from: #DCFCE7; --feature-lime-to: #D1FAE5;    --feature-lime-icon: #00c951;
	--feature-amber-from: #FEF3C7; --feature-amber-to: #FEF9C3;  --feature-amber-icon: #D97706;
	--feature-cyan-from: #CFFAFE; --feature-cyan-to: #DBEAFE;    --feature-cyan-icon: #0891B2;
	--feature-red-from: #FEE2E2;  --feature-red-to: #FECACA;    --feature-red-icon: #DC2626;

	/* ── Persona Accent Colors ───────────────────── */
	--persona-fuchsia-from: #FAE8FF; --persona-fuchsia-to: #FCE7F3; --persona-fuchsia-icon: #C026D3;
	--persona-blue-from: #DBEAFE; --persona-blue-to: #CFFAFE;      --persona-blue-icon: #2563EB;
	--persona-green-from: #DCFCE7; --persona-green-to: #D1FAE5;    --persona-green-icon: #16A34A;

	/* ── Persona Card Vivid Gradients ─────────────
	   Bold color-to-color gradients for persona card backgrounds */
	--persona-grad-blue:   linear-gradient(135deg, #2563EB, #7C3AED);
	--persona-grad-purple: linear-gradient(135deg, #9333EA, #C026D3);
	--persona-grad-green:  linear-gradient(135deg, #059669, #0891B2);
	--persona-grad-orange: linear-gradient(135deg, #EA580C, #D97706);
	--persona-grad-lime:   linear-gradient(135deg, #16A34A, #65A30D);
	--persona-grad-amber:  linear-gradient(135deg, #D97706, #EA580C);
	--persona-grad-cyan:   linear-gradient(135deg, #0891B2, #2563EB);
	--persona-grad-red:    linear-gradient(135deg, #DC2626, #DB2777);

	/* ── Persona Solid Colors ─────────────────────
	   First stop of each persona gradient, for text accents */
	--persona-solid-blue:   #2563EB;
	--persona-solid-purple: #9333EA;
	--persona-solid-green:  #059669;
	--persona-solid-orange: #EA580C;
	--persona-solid-lime:   #16A34A;
	--persona-solid-amber:  #D97706;
	--persona-solid-cyan:   #0891B2;
	--persona-solid-red:    #DC2626;

	/* ── Chart Colors ────────────────────────────── */
	--chart-1: #F97316;
	--chart-2: #06B6D4;
	--chart-3: #3B82F6;
	--chart-4: #EAB308;
	--chart-5: #84CC16;

	--font-heading: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-body: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 48px;
	--spacing-2xl: 80px;

	--radius: 12px;
	--radius-sm: 8px;

	--max-width: 1280px;
	--container-padding: 24px;

	--transition: all 0.3s ease;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	/* scroll-behavior is handled via JS (initSmoothScroll) so browsers can
	   restore scroll position correctly on back/forward navigation */
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.6;
	font-size: 16px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: var(--spacing-lg);
}

h1 {
	font-size: clamp(28px, 6vw, 52px);
}

h2 {
	font-size: clamp(24px, 5vw, 36px);
}

h3 {
	font-size: clamp(18px, 3.5vw, 28px);
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	color: var(--color-primary-dark);
}

/* Title highlight — use <span> inside section headings */
h1 span, h2 span, h3 span, p span {
	color: var(--color-brand);
	font-weight: 700;
}

.layout-cta-banner p span{
	color: white;
}

/* Container */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* ========================================================================== 
   BUTTONS — Synced with React Design System
   ========================================================================== */

/* Base button styles — all buttons inherit these */
.btn, .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
	font-family: var(--font-heading);
	white-space: nowrap;
	outline: none;
}

.btn:disabled, 
.button:disabled {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
}

.btn:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}

/* ── Size Variants ────────────────────────────────────── */

/* Small button */
.btn-sm, 
.button.button-sm {
	padding: 8px 18px;
	font-size: 13px;
	height: 32px;
	border-radius: var(--radius-sm);
}

/* Default button size (already set on .btn) */
.btn-default,
.button.button-default {
	padding: 12px 32px;
	font-size: 16px;
	height: 36px;
}

/* Large button */
.btn-lg,
.button.button-lg {
	padding: 16px 40px;
	font-size: 17px;
	height: 40px;
}

/* Icon-only button */
.btn-icon,
.btn-icon-only,
.button.button-icon {
	width: 36px;
	height: 36px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-icon.btn-lg,
.btn-icon-only.btn-lg,
.button.button-icon.button-lg {
	width: 40px;
	height: 40px;
}

.btn-icon.btn-sm,
.btn-icon-only.btn-sm,
.button.button-icon.button-sm {
	width: 32px;
	height: 32px;
}

/* ── Color Variants ──────────────────────────────────── */

/* DEFAULT variant — Primary brand with CTA gradient */
.btn-default,
.btn.btn-default,
.button.button-default {
	background: var(--gradient-cta);
	color: white;
	border: 2px solid transparent;
}

.btn-default:hover:not(:disabled),
.btn.btn-default:hover:not(:disabled),
.button.button-default:hover:not(:disabled) {
	background: var(--gradient-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(192, 38, 211, 0.35);
}

.btn-default:active:not(:disabled),
.btn.btn-default:active:not(:disabled),
.button.button-default:active:not(:disabled) {
	transform: translateY(0);
}

/* PRIMARY variant — Same as default */
.btn-primary,
.btn.btn-primary,
.button.button-primary {
	background: var(--color-primary);
	color: var(--color-primary-foreground);
	border: 2px solid transparent;
}

.btn-primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.button.button-primary:hover:not(:disabled) {
	background: var(--gradient-cta);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(192, 38, 211, 0.35);
}

/* SECONDARY variant — Outlined/tonal */
.btn-secondary,
.btn.btn-secondary,
.button.button-secondary {
	background-color: transparent;
	color: var(--color-secondary-foreground);
	border: 2px solid var(--color-secondary-foreground);
}

.btn-secondary:hover:not(:disabled),
.btn.btn-secondary:hover:not(:disabled),
.button.button-secondary:hover:not(:disabled) {
	background: var(--color-secondary);
	color: var(--color-secondary-foreground);
	transform: translateY(-2px);
	border-color: var(--color-secondary);
}

/* OUTLINE variant — Bordered with hover fill */
.btn-outline,
.btn.btn-outline,
.button.button-outline {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-border);
}

.btn-outline:hover:not(:disabled),
.btn.btn-outline:hover:not(:disabled),
.button.button-outline:hover:not(:disabled) {
	background: var(--color-accent);
	color: var(--color-accent-foreground);
	border-color: var(--color-border);
	transform: translateY(-2px);
}

/* GHOST variant — Minimal/transparent */
.btn-ghost,
.btn.btn-ghost,
.button.button-ghost {
	background: transparent;
	color: var(--color-primary);
	border: none;
}

.btn-ghost:hover:not(:disabled),
.btn.btn-ghost:hover:not(:disabled),
.button.button-ghost:hover:not(:disabled) {
	background: var(--color-accent);
	color: var(--color-accent-foreground);
	transform: translateY(-2px);
}

/* DESTRUCTIVE variant — Error/danger actions */
.btn-destructive,
.btn.btn-destructive,
.button.button-destructive {
	background: var(--color-destructive);
	color: var(--color-destructive-foreground);
}

.btn-destructive:hover:not(:disabled),
.btn.btn-destructive:hover:not(:disabled),
.button.button-destructive:hover:not(:disabled) {
	background: #c0092e;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(212, 24, 61, 0.35);
}

/* LINK variant — Text-only link button */
.btn-link,
.btn.btn-link,
.button.button-link {
	background: transparent;
	color: var(--color-primary);
	border: none;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-size: inherit;
	height: auto;
}

.btn-link:hover:not(:disabled),
.btn.btn-link:hover:not(:disabled),
.button.button-link:hover:not(:disabled) {
	text-decoration: underline;
	color: var(--color-interactive-hover);
	transform: none;
	background: transparent;
}

/* ── Legacy Button Aliases (for backward compatibility) ────── */

.btn-brand {
	background-color: var(--color-brand);
	color: white;
}

.btn-brand:hover {
	background-color: #e0007d;
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(255, 20, 147, 0.35);
}

.btn-dark {
	background-color: var(--color-primary);
	color: white;
}

.btn-dark:hover {
	background-color: #1a1a2e;
	transform: translateY(-2px);
}

/*  Text link alignment */
.btn-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #C026D3;
	text-decoration: none;
	transition: gap 0.2s ease, opacity 0.2s ease;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	height: auto;
	font-family: inherit;
}

.btn-text-link:hover {
	gap: 10px;
	opacity: 0.85;
}

/* ========================================================================== 
   CARDS — Synced with React Design System
   ========================================================================== */

/* Base card styles */
.card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: var(--transition);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Card image container */
.card-image {
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* Card header */
.card-header {
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--color-border);
}

/* Card body — main content area */
.card-body {
	padding: var(--spacing-lg);
	flex: 1;
}

.card-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-sm) 0;
	line-height: 1.3;
}

.card-subtitle {
	font-size: 14px;
	color: var(--color-text-muted);
	margin: 0 0 var(--spacing-md) 0;
	line-height: 1.5;
}

.card-content {
	font-size: 15px;
	color: var(--color-text);
	line-height: 1.6;
}

/* Card footer */
.card-footer {
	padding: var(--spacing-lg);
	border-top: 1px solid var(--color-border);
	background: rgba(0, 0, 0, 0.02);
}

/* ── Card Variants ────────────────────── */

/* DEFAULT variant — standard card */
.card-default {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ELEVATED variant — more prominent shadow */
.card-elevated {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* OUTLINED variant — stronger border, no shadow */
.card-outlined {
	background: var(--color-bg);
	border: 2px solid var(--color-border);
	box-shadow: none;
}

/* ── Card Interactive States ────────── */

/* Hoverable cards */
.card-hoverable:hover {
	border-color: var(--color-border-muted);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

.card-hoverable:hover .card-image img {
	transform: scale(1.05);
}

/* Interactive/clickable cards */
.card-interactive {
	cursor: pointer;
	position: relative;
	text-decoration: none;
	color: inherit;
}

.card-interactive:hover {
	text-decoration: none;
	color: inherit;
}

.card-interactive.card-hoverable {
	border: 1px solid var(--color-border);
}

.card-interactive.card-hoverable:hover {
	border-color: var(--color-interactive-light);
	background: rgba(217, 70, 239, 0.02);
}

/* Link cards (a.card) */
a.card,
a.card-default,
a.card-elevated,
a.card-outlined {
	color: inherit;
	text-decoration: none;
}

a.card:hover,
a.card-default:hover,
a.card-elevated:hover,
a.card-outlined:hover {
	color: inherit;
	text-decoration: none;
}

/* ========================================================================== 
   FORM CONTROLS — Synced with React Design System
   ========================================================================== */

/* Form field container */
.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
}

/* Form labels */
.form-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0;
	line-height: 1.4;
}

.form-required {
	display: inline-block;
	margin-left: 4px;
	color: var(--color-destructive);
	font-weight: 700;
}

/* Input base styles */
.form-input,
.form-textarea,
.form-select {
	display: block;
	width: 100%;
	font-size: 16px;
	font-family: var(--font-body);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-input-background);
	color: var(--color-text);
	padding: 10px 12px;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
	color: var(--color-muted-foreground);
	opacity: 1;
}

/* Input focus state */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	outline: none;
	border-color: var(--color-primary);
	background: var(--color-bg);
	box-shadow: 0 0 0 3px rgba(3, 2, 19, 0.1);
}

/* Select styling */
.form-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23030213' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 36px;
	cursor: pointer;
}

.form-select:disabled {
	background-color: var(--color-bg-alt);
	cursor: not-allowed;
}

/* Textarea specific */
.form-textarea {
	resize: vertical;
	min-height: 100px;
}

/* Disabled state */
.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
	pointer-events: none;
	opacity: 0.5;
	cursor: not-allowed;
	background-color: var(--color-bg-alt);
}

/* Error/invalid state */
.form-input-error {
	border-color: var(--color-destructive);
	background: rgba(212, 24, 61, 0.02);
}

.form-input-error:focus {
	border-color: var(--color-destructive);
	box-shadow: 0 0 0 3px rgba(212, 24, 61, 0.1);
}

.form-input-error::placeholder {
	color: var(--color-destructive);
}

/* Error message */
.form-error {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-destructive);
	gap: 6px;
	margin-top: -4px;
}

/* Description/helper text */
.form-description {
	font-size: 13px;
	color: var(--color-muted-foreground);
	line-height: 1.5;
	margin: -4px 0 0 0;
}

/* ── Checkbox & Radio ────────────────── */

.form-checkbox,
.form-radio {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	cursor: pointer;
}

.form-checkbox input[type="checkbox"],
.form-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--color-primary);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.form-checkbox input[type="checkbox"]:focus,
.form-radio input[type="radio"]:focus {
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}

.form-checkbox label,
.form-radio label {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--color-text);
	cursor: pointer;
	user-select: none;
}

.form-checkbox input[type="checkbox"]:disabled,
.form-radio input[type="radio"]:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.form-checkbox input[type="checkbox"]:disabled ~ label,
.form-radio input[type="radio"]:disabled ~ label {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Form group for multiple controls ────── */

.form-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* Group title */
.form-group-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	margin: 0 0 var(--spacing-sm) 0;
}

/* Group description */
.form-group-description {
	font-size: 13px;
	color: var(--color-muted-foreground);
	margin: 0;
}

/* ── Inline forms ────────────────────── */

.form-inline {
	display: flex;
	gap: var(--spacing-md);
	align-items: flex-end;
	flex-wrap: wrap;
}

.form-inline .form-field {
	margin-bottom: 0;
}

.form-inline .form-input,
.form-inline .form-select {
	margin-bottom: 0;
}

/* Every content section gets consistent vertical rhythm */
.section {
	padding: var(--spacing-2xl) 0;
}

/* Shared section header block */
.section-header {
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
	padding-bottom: var(--spacing-xl);
}

.personas-header,
.resources-header,
.partners-header,
.editable-grid__header,
.testimonials-header {
	padding-bottom: var(--spacing-xl);
}

.section-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C026D3;
	background: rgba(192, 38, 211, 0.08);
	padding: 4px 14px;
	border-radius: 9999px;
	margin-bottom: var(--spacing-md);
}

/* On dark/gradient backgrounds the eyebrow gets a light treatment */
.section-eyebrow--light {
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.15);
}

.section-title {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
	margin-bottom: var(--spacing-xl);
	font-family: var(--font-heading);
	letter-spacing: -0.02em;
}

.section-title--light {
	color: #fff;
}

.section-subtitle {
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.7;
	color: var(--color-text-muted);
	margin-bottom: 0;
}

.section-subtitle--light {
	color: rgba(255, 255, 255, 0.85);
}

/* .eyebrow is the lowercase alias used by layout-feature-cards and others */
.eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C026D3;
	background: rgba(192, 38, 211, 0.08);
	padding: 4px 14px;
	border-radius: 9999px;
	margin-bottom: var(--spacing-md);
}

/* btn-text-link — inline text CTA */
.btn-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #C026D3;
	text-decoration: none;
	transition: gap 0.2s ease, opacity 0.2s ease;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.btn-text-link:hover {
	gap: 10px;
	opacity: 0.85;
}

/* ==========================================================================
   Header & Navigation — Synced with React Design System
   ========================================================================== */

/* ---- Header shell ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background-color: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow var(--transition);
}

.site-header.sticky {
	box-shadow: 0 2px 16px rgba(3, 2, 19, 0.08);
}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	padding: 0 var(--container-padding);
	max-width: var(--max-width);
	margin: 0 auto;
	gap: var(--spacing-lg);
}

/* ---- Logo ---- */
.header-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 44px;
	z-index: 1;
	transition: opacity 0.2s ease;
}

.header-logo:hover {
	opacity: 0.85;
}

.header-logo .logo-link {
	display: flex;
	align-items: center;
	height: 100%;
	text-decoration: none;
	line-height: 1;
	color: inherit;
}

.header-logo img,
.header-logo .site-logo {
	width: 180px;
	height: auto;
	max-height: 44px;
	display: block;
}

.header-logo .site-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary);
	font-family: var(--font-heading);
	letter-spacing: -0.02em;
	margin: 0;
}

/* ---- Primary nav ---- */
.site-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-menu {
	display: flex;
	list-style: none;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}

/* ---- Top-level menu items ---- */
.nav-menu > li {
	position: static; /* mega panels are positioned relative to .site-header */
}

.nav-menu > li > .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-muted, #6B7280);
	border-radius: var(--radius-sm);
	transition: all 0.2s ease;
	white-space: nowrap;
	text-decoration: none;
	position: relative;
}

.nav-menu > li > .nav-link:hover,
.nav-menu > li.is-open > .nav-link,
.nav-menu > li.is-active > .nav-link:hover {
	color: var(--color-primary);
	background-color: var(--color-accent);
}

.nav-menu > li.is-active > .nav-link {
	color: var(--color-primary);
	font-weight: 600;
	background-color: transparent;
}

/* Chevron icon */
.nav-chevron {
	transition: transform 0.25s ease;
	flex-shrink: 0;
	margin-left: 2px;
	display: inline-block;
	width: 16px;
	height: 16px;
}

.nav-menu > li.is-open > .nav-link .nav-chevron {
	transform: rotate(180deg);
}

/* Underline accent for root level active items */
.nav-menu-main > li.is-active > .nav-link::after {
	content: '';
	display: block;
	position: absolute;
	bottom: -8px;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--gradient-cta);
	border-radius: 2px;
}

/* ---- Dropdown menus ---- */
.nav-dropdown,
.nav-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 300;
	min-width: 220px;
	margin-top: 8px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.nav-menu > li.is-open > .nav-dropdown,
.nav-menu > li.is-open > .nav-panel {
	display: block;
	animation: slideDownIn 0.2s ease;
}

@keyframes slideDownIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.nav-dropdown a,
.nav-panel a {
	display: block;
	padding: 12px 16px;
	font-size: 14px;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
}

.nav-dropdown a:hover,
.nav-panel a:hover {
	background-color: var(--color-accent);
	color: var(--color-primary);
	border-left-color: var(--color-primary);
}

/* ---- Right nav actions ---- */
.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex: 0 1 auto;
}

.nav-actions .btn,
.nav-actions .button {
	margin: 0;
}

/* ---- Standard dropdown ---- */
.dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(3, 2, 19, 0.12);
	padding: 8px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 210;
}

.has-dropdown:hover > .dropdown-menu,
.has-dropdown.is-open > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-menu a {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--color-text);
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu a:hover {
	background-color: var(--color-bg-alt);
	color: var(--color-primary);
}

/* ---- Mega panel base ---- */
.mega-panel {
	position: fixed;
	top: 68px; /* matches .header-container height */
	left: 0;
	right: 0;
	z-index: 190;
	background: #fff;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 16px 48px rgba(3, 2, 19, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	pointer-events: none;
}

.has-mega-menu.is-open > .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.mega-panel__inner {
	display: flex;
	gap: var(--spacing-xl);
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 32px var(--container-padding);
}

/* ---- Mega overlay (dims page behind panel) ---- */
.mega-overlay {
	position: fixed;
	inset: 0;
	top: 68px;
	z-index: 180;
	background: rgba(3, 2, 19, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	pointer-events: none;
}

.mega-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ==========================================================================
   Platform mega panel
   ========================================================================== */
.mega-panel--solutions .mega-panel__inner {
	align-items: flex-start;
}

.mega-panel__grid {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

/* Feature cards */
.mega-feature-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
	color: inherit;
}

.mega-feature-card:hover {
	background-color: var(--card-color-pale, var(--color-bg-alt));
	border-color: var(--card-color-pale, var(--color-border));
}

.mega-feature-card__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.mega-feature-card__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.75;
}

/* Colour scheme icon backgrounds — keys match the ACF color_scheme field choices */
.mega-feature-card.scheme-blue    { --card-color: #2563EB; --card-color-pale: #EFF6FF; }
.mega-feature-card.scheme-purple  { --card-color: #9333EA; --card-color-pale: #F5F3FF; }
.mega-feature-card.scheme-green   { --card-color: #059669; --card-color-pale: #ECFDF5; }
.mega-feature-card.scheme-orange  { --card-color: #EA580C; --card-color-pale: #FFF7ED; }
.mega-feature-card.scheme-lime    { --card-color: #16A34A; --card-color-pale: #F0FDF4; }
.mega-feature-card.scheme-amber   { --card-color: #D97706; --card-color-pale: #FFFBEB; }
.mega-feature-card.scheme-cyan    { --card-color: #0891B2; --card-color-pale: #ECFEFF; }
.mega-feature-card.scheme-red     { --card-color: #DC2626; --card-color-pale: #FEF2F2; }

.mega-feature-card.scheme-blue    .mega-feature-card__icon { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.mega-feature-card.scheme-purple  .mega-feature-card__icon { background: linear-gradient(135deg, #9333EA, #7C3AED); }
.mega-feature-card.scheme-green   .mega-feature-card__icon { background: linear-gradient(135deg, #059669, #047857); }
.mega-feature-card.scheme-orange  .mega-feature-card__icon { background: linear-gradient(135deg, #EA580C, #C2410C); }
.mega-feature-card.scheme-lime    .mega-feature-card__icon { background: linear-gradient(135deg, #16A34A, #15803D); }
.mega-feature-card.scheme-amber   .mega-feature-card__icon { background: linear-gradient(135deg, #D97706, #B45309); }
.mega-feature-card.scheme-cyan    .mega-feature-card__icon { background: linear-gradient(135deg, #0891B2, #0E7490); }
.mega-feature-card.scheme-red     .mega-feature-card__icon { background: linear-gradient(135deg, #DC2626, #B91C1C); }

.mega-feature-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mega-feature-card__tagline {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--card-color, var(--color-cta-from));
}

.mega-feature-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.3;
}

.mega-feature-card__desc {
	font-size: 12px;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.4;
	margin-top: 2px;
}

.mega-feature-card__arrow {
	flex-shrink: 0;
	color: var(--card-color, var(--color-text-muted, #9CA3AF));
	transition: transform 0.15s ease, color 0.15s ease;
	align-self: center;
}

.mega-feature-card:hover .mega-feature-card__arrow {
	transform: translateX(3px);
	color: var(--card-color, var(--color-cta-from));
}

/* Sidebar */
.mega-panel__sidebar {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mega-panel__cta-card {
	background: linear-gradient(135deg, #FAF5FF, #FDF2F8);
	border: 1px solid #E9D5FF;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mega-panel__cta-icon {
	width: 40px;
	height: 40px;
}

.mega-panel__cta-heading {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0;
}

.mega-panel__cta-text {
	font-size: 13px;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.5;
	margin: 0;
}

.mega-panel__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	background: var(--color-bg-alt);
	border-radius: 10px;
	border: 1px solid var(--color-border);
}

.mega-panel__stat-number {
	font-size: 28px;
	font-weight: 800;
	background: var(--gradient-cta);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
}

.mega-panel__stat-label {
	font-size: 12px;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.4;
}

/* ==========================================================================
   Solutions mega panel
   ========================================================================== */
.mega-panel--personas .mega-panel__inner {
	flex-direction: column;
	gap: 16px;
}

.mega-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mega-panel__intro {
	font-size: 18px;
	color: var(--color-text-muted, #6B7280);
	margin: 0;
	text-align: center;
	width: 100%;
}

.mega-solutions-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.mega-persona-card {
	flex: 1 1 calc(25% - 9px);
	min-width: 180px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: var(--persona-color, var(--color-primary));
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mega-persona-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--persona-gradient, var(--gradient-cta));
}

.mega-persona-card:hover {
	box-shadow: 0 8px 24px rgba(3, 2, 19, 0.10);
	transform: translateY(-2px);
}

.mega-persona-card__image {
	margin: -20px -20px 12px -20px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 11px 11px 0 0;
}

.mega-persona-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.mega-persona-card:hover .mega-persona-card__image img {
	transform: scale(1.05);
}

.mega-persona-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	flex-shrink: 0;
}

.mega-persona-card__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mega-persona-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mega-persona-card__title {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	display: block;
}

.mega-persona-card__tagline {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	display: block;
}

.mega-persona-card__desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
	display: block;
	margin-top: 4px;
}

.mega-persona-card__arrow {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.75);
	transition: transform 0.15s ease, color 0.15s ease;
	align-self: center;
}

.mega-persona-card:hover .mega-persona-card__arrow {
	transform: translateX(3px);
	color: #fff;
}

.mega-panel__footer {
	display: flex;
	align-items: center;
	padding-top: 4px;
	border-top: 1px solid var(--color-border);
}

.mega-panel__all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-cta-from);
	transition: gap 0.15s ease;
}

.mega-panel__all-link:hover {
	gap: 10px;
}

/* ==========================================================================
   Resources mega panel
   ========================================================================== */
.mega-panel--resources .mega-panel__inner {
	align-items: flex-start;
	gap: 48px;
}

.mega-resources-links {
	flex: 1;
}

.mega-resources__heading {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted, #9CA3AF);
	margin: 0 0 10px;
}

.mega-resources__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: flex-start;
}

.mega-resources__heading--types {
	margin-top: 0;
}

.mega-resources__list,
.mega-resources__type-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mega-resources__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.mega-resource-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	transition: background-color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	width: 100%;
}

.mega-resource-link:hover {
	background-color: var(--card-color-pale, var(--color-bg-alt));
	border-color: var(--card-color-pale, var(--color-border));
}

/* Resource link color schemes — hover backgrounds */
.mega-resource-link.scheme-blue    { --card-color-pale: #EFF6FF; --card-color: #2563EB; }
.mega-resource-link.scheme-purple  { --card-color-pale: #F5F3FF; --card-color: #9333EA; }
.mega-resource-link.scheme-green   { --card-color-pale: #ECFDF5; --card-color: #059669; }
.mega-resource-link.scheme-orange  { --card-color-pale: #FFF7ED; --card-color: #EA580C; }
.mega-resource-link.scheme-lime    { --card-color-pale: #F0FDF4; --card-color: #16A34A; }
.mega-resource-link.scheme-amber   { --card-color-pale: #FFFBEB; --card-color: #D97706; }
.mega-resource-link.scheme-cyan    { --card-color-pale: #ECFEFF; --card-color: #0891B2; }
.mega-resource-link.scheme-red     { --card-color-pale: #FEF2F2; --card-color: #DC2626; }

.mega-resource-link__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, #2563EB, #1D4ED8);
	transition: opacity 0.15s ease;
}

.mega-resource-link__icon svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.75;
}

.mega-resource-link:hover .mega-resource-link__icon {
	opacity: 0.85;
}

/* Resource link icon color schemes */
.mega-resource-link.scheme-blue    .mega-resource-link__icon { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.mega-resource-link.scheme-purple  .mega-resource-link__icon { background: linear-gradient(135deg, #9333EA, #7C3AED); }
.mega-resource-link.scheme-green   .mega-resource-link__icon { background: linear-gradient(135deg, #059669, #047857); }
.mega-resource-link.scheme-orange  .mega-resource-link__icon { background: linear-gradient(135deg, #EA580C, #C2410C); }
.mega-resource-link.scheme-lime    .mega-resource-link__icon { background: linear-gradient(135deg, #16A34A, #15803D); }
.mega-resource-link.scheme-amber   .mega-resource-link__icon { background: linear-gradient(135deg, #D97706, #B45309); }
.mega-resource-link.scheme-cyan    .mega-resource-link__icon { background: linear-gradient(135deg, #0891B2, #0E7490); }
.mega-resource-link.scheme-red     .mega-resource-link__icon { background: linear-gradient(135deg, #DC2626, #B91C1C); }

.mega-resource-link__text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.mega-resource-link__arrow {
	flex-shrink: 0;
	color: var(--card-color, var(--color-text-muted, #9CA3AF));
	transition: transform 0.15s ease, color 0.15s ease;
	align-self: center;
}

.mega-resource-link:hover .mega-resource-link__arrow {
	transform: translateX(3px);
	color: var(--card-color, var(--color-cta-from));
}

.mega-resource-link__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.3;
}

.mega-resource-link__desc {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-text-muted, #9CA3AF);
	line-height: 1.4;
}

.mega-resource-type-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--badge-color, var(--color-text-secondary, #374151));
	transition: background-color 0.15s ease, color 0.15s ease;
	text-decoration: none;
}

.mega-resource-type-link__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.mega-resource-type-link:hover {
	background-color: var(--color-bg-alt);
}

/* Scheme badge-color for resource type links */
.mega-resource-type-link.scheme-blue   { --badge-color: #2563EB; }
.mega-resource-type-link.scheme-purple { --badge-color: #7c3aed; }
.mega-resource-type-link.scheme-green  { --badge-color: #16a34a; }
.mega-resource-type-link.scheme-orange { --badge-color: #ea580c; }
.mega-resource-type-link.scheme-cyan   { --badge-color: #0891b2; }
.mega-resource-type-link.scheme-red    { --badge-color: #dc2626; }
.mega-resource-type-link.scheme-lime   { --badge-color: #16A34A; }
.mega-resource-type-link.scheme-amber  { --badge-color: #D97706; }

.mega-resources-featured {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mega-featured-card {
	background: linear-gradient(135deg, #FAF5FF, #FDF2F8);
	border: 1px solid #E9D5FF;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mega-featured-card__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 99px;
	background: var(--gradient-cta);
	color: #fff;
	width: fit-content;
}

.mega-featured-card__title {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.4;
	margin: 0;
}

.mega-featured-card__text {
	font-size: 13px;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.5;
	margin: 0;
}

.mega-featured-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-cta-from);
	transition: gap 0.15s ease;
	text-decoration: none;
}

.mega-featured-card__link:hover {
	gap: 10px;
}

.mega-newsletter {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mega-newsletter__text {
	font-size: 13px;
	color: var(--color-text-muted, #6B7280);
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   About Us mega panel
   ========================================================================== */
.mega-panel--about .mega-panel__inner {
	display: block;
}

.mega-about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

/* Featured gradient card (first column) */
.mega-about-featured {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--gradient-cta);
	color: #fff;
	border-radius: var(--radius, 12px);
	padding: 24px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: opacity 0.2s ease;
}

.mega-about-featured:hover {
	opacity: 0.9;
}

.mega-about-featured__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 4px;
}

.mega-about-featured__desc {
	display: block;
	font-size: 13px;
	opacity: 0.85;
	margin-bottom: 16px;
}

.mega-about-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	transition: gap 0.2s ease;
}

.mega-about-featured:hover .mega-about-featured__cta {
	gap: 10px;
}

/* Regular about cards */
.mega-about-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	background: none;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	width: 100%;
	text-align: left;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mega-about-card:hover {
	background-color: var(--card-color-pale, var(--color-bg-alt));
	border-color: var(--card-color-pale, var(--color-border));
}

.mega-about-card.scheme-blue    { --card-color-pale: #EFF6FF; }
.mega-about-card.scheme-purple  { --card-color-pale: #F5F3FF; }
.mega-about-card.scheme-green   { --card-color-pale: #ECFDF5; }
.mega-about-card.scheme-orange  { --card-color-pale: #FFF7ED; }
.mega-about-card.scheme-lime    { --card-color-pale: #F0FDF4; }
.mega-about-card.scheme-amber   { --card-color-pale: #FFFBEB; }
.mega-about-card.scheme-cyan    { --card-color-pale: #ECFEFF; }
.mega-about-card.scheme-red     { --card-color-pale: #FEF2F2; }

.mega-about-card__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(135deg, #2563EB, #1D4ED8);
	transition: opacity 0.15s ease;
}

.mega-about-card:hover .mega-about-card__icon {
	opacity: 0.85;
}

.mega-about-card__icon i,
.mega-about-card__icon svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.75;
}

/* About card icon color schemes */
.mega-about-card__icon.scheme-blue   { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.mega-about-card__icon.scheme-purple { background: linear-gradient(135deg, #9333EA, #7C3AED); }
.mega-about-card__icon.scheme-green  { background: linear-gradient(135deg, #059669, #047857); }
.mega-about-card__icon.scheme-orange { background: linear-gradient(135deg, #EA580C, #C2410C); }
.mega-about-card__icon.scheme-cyan   { background: linear-gradient(135deg, #0891B2, #0E7490); }
.mega-about-card__icon.scheme-lime   { background: linear-gradient(135deg, #16A34A, #15803D); }
.mega-about-card__icon.scheme-amber  { background: linear-gradient(135deg, #D97706, #B45309); }
.mega-about-card__icon.scheme-red    { background: linear-gradient(135deg, #DC2626, #B91C1C); }

.mega-about-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.mega-about-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.3;
}

.mega-about-card__desc {
	font-size: 12px;
	font-weight: 400;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.4;
	margin-top: 2px;
}

/* ==========================================================================
   Header actions
   ========================================================================== */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-md, 12px);
	flex: 0 0 auto;
}

.header-signin {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary, #374151);
}

.header-secondary-cta {
	font-size: 14px;
}

.header-cta {
	font-size: 14px;
}

.btn-ghost {
	background: transparent;
	color: var(--color-text-secondary, #374151);
	border: 1px solid transparent;
}

.btn-ghost:hover {
	background: var(--color-bg-alt);
	color: var(--color-primary);
}

.btn-outline {
	background: transparent;
	color: var(--color-cta-from);
	border: 1.5px solid var(--color-cta-from);
}

.btn-outline:hover {
	background: var(--color-cta-from);
	color: #fff;
}

/* ---- Hamburger toggle ---- */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
	gap: 5px;
	border-radius: 6px;
}

.nav-toggle:hover {
	background-color: var(--color-bg-alt);
}

.nav-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-primary);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   Responsive — tablet & mobile nav
   ========================================================================== */
@media (max-width: 1024px) {
	.mega-solutions-grid {
		/* 2 cards per row on tablet */
		gap: 10px;
	}

	.mega-persona-card {
		flex: 1 1 calc(50% - 5px);
	}

	.mega-panel__grid {
		grid-template-columns: 1fr;
	}
}

/* Hidden on desktop — shown inside mobile drawer */
.mobile-nav-actions {
	display: none;
}

@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
	}

	.site-nav {
		position: fixed;
		top: 68px;
		left: 0;
		right: 0;
		height: calc(100vh - 68px);
		background: #fff;
		z-index: 9999;
		overflow-y: auto;
		padding: 16px;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
	}

	.site-nav.is-open {
		transform: translateX(0);
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.nav-menu > li {
		width: 100%;
		border-bottom: 1px solid var(--color-border);
	}

	.nav-menu > li:last-child {
		border-bottom: none;
	}

	.nav-menu > li > .nav-link {
		width: 100%;
		padding: 14px 8px;
		font-size: 16px;
		justify-content: space-between;
	}

	/* Mobile mega panels — stack below trigger */
	.mega-panel {
		position: static;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--color-border);
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		display: none;
	}

	.has-mega-menu.is-open > .mega-panel {
		display: block;
	}

	.mega-panel__inner {
		flex-direction: column;
		gap: 16px;
		padding: 16px 8px;
	}

	.mega-panel__grid {
		grid-template-columns: 1fr;
	}

	.mega-solutions-grid {
		gap: 8px;
	}

	.mega-persona-card {
		flex: 1 1 100%;
	}
	.mega-resources__columns {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mega-resources__list {
		grid-template-columns: 1fr;
	}

	.mega-resources-featured {
		display: flex;
	}

	.mega-about-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.mega-about-featured {
		grid-column: 1 / -1;
	}

	.mega-overlay {
		display: none;
	}

	.header-signin,
	.header-cta,
	.header-secondary-cta {
		display: none;
	}

	/* ── Mobile nav actions ───────────────────────────────── */
	.mobile-nav-actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		padding-top: 20px;
	}

	.mobile-nav-actions .btn {
		width: 100%;
		justify-content: center;
		font-size: 16px;
		padding: 14px 24px;
	}
}

/* Sections */
.section {
	padding: var(--spacing-2xl) 0;
}

@media (max-width: 768px) {
	.section {
		padding: var(--spacing-xl) 0;
	}
}

/* Footer */
.site-footer {
	background-color: var(--color-bg-dark);
	color: #fff;
	padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

.footer-content {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	width:100%;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-2xl) var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.footer-heading {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin-bottom: var(--spacing-md);
}

.footer-menu {
	list-style: none;
}

.footer-menu li {
	margin-bottom: 10px;
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	transition: color 0.2s ease;
}

.footer-menu a:hover {
	color: #fff;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: var(--spacing-lg);
	text-align: center;
}

.footer-copyright {
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	margin-bottom: 12px;
}

.footer-legal {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	font-size: 13px;
}

.footer-legal a,
.footer-legal__btn {
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.2s ease;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.footer-legal a:hover,
.footer-legal__btn:hover {
	color: #fff;
}

.footer-legal__sep {
	color: rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
	.footer-columns {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Layout: Hero */
/* ── Hero Layout ─────────────────────────────────────────────────────────── */

.layout-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: #030213;
}

/* Height modifiers */
.layout-hero--height-large {
	min-height: 80vh;
}

.layout-hero--height-full {
	min-height: 100vh;
}

.layout-hero--height-large .hero-slide,
.layout-hero--height-full .hero-slide {
	min-height: inherit;
}

.hero-slider {
	width: 100%;
}

.hero-slide {
	position: relative;
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(3, 2, 19, 0.72) 0%, rgba(192, 38, 211, 0.25) 100%);
	z-index: 1;
}

/* Inner flex row: content + optional secondary */
.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 120px var(--container-padding) 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-lg);
}

/* ── Alignment modifiers ─────────────────────────────────── */
/* Left (default) — no changes needed */

/* Center */
.layout-hero--align-center .hero-inner {
	flex-direction: column;
	text-align: center;
}
.layout-hero--align-center .hero-content {
	max-width: 720px;
}
.layout-hero--align-center .hero-eyebrow {
	margin-left: auto;
	margin-right: auto;
}
.layout-hero--align-center .hero-buttons {
	justify-content: center;
}
.layout-hero--align-center .hero-secondary {
	width: 100%;
	max-width: 560px;
}

/* Right */
.layout-hero--align-right .hero-inner {
	flex-direction: row-reverse;
}

/* When no secondary content, let content stretch */
.layout-hero:not(.layout-hero--has-secondary) .hero-content {
	max-width: 720px;
}
.layout-hero--align-center:not(.layout-hero--has-secondary) .hero-content {
	max-width: 800px;
}

.hero-content {
	flex: 1 1 auto;
	max-width: 580px;
	color: white;
}

.hero-eyebrow {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: var(--spacing-lg);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hero-headline {
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 400;
	line-height: 1.08;
	margin-bottom: var(--spacing-md);
	color: white;
	letter-spacing: -0.02em;
}

.hero-subheading {
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.6;
	margin-bottom: var(--spacing-xl);
	color: rgba(255, 255, 255, 0.85);
}

.hero-buttons {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	align-items: center;
}

.hero-buttons .btn-secondary {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.6);

}
.hero-buttons .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.8);
}

/* ── Hero Secondary Content ──────────────────────────────────────────────── */

.hero-secondary {
	flex: 0 0 auto;
    width: auto;
}

.hero-callout-block {
	align-self: flex-end;
}

.hero-callout-block--stacked {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Entire card is an <a> or <div> — flush image + overflow hidden */
.hero-callout-card {
	display: flex;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.hero-callout-card:hover {
	box-shadow: 0 28px 56px rgba(0, 0, 0, 0.38);
	transform: translateY(-2px);
}

/* Left 1/3 — image bleeds full height, no gap */
.hero-callout-thumb {
	flex: 0 0 33.333%;
	width: 33.333%;
	background-color: #fdf4ff;
	overflow: hidden;
}

.hero-callout-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Right 2/3 — body */
.hero-callout-body {
	flex: 1;
	min-width: 0;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

.hero-callout-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #C026D3;
	margin: 0;
	line-height: 1.2;
}

.hero-callout-content {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #111827;
	margin: 0;
}

/* Badge-style CTA — rounded-md, not pill */
.hero-callout-btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-size: 12px;
	font-weight: 600;
	color: white;
	background: linear-gradient(to right, #C026D3, #db2777);
	padding: 6px 12px;
	border-radius: 6px;
	margin-top: 4px;
	line-height: 1;
}

/* ── Callout card — secondary (vibrant purple gradient) ─────────────────── */
.hero-callout-card--secondary {
	background: linear-gradient(135deg, #9333EA, #C026D3);
	color: #ffffff;
}

.hero-callout-card--secondary .hero-callout-thumb {
	background-color: rgba(0, 0, 0, 0.15);
}

.hero-callout-card--secondary .hero-callout-eyebrow {
	color: rgba(255, 255, 255, 0.75);
}

.hero-callout-card--secondary .hero-callout-content {
	color: #ffffff;
}

.hero-callout-card--secondary .hero-callout-btn {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

a.hero-callout-card--secondary:hover .hero-callout-btn {
	background: rgba(255, 255, 255, 0.3);
}

/* ── Hero Video Block ────────────────────────────────────────────────────── */

.hero-video-block {
	width: 100%;
}

.hero-video-trigger {
	position: relative;
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	background: none;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	background-color: rgba(0, 0, 0, 0.3);
}

.hero-video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-video-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.hero-video-trigger:hover .hero-video-play {
	transform: scale(1.1);
}

/* ── Hero Shortcode Block ────────────────────────────────────────────────── */

.hero-shortcode-block {
	width: 100%;
}


.swiper-pagination-bullet {
	background-color: rgba(255, 255, 255, 0.5);
}

.swiper-pagination-bullet-active {
	background-color: var(--color-brand);
}

.swiper-button-prev,
.swiper-button-next {
	color: white;
}

.swiper-button-prev:after,
.swiper-button-next:after {
	font-size: 20px;
}

/* ── Hero Video Layout ────────────────────────────────────────────────── */

.layout-hero-video {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: #030213;
	overflow: hidden;
	min-height: 600px;
	display: flex;
	align-items: center;
}

/* Height modifiers */
.layout-hero-video--height-large {
	min-height: 80vh;
}

.layout-hero-video--height-full {
	min-height: 100vh;
}

/* Video canvas — fills entire section */
.hero-video-canvas {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero-video-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	pointer-events: none;
	display: none;
}

.hero-video-bg.is-active {
	opacity: 1;
	z-index: 1;
	display: block;
}

.hero-video-bg.is-next {
	z-index: 2;
	display: block;
}

.hero-video-bg.is-next.is-fading {
	opacity: 1;
}

.hero-video-bg.is-active.is-fading {
	opacity: 0;
}

/* Gradient overlay — same as standard hero */
.layout-hero-video > .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(3, 2, 19, 0.72) 0%, rgba(192, 38, 211, 0.25) 100%);
	z-index: 3;
}

/* Content sits above overlay */
.layout-hero-video .hero-inner {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 120px var(--container-padding) 80px;
	display: flex;
	align-items: flex-end;
}

.layout-hero-video .hero-content {
	flex: 1 1 auto;
	max-width: 720px;
	color: white;
}

.layout-hero-video .hero-inner {
	justify-content: space-between;
	gap: var(--spacing-2xl);
}

/* When no secondary content, let content stretch */
.layout-hero-video:not(.layout-hero-video--has-secondary) .hero-content {
	max-width: 720px;
}

.layout-hero-video .hero-secondary {
	flex: 0 0 420px;
	width: 420px;
}

/* ── Alignment modifiers ─────────────────────────────────── */

.layout-hero-video--align-center .hero-inner {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.layout-hero-video--align-center .hero-content {
	max-width: 800px;
}

.layout-hero-video--align-center .hero-eyebrow {
	margin-left: auto;
	margin-right: auto;
}

.layout-hero-video--align-center .hero-buttons {
	justify-content: center;
}

.layout-hero-video--align-center .hero-secondary {
	width: 100%;
	max-width: 560px;
}

.layout-hero-video--align-right .hero-inner {
	flex-direction: row-reverse;
}

/* Layout: Feature Slider */
.layout-feature-slider {
	background: var(--color-bg-alt, #F3F3F5);
	padding: var(--spacing-xl) 0;
}

.layout-feature-slider .container {
	padding: 0 var(--container-padding);
	max-width: 90vw !important;

}

/* Header */
.fs-header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.fs-header__title {
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	margin-bottom: var(--spacing-sm);
}

.fs-header__sub {
	font-size: 18px;
	color: var(--color-text-muted);
	max-width: 640px;
	margin: 0 auto;
}

/* Tab navigation */
.fs-tabs {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--spacing-2xl);
	padding: 12px var(--spacing-md);
	position: sticky;
	top: 68px;
	z-index: 100;
	background: var(--color-bg-alt, #F3F3F5);
}

.fs-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 2px solid var(--color-border, #E5E5E5);
	border-radius: 999px;
	background: #fff;
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.fs-tab__icon {
	display: flex;
	width: 20px;
	height: 20px;
}

.fs-tab__icon svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
}

.fs-tab:hover {
	border-color: var(--tab-color);
	color: var(--tab-color);
}

.fs-tab.is-active {
	background: var(--tab-gradient);
	border-color: transparent;
	color: #fff;
}

/* Panels */
.fs-panels {
	position: relative;
}

.fs-panel {
	display: none;
	animation: fsPanelIn 0.35s ease;
}

.fs-panel.is-active {
	display: block;
}

@keyframes fsPanelIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Feature intro */
.fs-intro {
	text-align: center;
	margin-bottom: var(--spacing-xl);
}

.fs-intro__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--spacing-xs);
}

.fs-intro__title {
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 700;
	margin-bottom: var(--spacing-sm);
}

.fs-intro__desc {
	color: var(--color-text-muted);
	max-width: 640px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
}

/* Content blocks (Challenge / Helps) */
.fs-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	max-width: 960px;
	margin-inline: auto;
	width: 100%;
}

.fs-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-xl);
	align-items: center;
	background: #fff;
	border-radius: var(--radius);
	padding: var(--spacing-xl);
	box-shadow: 0 2px 12px rgba(3, 2, 19, 0.05);
}

/* Challenge: full-width callout card */
.fs-block--challenge {
	grid-template-columns: auto 1fr;
	gap: var(--spacing-lg);
	background: linear-gradient(135deg, color-mix(in srgb, var(--feature-color) 8%, white) 0%, color-mix(in srgb, var(--feature-color) 18%, white) 100%);
	border: 1px solid color-mix(in srgb, var(--feature-color) 25%, transparent);
	padding: var(--spacing-lg) var(--spacing-xl);
}

.fs-block--challenge__icon {
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--feature-color) 25%, transparent);
	flex-shrink: 0;
}

.fs-block--challenge__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--feature-color);
}

.fs-block--challenge .fs-block__heading {
	/* color: #92400E; */
	margin-bottom: var(--spacing-xs);
}

.fs-block--challenge .fs-block__body {
	color: color-mix(in srgb, var(--feature-color) 70%, #1a1a2e);
}

/* Alternate layout: swap text/image sides */
.fs-panel--alt .fs-block--helps .fs-block__media { order: -1; }

/* Block headings */
.fs-block__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: var(--spacing-md);
	color: var(--feature-color);
}

.fs-block__heading svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.fs-block__body {
	color: var(--color-text-muted);
	line-height: 1.7;
	font-size: 15px;
}

.fs-block__body p:last-child {
	margin-bottom: 0;
}

/* Block media / images */
.fs-block__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fs-block__media img {
	width: 100%;
	max-width: 480px;
	height: auto;
	border-radius: var(--radius);
}

.fs-block__media--screenshot img {
	box-shadow: 0 10px 40px rgba(3, 2, 19, 0.10);
}

/* Bullet points */
.fs-bullets {
	list-style: none;
	padding: 0;
	margin: var(--spacing-lg) 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fs-bullet {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

.fs-bullet svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* CTA button */
.fs-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--spacing-lg);
	padding: 12px 28px;
	border: none;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.fs-cta:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	color: #fff;
}

.fs-cta svg {
	width: 18px;
	height: 18px;
}

/* Responsive */
@media (max-width: 768px) {
	.fs-tabs {
		gap: 4px;
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--spacing-sm);
	}

	.fs-tab {
		padding: 8px 14px;
		font-size: 13px;
	}

	.fs-block {
		grid-template-columns: 1fr;
		padding: var(--spacing-lg);
	}

	.fs-block--challenge {
		grid-template-columns: auto 1fr;
	}

	.fs-panel--alt .fs-block--helps .fs-block__media {
		order: 0;
	}
}

/* Layout: Workflow Demo */
.layout-workflow-demo .container {
	padding: 0 var(--container-padding);
}

.workflow-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2xl);
	align-items: center;
}

@media (max-width: 768px) {
	.workflow-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}
}

.workflow-title {
	margin-bottom: var(--spacing-lg);
}

.workflow-description {
	color: var(--color-text-muted);
	font-size: 18px;
	margin-bottom: var(--spacing-xl);
}

.workflow-steps {
	list-style: none;
}

.workflow-step {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-md) var(--spacing-lg);
	background: #fff;
	border: 1px solid var(--color-border);
	border-left: 4px solid transparent;
	border-image: var(--gradient-cta) 1;
	border-radius: var(--radius-sm);
	box-shadow: 0 2px 8px rgba(3, 2, 19, 0.04);
	transition: box-shadow 0.2s ease;
}

.workflow-step:hover {
	box-shadow: 0 6px 20px rgba(192, 38, 211, 0.10);
}

.workflow-step::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gradient-cta);
	flex-shrink: 0;
	margin-top: 8px;
}

.workflow-screenshot {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ── Shortcode: Workflow Demo ─────────────────────────────── */
.wfd {
	position: relative;
	--wfd-color: #22d3ee;
}

.wfd__stage-wrap {
	position: relative;
	padding: 0 4.5rem;
}

.wfd__side-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.85), rgba(17, 24, 39, 0.9));
	border: 2px solid rgba(255, 255, 255, 0.15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: border-color 0.2s, opacity 0.2s;
	padding: 0;
	color: #fff;
}

.wfd__side-arrow--prev { left: 0; }
.wfd__side-arrow--next { right: 0; }

.wfd__side-arrow:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.wfd__side-arrow svg {
	width: 1.25rem;
	height: 1.25rem;
}

.wfd__side-arrow--hidden {
	opacity: 0;
	pointer-events: none;
}

.wfd__stage {
	position: relative;
	background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.85), rgba(17, 24, 39, 0.9));
	border-radius: var(--radius);
	border: 2px solid rgba(255, 255, 255, 0.15);
	padding: 4rem 2rem;
	overflow: hidden;
	transition: transform 0.2s ease-out;
}

/* Animated glow that moves around the container */
.wfd__bg-gradient {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, var(--wfd-color) 0%, transparent 50%);
	opacity: 0.15;
	animation: wfd-glow 8s ease-in-out infinite;
	pointer-events: none;
}

@keyframes wfd-glow {
	0%, 100% { transform: translate(-25%, -25%); }
	25%      { transform: translate(25%, 25%); }
	50%      { transform: translate(-25%, 25%); }
	75%      { transform: translate(25%, -25%); }
}

/* Panels stack on same grid cell — only active one visible */
.wfd__panels {
	position: relative;
	display: grid;
	min-height: 280px;
	align-items: center;
	z-index: 1;
}

.wfd__panel {
	grid-area: 1 / 1;
	text-align: center;
	opacity: 0;
	transform: scale(0.85) translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.wfd__panel--active {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
	z-index: 1;
}

/* Main icon */
.wfd__icon {
	margin-bottom: 1.5rem;
	color: var(--wfd-color);
}

.wfd__icon svg {
	width: 5rem;
	height: 5rem;
	margin: 0 auto;
	stroke-width: 1.5;
}

/* Title + description */
.wfd__title {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.wfd__desc {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9375rem;
	margin-bottom: 2rem;
}

/* Action pills row */
.wfd__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	max-width: 32rem;
	margin: 0 auto;
}

.wfd__action {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
	padding: 0.25rem 0.5rem;
}

.wfd__action svg {
	width: 1rem;
	height: 1rem;
	color: var(--wfd-color);
}

/* SVG decorative line */
.wfd__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.08;
	color: var(--wfd-color);
}

.wfd__line-path {
	stroke-dasharray: 300;
	stroke-dashoffset: 300;
	animation: wfd-line-draw 3s linear infinite;
}

@keyframes wfd-line-draw {
	to { stroke-dashoffset: 0; }
}

/* Progress dots */
.wfd__dots {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1rem;
	position: relative;
	z-index: 20;
	background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.85), rgba(17, 24, 39, 0.9));
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	padding: 0.5rem 1rem;
	align-self: center;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.wfd__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.wfd__dot:hover {
	background: rgba(255, 255, 255, 0.6);
}

.wfd__dot--active {
	width: 2rem;
	background: #fff;
}

/* Mouse-following tooltip */
.wfd__tooltip {
	position: fixed;
	pointer-events: none;
	z-index: 100;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wfd__tooltip--visible {
	opacity: 1;
	transform: scale(1);
}

.wfd__tooltip-inner {
	background: rgba(17, 24, 39, 0.95);
	color: #fff;
	padding: 1rem;
	border-radius: 0.5rem;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.2);
	max-width: 20rem;
}

.wfd__tooltip-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.wfd__tooltip-badge {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.wfd__tooltip-name {
	font-weight: 600;
	font-size: 0.875rem;
}

.wfd__tooltip-desc {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
}

.wfd__tooltip-cta {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 480px) {
	.wfd__stage {
		padding: 3rem 1rem;
	}
	.wfd__icon svg {
		width: 3.5rem;
		height: 3.5rem;
	}
	.wfd__title {
		font-size: 1.25rem;
	}
	.wfd__panels {
		min-height: 240px;
	}
}

/* ── Shortcode: Implementation Demo ──────────────────────── */
.impd {
	--impd-color: #22d3ee;
}

/* Step Header */
.impd__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.impd__step-badge {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.impd__step-badge svg {
	width: 1.5rem;
	height: 1.5rem;
}

.impd__step-count {
	font-size: 0.875rem;
	font-weight: 600;
}

.impd__step-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0;
	margin-top: 0 !important
}

.impd__step-desc {
	color: #4b5563;
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

/* Browser Chrome */
.impd__screen-wrap {
	position: relative;
	padding: 0 4.5rem;
}

.impd__side-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #e5e7eb;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: background 0.2s, border-color 0.2s, opacity 0.2s;
	padding: 0;
}

.impd__side-arrow--prev { left: 0; }
.impd__side-arrow--next { right: 0; }

.impd__side-arrow:hover {
	background: #fff;
	border-color: var(--impd-color);
}

.impd__side-arrow svg {
	width: 1.25rem;
	height: 1.25rem;
	color: #374151;
}

.impd__side-arrow--hidden {
	opacity: 0;
	pointer-events: none;
}

.impd__screen {
	border-radius: 0.75rem;
	border: 2px solid #e5e7eb;
	overflow: hidden;
	background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.impd__chrome {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.impd__chrome-dots {
	display: flex;
	gap: 0.375rem;
}

.impd__chrome-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
}

.impd__chrome-dot--red    { background: #f87171; }
.impd__chrome-dot--yellow { background: #fbbf24; }
.impd__chrome-dot--green  { background: #4ade80; }

.impd__chrome-url {
	flex: 1;
	background: #f3f4f6;
	border-radius: 0.25rem;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	color: #6b7280;
	margin-left: 1rem;
}
.impd__chrome-url span {
	filter: blur(3px);
}

/* Viewport + Slides */
.impd__viewport {
	position: relative;
	aspect-ratio: 16 / 8;
	background: #fff;
	display: grid;
}

.impd__slide {
	grid-area: 1 / 1;
	position: relative;
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.impd__slide--active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* Positioned elements */
.impd__el {
	position: absolute;
	opacity: 0;
}

.impd__slide--active .impd__el {
	animation: impd-el-in 0.4s ease var(--delay, 0ms) both;
}

@keyframes impd-el-in {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Input elements */
.impd__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 500;
	color: #374151;
	margin-bottom: 0.2rem;
}

.impd__input-bar {
	border-radius: 0.5rem;
	border: 2px solid #e5e7eb;
	padding: 0.375rem 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: border-color 0.2s;
}

.impd__input-bar svg {
	width: 1rem;
	height: 1rem;
	color: #6b7280;
	flex-shrink: 0;
}

.impd__input-fill {
	height: 0.5rem;
	background: #d1d5db;
	border-radius: 0.25rem;
	width: 75%;
}

/* Photo card */
.impd__photo-card {
	width: 100%;
	height: calc(100% - 1.25rem);
	border-radius: 0.5rem;
	border: 2px solid #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.impd__photo-circle {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #2563eb;
	display: flex;
	align-items: center;
	justify-content: center;
}

.impd__photo-circle svg {
	width: 1.5rem;
	height: 1.5rem;
	color: #fff;
}

/* Colors card */
.impd__colors-card {
	width: 100%;
	height: calc(100% - 1.25rem);
	border-radius: 0.5rem;
	border: 2px solid #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
}

.impd__color-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.25rem;
}

.impd__swatch {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	border: 1px solid #d1d5db;
	transition: transform 0.15s;
}

.impd__swatch:hover {
	transform: scale(1.2);
}

/* Buttons */
.impd__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s;
}

.impd__btn:hover {
	transform: scale(1.05);
}

.impd__btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Cursor */
.impd__el--cursor {
	z-index: 10;
	pointer-events: none;
}

.impd__el--cursor svg {
	width: 2rem;
	height: 2rem;
	color: #111827;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.impd__slide--active .impd__el--cursor svg {
	animation: impd-cursor-click 1.5s ease infinite;
}

@keyframes impd-cursor-click {
	0%, 50%, 100% { transform: scale(1); }
	60% { transform: scale(0.8); }
}

/* Tiles */
.impd__tile {
	width: 100%;
	height: 100%;
	border-radius: 0.75rem;
	border: 2px solid #e5e7eb;
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s, box-shadow 0.2s;
}

.impd__tile:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.impd__tile svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--slide-color);
}

.impd__tile-label {
	font-size: 0.625rem;
	font-weight: 600;
	color: #374151;
	text-align: center;
	line-height: 1.3;
}

.impd__tile-bars {
	display: flex;
	gap: 0.125rem;
	align-items: flex-end;
	margin-top: 0.25rem;
}

.impd__tile-bar {
	width: 0.25rem;
	height: 1rem;
	border-radius: 9999px;
	background: #e5e7eb;
}

.impd__tile-bar--filled {
	background: #34d399;
}

/* Score Entry modal */
.impd__el--score-entry {
	z-index: 5;
}

.impd__score-modal {
	width: 100%;
	height: 100%;
	background: #dbeafe;
	border-radius: 0.75rem;
	border: 4px solid #2563eb;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	transform: scale(0);
	opacity: 0;
}

.impd__slide--active .impd__score-modal {
	animation: impd-score-pop 0.5s ease 1.5s both;
}

@keyframes impd-score-pop {
	from { transform: scale(0); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

.impd__score-header {
	background: #2563eb;
	color: #fff;
	padding: 0.5rem 0.75rem;
	font-weight: 700;
	font-size: 0.75rem;
}

.impd__score-body {
	padding: 0.5rem 0.75rem;
	background: #fff;
	height: calc(100% - 2rem);
	display: flex;
	flex-direction: column;
}

.impd__score-prompt {
	font-size: 0.625rem;
	color: #374151;
	margin-bottom: 0.375rem;
}

.impd__score-input {
	width: 100%;
	border: 2px solid #d1d5db;
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.625rem;
	color: #9ca3af;
	margin-bottom: 0.375rem;
}

.impd__score-btn {
	display: block;
	width: 100%;
	background: #6b7280;
	color: #fff;
	text-align: center;
	padding: 0.375rem;
	border-radius: 0.25rem;
	font-size: 0.625rem;
	font-weight: 600;
}

.impd__score-goal {
	font-size: 0.5rem;
	color: #4b5563;
	line-height: 1.4;
	margin-top: 0.375rem;
	flex: 1;
}

.impd__score-footer {
	display: flex;
	justify-content: space-between;
	font-size: 0.5rem;
	color: #4b5563;
}

/* Chart */
.impd__chart {
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
	border: 2px solid #e5e7eb;
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
}

.impd__chart-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.5rem;
}

.impd__chart-bars {
	flex: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.25rem;
}

.impd__chart-bar {
	flex: 1;
	border-radius: 0.25rem 0.25rem 0 0;
	background-color: var(--slide-color);
	height: 0;
}

.impd__slide--active .impd__chart-bar {
	animation: impd-bar-grow 0.6s ease var(--bar-delay, 0ms) both;
}

@keyframes impd-bar-grow {
	from { height: 0; }
	to   { height: var(--bar-h); }
}

/* Text block */
.impd__text-block {
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
	border: 2px solid #e5e7eb;
	padding: 0.75rem;
}

.impd__text-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.5rem;
}

.impd__text-lines {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.impd__text-lines span {
	display: block;
	height: 0.5rem;
	background: #d1d5db;
	border-radius: 0.25rem;
}

/* Step Navigation */
.impd__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.impd__step-btns {
	display: flex;
	gap: 0.5rem;
}

.impd__step-btn {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.5rem;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s, box-shadow 0.2s;
	padding: 0;
}

.impd__step-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--step-color);
}

.impd__step-btn:hover {
	opacity: 0.75;
}

.impd__step-btn--active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--step-color), 0 0 0 4px #fff;
}

.impd__step-btn-tip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0.5rem;
	padding: 0.25rem 0.5rem;
	background: #111827;
	color: #fff;
	font-size: 0.75rem;
	border-radius: 0.25rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

.impd__step-btn:hover .impd__step-btn-tip {
	opacity: 1;
}

.impd__arrows {
	display: flex;
	gap: 0.5rem;
}

.impd__arrow {
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	border: 2px solid #e5e7eb;
	background: #fff;
	color: #374151;
	transition: background 0.2s, border-color 0.2s;
}

.impd__arrow:hover {
	background: #f9fafb;
}

.impd__arrow--next {
	background: var(--color-brand);
	color: #fff;
	border-color: var(--color-brand);
}

.impd__arrow--next:hover {
	background: #be1d68;
	border-color: #be1d68;
}

/* Responsive */
@media (max-width: 640px) {
	.impd__nav {
		flex-direction: column;
		gap: 1rem;
	}
	.impd__step-btns {
		order: 2;
	}
	.impd__arrows {
		order: 1;
	}
	.impd__label,
	.impd__tile-label {
		font-size: 0.5rem;
	}
	.impd__tile svg {
		width: 1rem;
		height: 1rem;
	}
}

/* Implementation Demo: Video Modal */
.impd__btn-video {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	border: 2px solid var(--color-brand);
	background: var(--color-brand);
	color: #fff;
	transition: background 0.2s, border-color 0.2s;
}

.impd__btn-video:hover {
	background: #be1d68;
	border-color: #be1d68;
}

.impd__btn-video svg {
	width: 1.25rem;
	height: 1.25rem;
}

.impd__modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.impd__modal-overlay--active {
	opacity: 1;
	pointer-events: auto;
}

.impd__modal {
	position: relative;
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	max-width: 90vw;
	max-height: 90vh;
	width: 100%;
	overflow: auto;
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.impd__modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	transition: color 0.2s;
	z-index: 10;
}

.impd__modal-close:hover {
	color: #1f2937;
}

.impd__modal-close svg {
	width: 1.5rem;
	height: 1.5rem;
}

.impd__modal-content {
	padding: 3rem 2rem 2rem;
}

.impd__modal-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 1.5rem;
	margin-top: 0;
}

.impd__video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #000;
}

.impd__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0.5rem;
}

@media (max-width: 768px) {
	.impd__modal {
		max-width: 95vw;
		max-height: 95vh;
	}
	
	.impd__modal-content {
		padding: 2rem 1.5rem 1.5rem;
	}
	
	.impd__modal-title {
		font-size: 1.25rem;
	}
	
	.impd__modal-close {
		top: 0.75rem;
		right: 0.75rem;
	}
}

/* Layout: Risk Assessment */
.layout-risk-assessment {
	background-color: var(--color-bg-alt);
}

.layout-risk-assessment .container {
	padding: 0 var(--container-padding);
}

.risk-callout {
	display: flex;
	gap: var(--spacing-2xl);
	align-items: center;
	background-color: white;
	padding: var(--spacing-2xl);
	border-radius: var(--radius);
	border-left: 5px solid #C026D3;
	box-shadow: 0 4px 24px rgba(192, 38, 211, 0.10);
}

@media (max-width: 768px) {
	.risk-callout {
		flex-direction: column;
		text-align: center;
		gap: var(--spacing-xl);
	}
}

.risk-icon {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.risk-icon img {
	width: 100%;
	height: auto;
}

.risk-content {
	flex: 1;
}

.risk-title {
	margin-bottom: var(--spacing-md);
}

.risk-description {
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-lg);
}

/* Layout: Count Up Stats */
.layout-count-up-stats {
	background: linear-gradient(135deg, var(--color-cta-from) 0%, var(--color-cta-to) 100%);
	color: white;
	padding: var(--spacing-xs);
}

.layout-count-up-stats .container {
	padding: 0 var(--container-padding);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--spacing-xl);
	text-align: center;
}

.stat-item {
	padding: var(--spacing-lg);
	/*background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(4px);
	*/
}

.stat-number {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--spacing-sm);
	/*margin-bottom: var(--spacing-md);*/
}

.stat-value {
	font-size: clamp(28px, 6vw, 48px);
	font-weight: 700;
	font-family: var(--font-heading);
}

.stat-prefix,
.stat-suffix {
	font-size: clamp(28px, 6vw, 48px);
	font-weight: 600;
}

.stat-label {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

/* ==========================================================================
   Layout: Testimonials Slider — Synced with React Design System
   ========================================================================== */

.layout-testimonials {
	/* Cyan-to-blue gradient — aligns with React chart colors */
	background: linear-gradient(135deg, var(--chart-2) 0%, var(--chart-3) 100%);
	padding: 72px var(--container-padding);
	text-align: center;
	overflow: hidden;
	position: relative;
}

/* Section heading above the slider */
.testimonials-section-heading {
	color: #fff;
	font-family: var(--font-heading);
}

/* Outer stage holds prev/next buttons + slider */
.testimonials-stage {
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 960px;
	margin: 0 auto;
}

/* Swiper wrapper grows to fill the stage */
.testimonials-slider {
	flex: 1;
	min-width: 0;
	width: 100%;
	overflow: visible;
}

.testimonials-slider .swiper-wrapper {
	padding: 16px 0;
    display: flex;
    align-items: center;
}

.testimonials-slider .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0 !important;
	transition: opacity 0.6s ease;
}

.testimonials-slider .swiper-slide-active {
	opacity: 1 !important;
}

/* ---- Individual slide card ---- */
.testimonial-card,
.swiper-slide > div {
	background: rgba(30, 58, 138, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	padding: 48px 56px;
	text-align: center;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: all var(--transition);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.testimonial-card:hover,
.swiper-slide > div:hover {
	background: rgba(30, 58, 138, 0.95);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.testimonial-card__quote,
blockquote {
	font-size: clamp(26px, 2.4vw, 50px);
	font-weight: 100;
	line-height: 1.4;
	color: #fff;
	margin: 0 0 var(--spacing-xl);
	font-style: normal;
}

.testimonial-card__author,
footer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}

.testimonial-card__name,
footer strong,
footer p:first-of-type {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	font-style: normal;
	display: block;
	margin: 0;
}

.testimonial-card__meta,
footer p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	line-height: 1.4;
}

/* ---- Prev / Next nav buttons ---- */
.testimonials-nav,
.swiper-button-next,
.swiper-button-prev {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--chart-3);
	box-shadow: 0 4px 16px rgba(3, 2, 19, 0.15);
	transition: all 0.2s ease;
	position: static;
	transform: none;
	margin: 0;
	top: auto;
	right: auto;
	left: auto;
}

.testimonials-nav::after,
.swiper-button-next::after,
.swiper-button-prev::after {
	display: none !important;
	content: none !important;
}

.testimonials-nav:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
	background: rgba(255, 255, 255, 0.9);
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(3, 2, 19, 0.2);
}

.testimonials-nav:active,
.swiper-button-next:active,
.swiper-button-prev:active {
	transform: scale(1.02);
}

.testimonials-nav.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
	background: rgba(255, 255, 255, 0.5);
}

.testimonials-nav svg,
.swiper-button-next svg,
.swiper-button-prev svg {
	stroke: currentColor;
	fill: none;
	width: 20px;
	height: 20px;
}

/* ---- Pagination dots ---- */
.testimonials-pagination,
.swiper-pagination {
	margin-top: var(--spacing-lg) !important;
	position: static !important;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.testimonials-pagination .swiper-pagination-bullet,
.swiper-pagination .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	width: 8px;
	height: 8px;
	transition: all 0.2s ease;
	border-radius: 50%;
	cursor: pointer;
}

.testimonials-pagination .swiper-pagination-bullet:hover,
.swiper-pagination .swiper-pagination-bullet:hover {
	background: rgba(255, 255, 255, 0.75);
}

.testimonials-pagination .swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet-active {
	background: #fff;
	width: 24px;
	border-radius: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.layout-testimonials {
		padding: 48px var(--container-padding);
	}

	.testimonials-stage {
		gap: var(--spacing-md);
	}

	.testimonials-nav,
	.swiper-button-next,
	.swiper-button-prev {
		width: 36px;
		height: 36px;
	}

	.testimonial-card,
	.swiper-slide > div {
		padding: 32px 24px;
	}

	.testimonial-card__quote {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.layout-testimonials {
		padding: 32px var(--container-padding);
	}

	.testimonial-card,
	.swiper-slide > div {
		padding: 20px 16px;
	}
}

/* ---- Card Grid variant ---- */
.layout-testimonials--grid .testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 900px;
	margin: 0 auto;
	
}

.layout-testimonials--grid .testimonial-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	padding: 36px 32px;
	background: rgb(30, 58, 138);
}

.layout-testimonials--grid .testimonial-card:hover {
	background: rgb(37, 68, 155);
}

.layout-testimonials--grid .testimonial-card__quote {
	font-size: clamp(16px, 1.4vw, 22px);
	margin: 0 0 var(--spacing-lg);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

.layout-testimonials--grid .testimonial-card__author {
	align-items: flex-start;
}

@media (max-width: 1024px) {
	.layout-testimonials--grid .testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.layout-testimonials--grid .testimonials-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.layout-testimonials--grid .testimonial-card {
		padding: 24px 20px;
	}
}

/* Layout: FAQ */
.layout-faq {
	background-color: var(--color-bg);
	padding: var(--spacing-lg) 0 var(--spacing-xl);
}

.layout-faq .container {
	padding: 0 var(--container-padding);
}

.faq-header {
	text-align: center;
	padding-bottom: var(--spacing-xl);
}

.faq-header__icon {
	display: block;
	width: 80px;
	height: 80px;
	margin: 0 auto var(--spacing-md);
	color: var(--feature-lime-icon, #00c951);
	stroke-width: 2;
	margin-bottom: var(--spacing-xl);
}

.faq-header .eyebrow {
	margin-bottom: var(--spacing-md);
}

.faq-title {
	text-align: center;
	margin-bottom: 0;
}

.faq-accordion {
	max-width: 800px;
	margin: 0 auto;
}

.faq-item {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 0;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.faq-item:first-child {
	border-top: 1px solid var(--color-border);
}

.faq-item:has([aria-expanded="true"]) {
	border-color: rgba(192, 38, 211, 0.30);
}

.faq-question {
	width: 100%;
	padding: var(--spacing-lg) 0;
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text);
	transition: color 0.2s ease;
	text-align: left;
}

.faq-question:hover {
	color: #C026D3;
}

.faq-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-left: var(--spacing-md);
	color: #C026D3;
	transition: transform 0.3s ease;
}

[data-accordion-trigger][aria-expanded="true"] .faq-icon {
	transform: rotate(180deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.faq-answer[data-accordion-content] {
	max-height: 0;
}

.faq-answer-inner {
	padding: 0 0 var(--spacing-lg);
	border-top: none;
	background-color: transparent;
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 16px;
}

/* Layout: Story */
.layout-story {
	background-color: var(--color-bg);
}

.layout-story .container {
	padding: 0 var(--container-padding);
}

.story-title {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2xl);
	align-items: start;
}

/* Image column */
.story-image {
	position: relative;
}

.story-image-frame {
	position: relative;
	border: 3px solid var(--color-brand);
	border-radius: var(--radius);
}

.story-image-frame img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* Floating stat badge — bottom-right of image */
.story-stat-badge {
	position: absolute;
	bottom: 16px;
	right: 16px;
	background: var(--gradient-cta);
	color: white;
	padding: 10px 24px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-family: var(--font-heading);
	box-shadow: 0 8px 24px rgba(192, 38, 211, 0.30);
	text-align: center;
	white-space: nowrap;
	z-index: 1;
}

.story-stat-badge .stat-main {
	display: block;
	font-size: 18px;
	line-height: 1.2;
}

.story-stat-badge .stat-sub {
	display: block;
	font-size: 12px;
	font-weight: 500;
	opacity: 0.9;
	margin-top: 2px;
}

/* Content column */
.story-text {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: clamp(15px, 1.6vw, 16px);
}

.story-text p {
	margin-bottom: 1.25rem;
}

.story-text strong {
	color: var(--color-text);
}

.story-text em {
	font-style: italic;
}

/* Pull-quote block */
.story-quote-block {
	margin-top: var(--spacing-2xl);
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	background: linear-gradient(135deg, #06B6D4 0%, #2563EB 100%);
	border-radius: var(--radius);
	padding: var(--spacing-xl) var(--spacing-lg);
	color: white;
	text-align: center;
}

/*
.story-quote-block::before {
	content: '\201C\201C';
	display: block;
	font-size: 48px;
	font-style: normal;
	line-height: 1;
	margin-bottom: var(--spacing-sm);
	opacity: 0.7;
}
*/
.story-quote-block-quote svg{
	display: block;
	width: 20%;
	max-width: 80px;
	height: auto;
	margin: 0 auto var(--spacing-md);
}

.story-quote-text {
	font-style: italic;
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.7;
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 1rem;
}

.story-quote-attribution {
	margin-top: var(--spacing-md);
	font-weight: 700;
	font-size: 14px;
}

.story-quote-attribution span {
	display: block;
	font-weight: 400;
	opacity: 0.85;
	font-size: 13px;
	margin-top: 2px;
}

/* Team section (below grid) */
.story-team {
	margin-top: var(--spacing-2xl);
}

.story-team h3 {
	margin-bottom: var(--spacing-xl);
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--spacing-xl);
}

.team-member {
	text-align: center;
}

.team-photo {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius);
	object-fit: cover;
	margin-bottom: var(--spacing-md);
}

.team-member h4 {
	margin-bottom: var(--spacing-sm);
}

.team-member p {
	color: var(--color-text-muted);
	font-size: 14px;
	margin: 0;
}

@media (max-width: 768px) {
	.story-grid {
		grid-template-columns: 1fr;
	}
	.story-image {
		max-width: 360px;
		margin: 0 auto;
	}
}

/* Layout: Video */
.layout-video {
	background-color: var(--color-bg-alt);
}

.layout-video .container {
	padding: 0 var(--container-padding);
	max-width: 900px;
}

.video-title {
	text-align: center;
	margin-bottom: var(--spacing-md);
}

.video-description {
	text-align: center;
	color: var(--color-text-muted);
	margin-bottom: var(--spacing-2xl);
}

.video-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: #000;
}

.video-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

.video-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border: none;
	border-radius: 50%;
	background: var(--gradient-cta);
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 32px rgba(192, 38, 211, 0.40);
	transition: var(--transition);
}

.video-play-button:hover {
	background: var(--gradient-cta-hover);
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 12px 40px rgba(192, 38, 211, 0.50);
}

.video-play-button span {
	width: 0;
	height: 0;
	border-left: 25px solid white;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	margin-left: 4px;
}

.video-embed iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.video-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

/* Layout: Quick Quote */
.layout-quick-quote {
	background: var(--gradient-cta);
	color: white;
}

.layout-quick-quote .container {
	padding: 0 var(--container-padding);
	max-width: 600px;
}

.quote-wrapper {
	text-align: center;
}

.quote-title {
	color: white;
	font-size: clamp(22px, 3.5vw, 36px);
	letter-spacing: -0.02em;
	margin-bottom: var(--spacing-md);
}

.quote-description {
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: var(--spacing-xl);
}

.quote-form {
	display: grid;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
}

.form-group {
	display: flex;
	flex-direction: column;
}

.form-group label {
	font-weight: 500;
	margin-bottom: var(--spacing-sm);
	text-align: left;
}

.form-group input {
	padding: 12px 16px;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 16px;
	font-family: var(--font-body);
}

.form-group input::placeholder {
	color: var(--color-text-muted);
}

.quote-form .btn {
	margin-top: var(--spacing-md);
}

/* Layout: Schedule Demo */
.layout-schedule-demo {
	background: linear-gradient(135deg, #0f0126 0%, #1a0042 50%, #030213 100%);
	color: white;
}

.layout-schedule-demo .container {
	padding: 0 var(--container-padding);
	max-width: 800px;
}

.demo-banner {
	text-align: center;
}

.demo-headline {
	color: white;
	font-size: clamp(26px, 4vw, 40px);
	margin-bottom: var(--spacing-md);
	letter-spacing: -0.02em;
}

.demo-subheading {
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	margin-bottom: var(--spacing-xl);
}

.demo-buttons {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	flex-wrap: wrap;
}

/* On dark background, ghost secondary button */
.layout-schedule-demo .btn-secondary {
	border-color: rgba(255, 255, 255, 0.5);
	color: white;
}

.layout-schedule-demo .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: white;
}

/* Layout: Contact */
.layout-contact {
	background-color: var(--color-bg-alt);
}

.layout-contact .container {
	padding: 0 var(--container-padding);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-2xl);
	align-items: start;
}

@media (max-width: 768px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* 1-column stacked & centered layout */
.contact-grid.layout-contact--1col {
	grid-template-columns: 1fr !important;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.layout-contact--1col .contact-info {
	text-align: center;
}

.layout-contact--1col .contact-details {
	align-items: center;
}

.contact-info h2 {
	margin-bottom: var(--spacing-lg);
}

.contact-details {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
	margin-top: var(--spacing-xl);
}

.contact-detail strong {
	display: block;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
}

.contact-detail p {
	color: var(--color-text-muted);
	margin: 0;
}

.contact-form-wrapper {
	background-color: white;
	padding: var(--spacing-2xl);
	border-radius: var(--radius);
}

/* Layout: Partners */
.layout-partners {
	background-color: var(--color-bg-alt);
}

.layout-partners .container {
	padding: 0 var(--container-padding);
	text-align: center;
}

.partners-title {
	margin-bottom: var(--spacing-md);
}

.partners-description {
	color: var(--color-text-muted);
	font-size: 18px;
	margin-bottom: var(--spacing-2xl);
}

.partners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--spacing-2xl);
	align-items: center;
}

.partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}

.partner-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}

.partner-logo:hover img {
	filter: grayscale(0);
}

/* Layout: Resources Grid */
.layout-resources {
	background-color: var(--color-bg);
}

.layout-resources .container {
	padding: 0 var(--container-padding);
}

.resources-title {
	text-align: center;
	margin-bottom: var(--spacing-md);
}

.resources-description {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 18px;
	margin-bottom: var(--spacing-2xl);
}

/* -- Resources background variants -- */
.layout-resources--bg-alt {
	background-color: var(--color-bg-alt);
}

.layout-resources--bg-gradient {
	background: var(--gradient-bg);
}

.layout-resources--bg-dark {
	background-color: var(--color-bg-dark);
}

.layout-resources--bg-dark .resources-title,
.layout-resources--bg-dark .resources-description {
	color: #fff;
}

.layout-resources--bg-dark .resources-description {
	color: rgba(255, 255, 255, 0.7);
}

.read-more:hover {
	color: #A21CAF;
	gap: 10px;
}

/* ── Layout: Personas Grid ───────────────────── */
.layout-personas {
	background-color: var(--color-bg);
}

.layout-personas .container {
	padding: 0 var(--container-padding);
}

.personas-title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.personas-description {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 18px;
}

.personas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-2xl);
}

.persona-card {
	background-color: white;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	position: relative;
}

.persona-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--persona-gradient);
	border-radius: var(--radius) var(--radius) 0 0;
	z-index: 1;
}

.persona-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.persona-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--persona-gradient);
}

.persona-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.persona-card:hover .persona-card__image img {
	transform: scale(1.05);
}

.persona-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.persona-card__image--placeholder i,
.persona-card__image--placeholder svg {
	width: 48px;
	height: 48px;
	color: white;
	opacity: 0.9;
}

.persona-card__content {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.persona-card__title {
	margin-bottom: var(--spacing-md);
	font-size: x-large;
}

.persona-card__desc {
	color: var(--color-text-muted);
	flex: 1;
	margin-bottom: var(--spacing-lg);
	font-size: 0.95rem;
	line-height: 1.6;
}

.read-more:hover::after {
	transform: translateX(2px);
}

/* ── Layout: Editable Grid ───────────────────── */
.layout-editable-grid {
	background-color: var(--color-bg);
}

.editable-grid__title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}

.editable-grid__description {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 18px;
}

.editable-grid {
	display: grid;
	gap: var(--spacing-2xl);
}

.editable-grid--cols-1 .editable-grid { grid-template-columns: 1fr; }
.editable-grid--cols-2 .editable-grid { grid-template-columns: repeat(2, 1fr); }
.editable-grid--cols-3 .editable-grid { grid-template-columns: repeat(3, 1fr); }
.editable-grid--cols-4 .editable-grid { grid-template-columns: repeat(4, 1fr); }
.editable-grid--cols-5 .editable-grid { grid-template-columns: repeat(5, 1fr); }
.editable-grid--cols-6 .editable-grid { grid-template-columns: repeat(6, 1fr); }

.editable-card {
	position: relative;
	background-color: white;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}

.editable-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--card-gradient, var(--gradient-cta));
	border-radius: var(--radius) var(--radius) 0 0;
	z-index: 1;
}

.editable-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.editable-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.editable-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.editable-card:hover .editable-card__media img {
	transform: scale(1.05);
}

.editable-card__media--video {
	cursor: pointer;
}

.editable-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
}

.editable-card__media--video:hover .editable-card__play {
	opacity: 0.85;
}

.editable-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xl) var(--spacing-lg) 0;
}

.editable-card__icon i,
.editable-card__icon svg {
	width: 48px;
	height: 48px;
	color: var(--card-color, var(--color-primary));
	stroke-width: 1.5;
}

.editable-card__content {
	padding: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.editable-card__heading {
	margin-bottom: var(--spacing-md);
	font-size: x-large;
}

.editable-card__desc {
	color: var(--color-text-muted);
	flex: 1;
	margin-bottom: var(--spacing-lg);
	font-size: 0.95rem;
	line-height: 1.6;
}

.editable-card__cta {
	color: var(--card-color, var(--color-primary));
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.editable-card__cta::after {
	content: '→';
	transition: transform 0.2s ease;
}

.editable-card__cta:hover {
	opacity: 0.8;
	gap: 10px;
}

.editable-card__cta:hover::after {
	transform: translateX(2px);
}

/* -- Background variants -- */
.layout-editable-grid--bg-alt {
	background-color: var(--color-bg-alt);
}

.layout-editable-grid--bg-gradient {
	background: var(--gradient-bg);
}

.layout-editable-grid--bg-dark {
	background-color: var(--color-bg-dark);
}

.layout-editable-grid--bg-dark .editable-grid__title,
.layout-editable-grid--bg-dark .editable-grid__description {
	color: #fff;
}

.layout-editable-grid--bg-dark .editable-grid__description {
	color: rgba(255, 255, 255, 0.7);
}

/* -- Card content alignment -- */
.editable-grid--align-center .editable-card__content {
	text-align: center;
	align-items: center;
}

.editable-grid--align-right .editable-card__content {
	text-align: right;
	align-items: flex-end;
}

/* -- Video button reset (since we use <button> now) -- */
button.editable-card__media--video {
	border: none;
	padding: 0;
	background: none;
	display: block;
	width: 100%;
	font: inherit;
	color: inherit;
}

/* Editable grid responsive */
@media (max-width: 1024px) {
	.editable-grid--cols-4 .editable-grid,
	.editable-grid--cols-5 .editable-grid,
	.editable-grid--cols-6 .editable-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.editable-grid--cols-2 .editable-grid,
	.editable-grid--cols-3 .editable-grid,
	.editable-grid--cols-4 .editable-grid,
	.editable-grid--cols-5 .editable-grid,
	.editable-grid--cols-6 .editable-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Video Modal ─────────────────────────────── */
.video-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.video-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
}

.video-modal__wrapper {
	position: relative;
	width: 90vw;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	z-index: 1;
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.video-modal[aria-hidden="false"] .video-modal__wrapper {
	transform: scale(1);
}

.video-modal__content {
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

.video-modal__content iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.video-modal__close:hover {
	opacity: 1;
}

/* Layout: Alternating Features */
.layout-alternating-features {
	background-color: #fff;
}

.layout-alternating-features--bg-alt {
	background-color: var(--color-bg-alt);
}

.layout-alternating-features--bg-gradient {
	background: var(--gradient-bg);
}

.layout-alternating-features--bg-dark {
	background-color: var(--color-bg-dark);
}

.layout-alternating-features--bg-dark .af-header__heading,
.layout-alternating-features--bg-dark .af-row__title {
	color: #fff;
}

.layout-alternating-features--bg-dark .af-header__eyebrow,
.layout-alternating-features--bg-dark .af-header__subtitle,
.layout-alternating-features--bg-dark .af-row__text,
.layout-alternating-features--bg-dark .af-row__bullets li {
	color: rgba(255, 255, 255, 0.7);
}

.af-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: var(--spacing-xl);
}

.af-header__eyebrow {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6B7280;
	margin-bottom: 8px;
}

.af-header__heading {
	margin: 0 0 12px;
}

.af-header__subtitle {
	color: #4B5563;
	font-size: 1.1rem;
	line-height: 1.6;
	margin: 0;
}

.af-rows {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.af-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.af-row--alt .af-row__content {
	order: 2;
}
.af-row--alt .af-row__media {
	order: 1;
}

/* Content column */
.af-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--af-gradient);
	color: #fff;
	margin-bottom: 16px;
}

.af-row__icon svg {
	width: 24px;
	height: 24px;
}

.af-row__title {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: #111827;
}

.af-row__text {
	color: #4B5563;
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: 16px;
}

.af-row__bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.af-row__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #374151;
}

.af-row__bullets li .af-bullet-check {
	flex-shrink: 0;
	margin-top: 2px;
}

/* Media column */
.af-row__media img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.af-row__video-trigger {
	position: relative;
	display: block;
	width: 100%;
	border: none;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;
}

.af-row__video-trigger img {
	border-radius: 0;
}

.af-row__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.af-row__video-trigger:hover .af-row__play {
	opacity: 0.85;
}

.af-row__image {
	border-radius: 12px;
	overflow: hidden;
}

.af-row__icon-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	background: var(--af-pale);
	color: var(--af-color);
}

.af-row__icon-hero svg {
	width: 80px;
	height: 80px;
}

.af-row__wysiwyg {
	border-radius: 12px;
	overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
	.layout-alternating-features {
		padding: 48px 0;
	}

	.af-header {
		margin-bottom: 36px;
	}

	.af-rows {
		gap: 48px;
	}

	.af-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.af-row--alt .af-row__content,
	.af-row--alt .af-row__media {
		order: unset;
	}
}

/* ── Layout: Phases ──────────────────────────── */
.layout-phases {
	background-color: #fff;
}

.layout-phases--bg-alt {
	background-color: var(--color-bg-alt);
}

.layout-phases--bg-gradient {
	background: var(--gradient-bg);
}

.layout-phases--bg-dark {
	background-color: var(--color-bg-dark);
}

.layout-phases--bg-dark .phases-header__heading {
	color: #fff;
}

.layout-phases--bg-dark .phases-header__subtitle {
	color: rgba(255, 255, 255, 0.7);
}

.phases-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: var(--spacing-xl);
}

.phases-header__heading {
	margin: 0 0 12px;
}

.phases-header__subtitle {
	color: #4B5563;
	font-size: 1.1rem;
	line-height: 1.6;
	margin: 0;
}

.phases-grid {
	display: grid;
	gap: 24px;
}

.phases--cols-1 .phases-grid { grid-template-columns: 1fr; }
.phases--cols-2 .phases-grid { grid-template-columns: repeat(2, 1fr); }
.phases--cols-3 .phases-grid { grid-template-columns: repeat(3, 1fr); }
.phases--cols-4 .phases-grid { grid-template-columns: repeat(4, 1fr); }
.phases--cols-5 .phases-grid { grid-template-columns: repeat(5, 1fr); }
.phases--cols-6 .phases-grid { grid-template-columns: repeat(6, 1fr); }

.phase-card {
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	padding: 28px 28px 32px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.phase-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.phase-card__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.phase-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--phase-pale);
	color: var(--phase-color);
	font-size: 1.1rem;
	font-weight: 700;
	flex-shrink: 0;
}

.phase-card__title-wrap {
	flex: 1;
	min-width: 0;
}

.phase-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #111827;
	margin: 0;
	line-height: 1.3;
}

.phase-card__label {
	font-size: 0.85rem;
	font-weight: 500;
	color: #6B7280;
	white-space: nowrap;
	flex-shrink: 0;
}

.phase-card__bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.phase-card__bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.93rem;
	line-height: 1.5;
	color: #374151;
}

.phase-card__bullets li .phase-bullet-check {
	flex-shrink: 0;
	margin-top: 2px;
}

/* Dark mode card overrides */
.layout-phases--bg-dark .phase-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
}

.layout-phases--bg-dark .phase-card__title {
	color: #fff;
}

.layout-phases--bg-dark .phase-card__label,
.layout-phases--bg-dark .phase-card__bullets li {
	color: rgba(255, 255, 255, 0.7);
}

/* Phases responsive */
@media (max-width: 1024px) {
	.phases--cols-4 .phases-grid,
	.phases--cols-5 .phases-grid,
	.phases--cols-6 .phases-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.phases--cols-2 .phases-grid,
	.phases--cols-3 .phases-grid,
	.phases--cols-4 .phases-grid,
	.phases--cols-5 .phases-grid,
	.phases--cols-6 .phases-grid {
		grid-template-columns: 1fr;
	}

	.phase-card {
		padding: 20px;
	}
}

/* Layout: Text Content */
.layout-text-content {
	background-color: white;
}

.layout-text-content .container {
	padding: 0 var(--container-padding);
	max-width: 900px;
}

.text-heading {
	text-align: center;
	/*margin-bottom: var(--spacing-xl); */
}

.text-body {
	color: var(--color-text-muted);
	line-height: 1.8;
	font-size: 18px;
}

.text-body h2 {
	margin-top: var(--spacing-xl);
}

.text-body h3 {
	margin-top: var(--spacing-lg);
}

.text-body p {
	margin-bottom: var(--spacing-md);
}

.text-body a {
	color: var(--color-primary);
	text-decoration: underline;
}

.text-body a:hover {
	color: var(--color-primary-dark);
}

.text-body ul,
.text-body ol {
	margin-bottom: var(--spacing-md);
	margin-left: var(--spacing-lg);
}

.text-body li {
	margin-bottom: var(--spacing-sm);
}

/* Layout: Implementation */
.layout-implementation {
	background-color: var(--color-bg-alt);
}

.layout-implementation .container {
	padding: 0 var(--container-padding);
}

.implementation-title {
	text-align: center;
	margin-bottom: var(--spacing-md);
}

.implementation-description {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 18px;
	margin-bottom: var(--spacing-2xl);
}

.implementation-steps {
	max-width: 900px;
	margin: 0 auto;
}

.implementation-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-2xl);
	align-items: start;
}

@media (max-width: 768px) {
	.implementation-step {
		gap: var(--spacing-md);
	}
}

.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gradient-cta);
	color: white;
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 4px 16px rgba(192, 38, 211, 0.30);
}

.step-icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
	border-radius: var(--radius);
	flex-shrink: 0;
}

.step-icon img {
	max-width: 100%;
	height: auto;
}

.step-content h3 {
	margin-bottom: var(--spacing-md);
}

.step-content p {
	color: var(--color-text-muted);
	margin: 0;
}

/* Layout: CTA Banner */
.layout-cta-banner {
	background: linear-gradient(135deg, #C026D3 0%, #FF1493 100%);
	color: white;
}

.layout-cta-banner .container {
	padding: 0 var(--container-padding);
	max-width: 800px;
}

.banner-content {
	text-align: center;
}

.banner-headline {
	color: white;
	font-size: clamp(26px, 4vw, 40px);
	margin-bottom: var(--spacing-md);
	letter-spacing: -0.02em;
}

.banner-subtext {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	margin-bottom: var(--spacing-xl);
}

.banner-buttons {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	flex-wrap: wrap;
}

/* On vivid gradient backgrounds, buttons get white / transparent-white treatment */
.layout-cta-banner .btn-primary {
	background: white;
	color: #C026D3;
	border-color: transparent;
}

.layout-cta-banner .btn-primary:hover {
	background: rgba(255, 255, 255, 0.15);
	color: white;
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: none;
}

.layout-cta-banner .btn-secondary,
.layout-hero .btn-secondary {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.8);
	color: white;
}

.layout-cta-banner .btn-secondary:hover,
.layout-hero .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.container {
		padding: 0 20px;
	}

	:root {
		--spacing-2xl: 60px;
		--spacing-xl: 40px;
	}

	.section {
		padding: var(--spacing-xl) 0;
	}
}

@media (max-width: 768px) {
	:root {
		--container-padding: 16px;
		--spacing-2xl: 48px;
		--spacing-xl: 32px;
		--spacing-lg: 20px;
	}

	.header-container {
		padding: var(--spacing-md) var(--container-padding);
	}

	.nav-menu {
		flex-direction: column;
		gap: var(--spacing-md);
	}

	.nav-toggle {
		display: flex;
	}

	h1 {
		font-size: clamp(22px, 5vw, 40px);
	}

	h2 {
		font-size: clamp(18px, 4vw, 30px);
	}

	.hero-slide {
		min-height: auto;
	}

	.hero-inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 80px;
		padding-bottom: 60px;
		gap: var(--spacing-xl);
	}

	/* On mobile, center alignment keeps items centered */
	.layout-hero--align-center .hero-inner {
		align-items: center;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-headline {
		font-size: clamp(28px, 7vw, 48px);
	}

	.hero-buttons {
		flex-direction: column;
	}

	.hero-buttons .btn {
		width: 100%;
		text-align: center;
	}

	.hero-secondary {
		flex: 0 0 auto;
		width: 100%;
		max-width: 420px;
	}

	.hero-callout-block {
		align-self: auto;
		padding-bottom: 0;
	}

	/* Hero Video responsive */
	.layout-hero-video {
		min-height: 480px;
	}

	.layout-hero-video .hero-inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 80px;
		padding-bottom: 60px;
		gap: var(--spacing-xl);
	}

	.layout-hero-video--align-center .hero-inner {
		align-items: center;
	}

	.layout-hero-video .hero-content {
		max-width: 100%;
	}

	.layout-hero-video .hero-secondary {
		flex: 0 0 auto;
		width: 100%;
		max-width: 420px;
	}

	.risk-callout {
		flex-direction: column;
	}

	.testimonial-item {
		padding: var(--spacing-lg);
	}

	.contact-detail {
		text-align: center;
	}

	/* hero-content padding handled by .hero-inner padding on mobile */

	.posts-grid {
		grid-template-columns: 1fr;
	}

	.demo-buttons,
	.banner-buttons {
		flex-direction: column;
	}

	.demo-buttons .btn,
	.banner-buttons .btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	:root {
		--container-padding: 12px;
		--spacing-2xl: 32px;
		--spacing-xl: 24px;
	}

	.container {
		padding: 0 var(--container-padding);
	}

	.header-actions .btn {
		padding: 10px 20px;
		font-size: 14px;
	}

	.btn {
		padding: 10px 24px;
		font-size: 14px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.team-grid {
		grid-template-columns: 1fr;
	}

	.partners-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.personas-grid {
		grid-template-columns: 1fr;
	}

	.editable-grid {
		grid-template-columns: 1fr;
	}
}

/* Utility Classes */
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }

/* ==========================================================================
   Layout: Feature Cards Grid  (layout_feature_cards)
   ========================================================================== */

.layout-feature-cards {
	padding: var(--spacing-2xl) 0;
}

/* Background variants */
.feature-cards--bg-light {
	background-color: var(--color-bg-alt);
}

.feature-cards--bg-purple {
	background-color: #FAF5FF;
}

.feature-cards--bg-white {
	background-color: #fff;
}

/* Grid */
.feature-cards-grid {
	display: grid;
	gap: 24px;
	margin-top: var(--spacing-xl);
}

.feature-cards--cols-1 .feature-cards-grid { grid-template-columns: 1fr; }
.feature-cards--cols-2 .feature-cards-grid { grid-template-columns: repeat(2, 1fr); }
.feature-cards--cols-3 .feature-cards-grid { grid-template-columns: repeat(3, 1fr); }
.feature-cards--cols-4 .feature-cards-grid { grid-template-columns: repeat(4, 1fr); }
.feature-cards--cols-5 .feature-cards-grid { grid-template-columns: repeat(5, 1fr); }
.feature-cards--cols-6 .feature-cards-grid { grid-template-columns: repeat(6, 1fr); }

/* Individual card */
.feature-card {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--color-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.feature-card:hover {
	box-shadow: 0 12px 40px rgba(3, 2, 19, 0.10);
	transform: translateY(-3px);
}

/* Image area */
.feature-card__image-wrap {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.feature-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.feature-card:hover .feature-card__image {
	transform: scale(1.03);
}

/* Text body */
.feature-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.feature-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.3;
	margin: 0;
}

.feature-card__desc {
	font-size: 14px;
	color: var(--color-text-muted, #6B7280);
	line-height: 1.65;
	margin: 0;
	flex: 1;
}

/* CTA — pushed to the bottom of the card */
.feature-card__body .btn {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 12px;
}

/* Text-link style CTA */
.btn-text-link {
	background: none;
	border: none;
	color: var(--color-cta-from);
	font-size: 14px;
	font-weight: 600;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 0;
	transition: gap 0.15s ease, color 0.15s ease;
}

.btn-text-link:hover {
	color: var(--color-cta-hover-from, #A21CAF);
	gap: 8px;
	background: none;
	transform: none;
	box-shadow: none;
}

/* Responsive */
@media (max-width: 1024px) {
	.feature-cards--cols-4 .feature-cards-grid,
	.feature-cards--cols-5 .feature-cards-grid,
	.feature-cards--cols-6 .feature-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.feature-cards--cols-2 .feature-cards-grid,
	.feature-cards--cols-3 .feature-cards-grid,
	.feature-cards--cols-4 .feature-cards-grid,
	.feature-cards--cols-5 .feature-cards-grid,
	.feature-cards--cols-6 .feature-cards-grid {
		grid-template-columns: 1fr;
	}

	.feature-card__image-wrap {
		aspect-ratio: 16 / 9;
	}
}

/* Print Styles */
@media print {
	.site-header,
	.site-footer,
	.nav-toggle,
	.btn {
		display: none;
	}
}

/* ============================================================================
   Form Modals — Ninja Forms popup overlays
   ============================================================================ */

/* ── Overlay ── */
.nf-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.nf-modal.is-open {
	pointer-events: auto;
	opacity: 1;
}

.nf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 30, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}

/* ── Dialog shell ── */
.nf-modal__dialog {
	position: relative;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25);
	width: calc(100% - 40px);
	max-width: 740px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform: translateY(28px) scale(0.97);
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
	opacity: 0;
}

.nf-modal.is-open .nf-modal__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Size variants */
.nf-modal__dialog--lg {
	max-width: 860px;
}

/* ── Gradient header bar ── */
.nf-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	background: var(--gradient-cta, linear-gradient(135deg, #9333EA, #DB2777));
	flex-shrink: 0;
}

.nf-modal__header-inner {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nf-modal__header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.9);
	flex-shrink: 0;
}

.nf-modal__header-icon svg,
.nf-modal__header-icon i {
	width: 20px;
	height: 20px;
	stroke-width: 2;
}

.nf-modal__title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* ── Close button — white circle on header ── */
.nf-modal__close {
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	transition: background 0.15s ease;
	flex-shrink: 0;
	padding: 0;
}

.nf-modal__close:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* ── Scrollable body ── */
.nf-modal__body {
	overflow-y: auto;
	padding: 28px 32px 32px;
	flex: 1;
	min-height: 200px;
}

.nf-modal__subtitle {
	font-size: 0.9375rem;
	color: var(--color-text-muted, #64748b);
	margin: 0 0 28px;
	line-height: 1.6;
}

/* ── Form overrides ── */
.nf-modal__form {
	display: block;
	width: 100%;
}

.nf-modal__form .nf-form-cont {
	width: 100%;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.nf-modal__form .nf-form-wrap {
	display: block !important;
}

.nf-modal__form .nf-form-layout {
	display: block !important;
}

.nf-modal__form nf-rows-wrap,
.nf-modal__form nf-row,
.nf-modal__form nf-field {
	display: block !important;
	visibility: visible !important;
}

.nf-modal__form .nf-field-container {
	margin-bottom: 16px;
}

.nf-modal__form .field-wrap input,
.nf-modal__form .field-wrap textarea,
.nf-modal__form .field-wrap select {
	width: 100%;
	border-radius: 8px;
	border: 1.5px solid var(--color-border, #e2e8f0);
	padding: 10px 14px;
	font-size: 14px;
	transition: border-color 0.15s ease;
}

.nf-modal__form .field-wrap input:focus,
.nf-modal__form .field-wrap textarea:focus {
	outline: none;
	border-color: var(--color-primary, #9333EA);
	box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12);
}

/* Section headings inside NF forms (e.g. "CONTACT INFORMATION") */
.nf-modal__form .nf-field-container.section-container .nf-field-element,
.nf-modal__form .nf-field-wrap .field-wrap.section-wrap .nf-field-element {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted, #64748b);
	padding: 16px 0 4px;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
	margin-bottom: 16px;
}

/* Submit button — gradient pill with arrow */
.nf-modal__form .submit-container .submit-wrap input[type="submit"],
.nf-modal__form .submit-container .submit-wrap input[type="button"],
.nf-modal__form .submit-container .submit-wrap button {
	background: var(--gradient-cta, linear-gradient(135deg, #9333EA, #DB2777));
	color: #fff;
	border: none;
	border-radius: var(--border-radius-sm, 6px);
	padding: 12px 28px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
	letter-spacing: 0.01em;
}

.nf-modal__form .submit-container .submit-wrap input[type="submit"]:hover,
.nf-modal__form .submit-container .submit-wrap input[type="button"]:hover,
.nf-modal__form .submit-container .submit-wrap button:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* Quick-Quote "Generate Quote" — btn-primary styling, disabled until required fields filled */
.nf-modal__form .submit-container .fastiep-quote-submit {
	background: var(--color-primary);
	color: var(--color-primary-foreground);
	border: 2px solid transparent;
	border-radius: var(--radius-sm, 6px);
	padding: 12px 32px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	pointer-events: none;
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	transition: var(--transition, 0.2s ease);
}

.nf-modal__form .submit-container .fastiep-quote-submit.is-ready {
	pointer-events: auto;
	opacity: 1;
	cursor: pointer;
}

.nf-modal__form .submit-container .fastiep-quote-submit.is-ready:hover {
	background: var(--gradient-cta);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 18px rgba(192, 38, 211, 0.35);
}

/* ── Multi-Part form overrides ─────────────────────────────────────────── */

/* Breadcrumb step indicators */
.nf-modal__form .mp-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted, #64748b);
}

.nf-modal__form .mp-breadcrumbs .mp-breadcrumb-item.active {
	color: #C026D3;
}

.nf-modal__form .mp-breadcrumbs .mp-breadcrumb-item.complete {
	color: #16a34a;
}

/* Prev / Next navigation row */
.nf-modal__form .mp-btn-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
	gap: 12px;
}

/* Next button — primary gradient */
.nf-modal__form .mp-btn-next {
	background: var(--gradient-cta, linear-gradient(135deg, #C026D3, #FF1493)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 12px 28px !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.nf-modal__form .mp-btn-next:hover {
	opacity: 0.88 !important;
	transform: translateY(-1px) !important;
}

/* Back button — ghost */
.nf-modal__form .mp-btn-prev {
	background: transparent !important;
	color: var(--color-text-muted, #64748b) !important;
	border: 1.5px solid var(--color-border, #e2e8f0) !important;
	border-radius: 50px !important;
	padding: 11px 22px !important;
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: border-color 0.15s ease, color 0.15s ease !important;
}

.nf-modal__form .mp-btn-prev:hover {
	border-color: #C026D3 !important;
	color: #C026D3 !important;
}

/* Part title shown above each section */
.nf-modal__form .mp-part-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #C026D3;
	margin-bottom: 20px;
}

/* Checkbox + radio list items */
.nf-modal__form .list-checkbox-wrap li,
.nf-modal__form .list-radio-wrap li {
	margin-bottom: 8px;
}

.nf-modal__form .list-checkbox-wrap li label,
.nf-modal__form .list-radio-wrap li label {
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Lock body scroll when a modal is open */
body.modal-open {
	overflow: hidden;
}

/* Video modal container — maintains 16:9 aspect ratio */
.nf-modal__video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
}

.nf-modal__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 8px;
}

/* ── Mobile — sheet slides up from bottom ── */
@media (max-width: 640px) {
	.nf-modal {
		align-items: flex-end;
	}

	.nf-modal__dialog {
		border-radius: 20px 20px 0 0;
		max-height: 92vh;
		width: 100%;
		transform: translateY(100%);
	}

	.nf-modal__body {
		padding: 24px 20px 28px;
	}

	.nf-modal.is-open .nf-modal__dialog {
		transform: translateY(0);
	}
}


/* =============================================================================
   QUOTE GENERATOR (inside Quick Quote modal)
   ============================================================================= */

/* ── Quote-view dialog — wider, taller ─────────────────────────────── */
.nf-modal__dialog--quote {
	max-width: 900px;
	max-height: 90vh;
}

/* ── Quote result container ─────────────────────────────────────────── */
.nf-modal__quote-result {
	padding: 0;
}

/* ── Quote document (the renderable/printable area) ─────────────────── */
.quote-document {
	background: #fff;
	padding: 32px 36px;
	font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
	color: #1e293b;
	font-size: 12px;
	line-height: 1.5;
	max-height: 60vh;
	overflow-y: auto;
}

/* ── Header: logo + meta ────────────────────────────────────────────── */
.quote-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: 2px solid #e2e8f0;
	margin-bottom: 28px;
}

.quote-logo {
	height: 28px;
	width: auto;
}

.quote-logo-text {
	font-size: 20px;
	font-weight: 700;
	color: #C026D3;
}

.quote-header__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.quote-ref {
	font-weight: 700;
	font-size: 11px;
	color: #C026D3;
}

.quote-date {
	font-size: 11px;
	color: #64748b;
}

/* ── Info grid: Prepared for / by / Mail checks to ──────────────────── */
.quote-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.quote-info-block h4 {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #94a3b8;
	margin: 0 0 4px;
}

.quote-info-block p {
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
	color: #334155;
}

.quote-info-name {
	font-weight: 700;
	font-size: 12px !important;
	color: #0f172a !important;
}

/* ── Products table ─────────────────────────────────────────────────── */
.quote-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	font-size: 11px;
}

.quote-table thead th {
	background: #f8fafc;
	text-align: left;
	padding: 8px 12px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
	border-bottom: 2px solid #e2e8f0;
}

.quote-table tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid #f1f5f9;
}

.quote-table__amount {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.quote-table__subtotal td {
	border-top: 2px solid #e2e8f0;
	font-weight: 600;
	padding-top: 12px;
}

.quote-table__discount td {
	color: #16a34a;
	font-style: italic;
}

.quote-table tfoot td {
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 700;
	border-top: 3px solid #0f172a;
}

/* ── Signature block ────────────────────────────────────────────────── */
.quote-signature {
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	padding: 20px 24px 16px;
	margin-top: 20px;
	page-break-inside: avoid;
}

.quote-signature__label {
	font-size: 11px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 28px;
}

.quote-signature__lines {
	display: flex;
	gap: 24px;
}

.quote-signature__field {
	flex: 1;
	text-align: center;
}

.quote-signature__line {
	display: block;
	border-bottom: 1.5px solid #94a3b8;
	margin-bottom: 6px;
	height: 24px;
}

.quote-signature__caption {
	font-size: 10px;
	color: #94a3b8;
}

/* ── Payment methods box ────────────────────────────────────────────── */
.quote-payment {
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	padding: 18px 24px;
	margin-top: 16px;
	background: #f8fafc;
	page-break-inside: avoid;
}

.quote-payment__title {
	font-size: 12px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 6px;
}

.quote-payment p {
	font-size: 11px;
	line-height: 1.55;
	color: #334155;
	margin: 0 0 6px;
}

.quote-payment p:last-child {
	margin-bottom: 0;
}

/* ── Terms section ──────────────────────────────────────────────────── */
.quote-terms {
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	padding: 24px 28px;
	margin-top: 16px;
	page-break-inside: avoid;
}

.quote-terms__heading {
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	text-align: center;
	margin: 0 0 16px;
}

.quote-terms__subheading {
	font-size: 12px;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 12px;
}

.quote-terms__list {
	margin: 0;
	padding-left: 18px;
	list-style: disc;
}

.quote-terms__list li {
	font-size: 11px;
	line-height: 1.55;
	color: #334155;
	margin-bottom: 4px;
}

.quote-terms__list li:last-child {
	margin-bottom: 0;
}

.quote-terms__list a {
	color: #2563eb;
	text-decoration: underline;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.quote-footer {
	text-align: center;
	font-size: 10px;
	color: #94a3b8;
	margin-top: 10px;
}

/* ── Action bar ─────────────────────────────────────────────────────── */
.quote-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 20px 32px;
	border-top: 1px solid #e2e8f0;
	background: #f8fafc;
	border-radius: 0 0 16px 16px;
}

.quote-btns-holder {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.quote-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	font-family: inherit;
}

.quote-action-btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.quote-action-btn--back {
	background: transparent;
	color: #64748b;
	border: 1.5px solid #e2e8f0;
}

.quote-action-btn--back:hover {
	border-color: #C026D3;
	color: #C026D3;
}

.quote-action-btn--pdf {
	background: var(--gradient-cta, linear-gradient(135deg, #C026D3, #FF1493));
	color: #fff;
}

.quote-action-btn--done {
	background: #0f172a;
	color: #fff;
}
.quote-edit-prompt {
	align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}
h4.quote-edit-prompt__heading {
	margin-bottom: var(--spacing-sm) !important;
}
a.quote-edit-prompt__link{
	color: var(--color-brand);
	font-size: .875rem;
	cursor: pointer;
}
a.quote-edit-prompt__link:hover {
	text-decoration: underline;
}

/* ── Mobile adjustments ─────────────────────────────────────────────── */
@media (max-width: 640px) {
	.quote-document {
		padding: 24px 18px;
	}

	.quote-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.quote-header__meta {
		align-items: flex-start;
	}

	.quote-info-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.quote-actions {
		flex-direction: column;
		padding: 16px 20px;
	}

	.quote-action-btn {
		width: 100%;
		justify-content: center;
	}
}


/* =============================================================================
   SINGLE CASE STUDY
   ============================================================================= */

.cs-single {
	background: #fff;
}

/* ── Header ──────────────────────────────────────────── */

.cs-header {
	padding: 48px 0 40px;
	background: rgba(124, 58, 237, 0.06);
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.cs-header .container {
	max-width: 820px;
}

/* ── Featured image background ──────────────────────────────────── */
.cs-header--has-bg {
	position: relative;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	border-bottom: none;
}

.cs-header--has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.88);
	z-index: 0;
}

.cs-header--has-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(124, 58, 237, 0.06);
	z-index: 1;
}

.cs-header--has-bg .container {
	position: relative;
	z-index: 2;
}

.cs-header__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-bottom: 1rem;
}

.cs-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
	text-decoration: none;
	margin-bottom: 24px;
	transition: color 0.2s;
}

.cs-back:hover {
	color: #7c3aed;
}

.cs-back svg {
	width: 16px;
	height: 16px;
}

.cs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #7c3aed;
	background: rgba(124, 58, 237, 0.08);
	border-radius: 999px;
	margin-bottom: 16px;
}

.cs-badge svg {
	width: 14px;
	height: 14px;
}

.cs-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--color-primary-dark);
	margin: 0 0 8px;
}

.cs-subtitle {
	font-size: 1.125rem;
	color: var(--color-muted-foreground);
	margin: 0 0 20px;
}

.cs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.cs-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
}

.cs-meta-item svg {
	width: 16px;
	height: 16px;
	color: #7c3aed;
}

.cs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cs-tag {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	color: #7c3aed;
	background: rgba(124, 58, 237, 0.06);
	border: 1px solid rgba(124, 58, 237, 0.15);
	border-radius: 999px;
}

.cs-actions {
	display: flex;
	gap: 12px;
}

.cs-actions .btn svg {
	width: 16px;
	height: 16px;
}

.cs-actions .btn-outline {
	color: #7c3aed;
	border-color: #7c3aed;
}

.cs-actions .btn.btn-outline:hover {
	background: #7c3aed;
	border-color: #7c3aed;
	color: #fff;
	transform: translateY(-2px);
}

.cs-actions .cs-share-btn {
	color: #7c3aed;
	border-color: #7c3aed;
}

/* ── Body / Sections ─────────────────────────────────── */

.cs-body {
	padding: 56px 0;
}

.cs-body .container {
	max-width: 820px;
}

.cs-section {
	margin-bottom: 48px;
}

.cs-section:last-child {
	margin-bottom: 0;
}

.cs-section-label {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #7c3aed;
	padding-left: 16px;
	border-left: 3px solid #7c3aed;
	margin-bottom: 20px;
}

.cs-section-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--color-text);
}

.cs-section-content p {
	margin-bottom: 1em;
}

/* ── Quote ────────────────────────────────────────────── */

.cs-quote {
	margin: 32px 0 0;
	padding: 32px 36px;
	background: linear-gradient(135deg, #06b6d4, #3b82f6);
	border-radius: 16px;
	color: #fff;
	position: relative;
}

.cs-quote-icon {
	position: absolute;
	top: 20px;
	right: 28px;
	opacity: 0.25;
}

.cs-quote-icon svg {
	width: 40px;
	height: 40px;
}

.cs-quote p {
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.7;
	margin: 0 0 16px;
}

.cs-quote footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cs-quote footer strong {
	font-size: 0.9375rem;
}

.cs-quote footer span {
	font-size: 0.8125rem;
	opacity: 0.8;
}

/* ── Benefits Grid ────────────────────────────────────── */

.cs-benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.cs-benefit {
	padding: 24px;
	border-radius: 12px;
	border-left: 4px solid;
}

.cs-benefit--pink {
	border-color: #ec4899;
	background: rgba(236, 72, 153, 0.04);
}

.cs-benefit--blue {
	border-color: #3b82f6;
	background: rgba(59, 130, 246, 0.04);
}

.cs-benefit--amber {
	border-color: #f59e0b;
	background: rgba(245, 158, 11, 0.04);
}

.cs-benefit--green {
	border-color: #10b981;
	background: rgba(16, 185, 129, 0.04);
}

.cs-benefit--purple {
	border-color: #8b5cf6;
	background: rgba(139, 92, 246, 0.04);
}

.cs-benefit--cyan {
	border-color: #06b6d4;
	background: rgba(6, 182, 212, 0.04);
}

.cs-benefit-title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--color-primary-dark);
}

.cs-benefit--pink .cs-benefit-title { color: #ec4899; }
.cs-benefit--blue .cs-benefit-title { color: #3b82f6; }
.cs-benefit--amber .cs-benefit-title { color: #d97706; }
.cs-benefit--green .cs-benefit-title { color: #059669; }
.cs-benefit--purple .cs-benefit-title { color: #7c3aed; }
.cs-benefit--cyan .cs-benefit-title { color: #0891b2; }

.cs-benefit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cs-benefit-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.cs-benefit-list li svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

.cs-benefit--pink .cs-benefit-list li svg { color: #ec4899; }
.cs-benefit--blue .cs-benefit-list li svg { color: #3b82f6; }
.cs-benefit--amber .cs-benefit-list li svg { color: #d97706; }
.cs-benefit--green .cs-benefit-list li svg { color: #059669; }
.cs-benefit--purple .cs-benefit-list li svg { color: #7c3aed; }
.cs-benefit--cyan .cs-benefit-list li svg { color: #0891b2; }

.cs-benefit-list li div {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-muted-foreground);
}

.cs-benefit-list li div p {
	margin: 0;
}

.cs-benefit-list li div strong {
	color: var(--color-primary-dark);
}

/* ── Navigation ───────────────────────────────────────── */

.cs-nav {
	padding: 0 0 48px;
}

.cs-divider {
	border: none;
	border-top: 1px solid var(--color-border, #e5e7eb);
	margin: 0 0 32px;
}

.cs-nav-heading {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-muted-foreground);
	text-align: center;
	margin: 0 0 24px;
}

.cs-nav-links {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.cs-nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--color-primary-dark);
	padding: 16px 20px;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 12px;
	transition: border-color 0.2s, box-shadow 0.2s;
	flex: 1;
	max-width: 48%;
}

.cs-nav-link:hover {
	border-color: #7c3aed;
	box-shadow: 0 2px 12px rgba(124, 58, 237, 0.08);
}

.cs-nav-link svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-muted-foreground);
}

.cs-nav-link small {
	display: block;
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
	margin-bottom: 2px;
}

.cs-nav-link span {
	font-weight: 600;
	font-size: 0.9375rem;
}

.cs-nav-next {
	margin-left: auto;
	text-align: right;
}

/* ── Bottom CTA — uses shared .layout-cta-banner styles ─ */

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 768px) {
	.cs-header {
		padding: 32px 0;
	}

	.cs-title {
		font-size: 1.75rem;
	}

	.cs-benefits-grid {
		grid-template-columns: 1fr;
	}

	.cs-nav-links {
		flex-direction: column;
	}

	.cs-nav-link {
		max-width: 100%;
	}

	.cs-nav-next {
		text-align: left;
	}

	.cs-single .banner-buttons {
		flex-direction: column;
		align-items: center;
	}

	.cs-quote {
		padding: 24px 20px;
	}
}


/* ==========================================================================
   SINGLE RESOURCE  (article, blog-post, guide, video, webinar)
   ========================================================================== */

.rs-single {
	background: #fff;
}

/* ── Scheme color tokens ─────────────────────────────── */
.rs-single.scheme-cyan    { --rs-accent: #0891b2; --rs-accent-bg: rgba(8,145,178,0.08); --rs-accent-border: rgba(8,145,178,0.18); }
.rs-single.scheme-blue    { --rs-accent: #2563EB; --rs-accent-bg: rgba(37,99,235,0.08); --rs-accent-border: rgba(37,99,235,0.18); }
.rs-single.scheme-green   { --rs-accent: #16a34a; --rs-accent-bg: rgba(22,163,74,0.08); --rs-accent-border: rgba(22,163,74,0.18); }
.rs-single.scheme-red     { --rs-accent: #dc2626; --rs-accent-bg: rgba(220,38,38,0.08); --rs-accent-border: rgba(220,38,38,0.18); }
.rs-single.scheme-orange  { --rs-accent: #ea580c; --rs-accent-bg: rgba(234,88,12,0.08); --rs-accent-border: rgba(234,88,12,0.18); }
.rs-single.scheme-purple  { --rs-accent: #7c3aed; --rs-accent-bg: rgba(124,58,237,0.08); --rs-accent-border: rgba(124,58,237,0.18); }
.rs-single.scheme-lime    { --rs-accent: #16A34A; --rs-accent-bg: rgba(22,163,74,0.08); --rs-accent-border: rgba(22,163,74,0.18); }
.rs-single.scheme-amber   { --rs-accent: #D97706; --rs-accent-bg: rgba(217,119,6,0.08); --rs-accent-border: rgba(217,119,6,0.18); }

/* ── Header ──────────────────────────────────────────── */

.rs-header {
	padding: 48px 0 40px;
	background: var(--rs-accent-bg, rgba(37, 99, 235, 0.08));
	border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.rs-header .container {
	max-width: 820px;
}

/* ── Featured image background ──────────────────────────────────── */
.rs-header--has-bg {
	position: relative;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	border-bottom: none;
}

.rs-header--has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.88);
	z-index: 0;
}

.rs-header--has-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--rs-accent-bg, rgba(37, 99, 235, 0.08));
	z-index: 1;
}

.rs-header--has-bg .container {
	position: relative;
	z-index: 2;
}

.rs-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
	text-decoration: none;
	margin-bottom: 24px;
	transition: color 0.2s;
}

.rs-back:hover {
	color: var(--rs-accent);
}

.rs-back svg {
	width: 16px;
	height: 16px;
}

.rs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--rs-accent);
	background: var(--rs-accent-bg);
	border-radius: 999px;
	margin-bottom: 16px;
}

.rs-badge svg {
	width: 14px;
	height: 14px;
}

.rs-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--color-primary-dark);
	margin: 0 0 8px;
}

.rs-subtitle {
	font-size: 1.125rem;
	color: var(--color-muted-foreground);
	margin: 0 0 20px;
}

.rs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.rs-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
}

.rs-meta-item svg {
	width: 16px;
	height: 16px;
	color: var(--rs-accent);
}

.rs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rs-tag {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rs-accent);
	background: var(--rs-accent-bg);
	border: 1px solid var(--rs-accent-border);
	border-radius: 999px;
}

.rs-actions {
	display: flex;
	gap: 12px;
}

.rs-actions .btn svg {
	width: 16px;
	height: 16px;
}

.rs-actions .btn-outline {
	color: var(--rs-accent);
	border-color: var(--rs-accent);
}

.rs-actions .btn.btn-outline:hover {
	background: var(--rs-accent);
	border-color: var(--rs-accent);
	color: #fff;
	transform: translateY(-2px);
}

.rs-actions .rs-share-btn {
	color: var(--rs-accent);
	border-color: var(--rs-accent);
	position: relative;
}

/* ── Share Dropdown ──────────────────────────────────────── */

.rs-share-dropdown {
	position: fixed;
	min-width: 200px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(3, 2, 19, 0.12);
	padding: 6px;
	z-index: 99999;
	animation: shareDropIn 0.15s ease both;
}

@keyframes shareDropIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.rs-share-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	font-family: var(--font-body);
	white-space: nowrap;
	line-height: 1.4;
}

.rs-share-option:hover {
	background-color: var(--color-bg-alt);
	color: var(--rs-accent, var(--color-cta-from));
	text-decoration: none;
}

.rs-share-option__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted);
}

.rs-share-option:hover .rs-share-option__icon {
	color: var(--rs-accent, var(--color-cta-from));
}

.rs-share-option__icon svg {
	width: 16px;
	height: 16px;
}

.rs-share-divider {
	height: 1px;
	background: var(--color-border);
	margin: 4px 6px;
}

.rs-share-option--copied,
.rs-share-option--copied .rs-share-option__icon {
	color: #059669 !important;
}

/* ── Hero Image ──────────────────────────────────────── */

.rs-hero-image {
	padding: 40px 0 0;
}

.rs-hero-image img {
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border-radius: 12px;
	object-fit: cover;
}

/* ── Video Embed ─────────────────────────────────────── */

.rs-video-embed {
	padding: 40px 0 0;
}

.rs-video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	max-width: 960px;
	margin: 0 auto;
}

.rs-video-wrapper iframe,
.rs-video-wrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── PDF Embed ───────────────────────────────────────── */

.rs-pdf-embed {
	padding: 40px 0;
}

.rs-pdf-wrapper {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.rs-pdf-wrapper iframe {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 500px;
	border: 0;
}

.rs-pdf-fallback {
	text-align: center;
	margin-top: 16px;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
}

.rs-pdf-fallback a {
	color: var(--rs-accent);
	text-decoration: underline;
}

/* ── Video Preview & Header ──────────────────────────── */

.rs-video-preview {
	padding: 60px 0 40px;
	background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, transparent 100%);
}

.rs-video-header {
	text-align: center;
	margin-bottom: 32px;
}

.rs-video-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-heading);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.rs-video-title i,
.rs-video-title svg {
	width: 28px;
	height: 28px;
	color: var(--rs-accent, var(--color-primary));
}

.rs-video-description {
	font-size: 1.0625rem;
	color: var(--color-text-light);
	margin: 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ── Video Thumbnail with Play Button ────────────────── */

.rs-video-thumbnail {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rs-video-thumbnail:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.rs-video-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.rs-video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.rs-video-play-btn:hover {
	transform: translate(-50%, -50%) scale(1.1);
	background: #fff;
	box-shadow: 0 6px 28px rgba(0,0,0,0.25);
}

.rs-video-play-btn i,
.rs-video-play-btn svg {
	width: 36px;
	height: 36px;
	color: var(--rs-accent, var(--color-primary));
	margin-left: 4px; /* Visual centering for play icon */
}

/* ── Gated Webinar Section ───────────────────────────── */

.rs-webinar-gated {
	padding: 60px 0;
	background: #fafafa;
	position: relative;
}

.rs-gate-overlay {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 16px;
	padding: 60px 40px;
	max-width: 720px;
	margin: 0 auto;
	box-shadow: 0 8px 32px rgba(0,0,0,0.08);
	text-align: center;
}

.rs-gate-content {
	max-width: 560px;
	margin: 0 auto;
}

.rs-gate-icon {
	width: 80px;
	height: 80px;
	background: var(--rs-accent-bg, rgba(37,99,235,0.08));
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.rs-gate-icon i,
.rs-gate-icon svg {
	width: 40px;
	height: 40px;
	color: var(--rs-accent, var(--color-primary));
}

.rs-gate-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-heading);
	margin: 0 0 16px;
}

.rs-gate-description {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-text-light);
	margin: 0 0 32px;
}

.rs-gate-featured-image {
	max-width: 560px;
	margin: 32px auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.rs-gate-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

.rs-gate-form {
	margin: 40px 0;
	text-align: left;
}

.rs-gate-form .nf-form-cont {
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}

.rs-gate-form .nf-form-fields-required {
	font-size: 0.9375rem;
	color: var(--color-text-light);
	margin-bottom: 20px;
}

.rs-gate-form .nf-field-container {
	margin-bottom: 20px;
}

.rs-gate-form .nf-field-label label {
	font-weight: 600;
	color: var(--color-heading);
	font-size: 0.9375rem;
	margin-bottom: 8px;
	display: block;
}

.rs-gate-form input[type="text"],
.rs-gate-form input[type="email"],
.rs-gate-form select,
.rs-gate-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rs-gate-form input[type="text"]:focus,
.rs-gate-form input[type="email"]:focus,
.rs-gate-form select:focus,
.rs-gate-form textarea:focus {
	outline: none;
	border-color: var(--rs-accent, var(--color-primary));
	box-shadow: 0 0 0 4px var(--rs-accent-bg, rgba(37,99,235,0.08));
}

.rs-gate-form .nf-error-msg {
	color: #dc2626;
	font-size: 0.875rem;
	margin-top: 6px;
}

.rs-gate-form .ninja-forms-req-symbol {
	color: #dc2626;
}

.rs-gate-form input[type="button"],
.rs-gate-form input[type="submit"],
.rs-gate-form button[type="submit"] {
	width: 100%;
	padding: 14px 32px;
	background: var(--rs-accent, var(--color-primary));
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 8px;
}

.rs-gate-form input[type="button"]:hover,
.rs-gate-form input[type="submit"]:hover,
.rs-gate-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.rs-gate-privacy {
	font-size: 0.875rem;
	color: var(--color-text-light);
	margin: 24px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.rs-gate-privacy i,
.rs-gate-privacy svg {
	width: 16px;
	height: 16px;
	color: var(--rs-accent, var(--color-primary));
}

.rs-gate-form-placeholder {
	padding: 24px;
	background: #fef3c7;
	border: 2px solid #fbbf24;
	border-radius: 8px;
}

.rs-gate-notice {
	color: #92400e;
	font-size: 0.9375rem;
	margin: 0 0 16px;
}

/* ── Video Content (shown after unlock) ──────────────── */

.rs-video-content {
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

.rs-video-content.is-visible {
	opacity: 1;
}

.rs-video-embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
}

.rs-video-embed-container iframe,
.rs-video-embed-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Responsive Styles ────────────────────────────────── */

@media (max-width: 768px) {
	.rs-video-preview {
		padding: 40px 0 30px;
	}

	.rs-video-title {
		font-size: 1.5rem;
		flex-direction: column;
		gap: 8px;
	}

	.rs-gate-overlay {
		padding: 40px 24px;
	}

	.rs-gate-title {
		font-size: 1.625rem;
	}

	.rs-gate-featured-image {
		max-width: 100%;
		margin: 24px auto;
	}

	.rs-video-play-btn {
		width: 60px;
		height: 60px;
	}

	.rs-video-play-btn i,
	.rs-video-play-btn svg {
		width: 28px;
		height: 28px;
	}
}

/* ── Body / Content ──────────────────────────────────── */

.rs-body {
	padding: 56px 0;
}

.rs-body .container {
	max-width: 820px;
}

.rs-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--color-text);
}

.rs-content p {
	margin-bottom: 1em;
}

.rs-content h2 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	margin: 2em 0 0.75em;
	color: var(--color-primary-dark);
}

.rs-content h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	margin: 1.5em 0 0.5em;
	color: var(--color-primary-dark);
}

.rs-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 1.5em 0;
}

.rs-content blockquote {
	border-left: 3px solid var(--rs-accent);
	margin: 1.5em 0;
	padding: 1em 1.5em;
	background: var(--rs-accent-bg);
	border-radius: 0 8px 8px 0;
	color: var(--color-text);
	font-style: italic;
}

.rs-content ul,
.rs-content ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}

.rs-content li {
	margin-bottom: 0.35em;
}

/* ── Related Resources ───────────────────────────────── */

.rs-related {
	padding: 0 0 56px;
	border-top: 1px solid var(--color-border, #e5e7eb);
	padding-top: 56px;
}

.rs-related-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-primary-dark);
	margin: 0 0 var(--spacing-xl);
	text-align: center;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 768px) {
	.rs-header {
		padding: 32px 0;
	}

	.rs-title {
		font-size: 1.75rem;
	}

	.rs-actions {
		flex-wrap: wrap;
	}

	.rs-hero-image img {
		border-radius: 8px;
	}

	.rs-single .banner-buttons {
		flex-direction: column;
		align-items: center;
	}
}


/* ==========================================================================
   RESOURCE ARCHIVE
   ========================================================================== */

/* ── Archive Hero ─────────────────────────────────────────────────────────── */
.resource-archive__hero {
	padding: var(--spacing-2xl) 0 var(--spacing-lg) 0;
    text-align: center;
}

.resource-archive__title {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 var(--spacing-sm) 0;
	letter-spacing: -0.02em;
}

.resource-archive__desc {
	font-size: clamp(15px, 1.5vw, 18px);
	color: var(--color-text-muted);
	margin: 0;
	max-width: 560px;
	margin-inline: auto;
	line-height: 1.6;
}

/* ── Search & Filter Pro — Theme Override ─────────────────────────────────── */
.resource-archive__filters {
	padding: var(--spacing-md) 0 var(--spacing-2xl);
}

.resource-archive__filters .searchandfilter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: flex-end;
	justify-content: center;
}

.resource-archive__filters .searchandfilter > li {
	flex: 0 1 auto;
	margin: 0;
	padding: 0;
}

.resource-archive__filters .searchandfilter label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.resource-archive__filters .searchandfilter input[type="text"],
.resource-archive__filters .searchandfilter input[type="search"],
.resource-archive__filters .searchandfilter select {
	width: 100%;
	height: 44px;
	padding: 0 var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	font-size: 14px;
	color: var(--color-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.resource-archive__filters .searchandfilter input[type="text"]:focus,
.resource-archive__filters .searchandfilter input[type="search"]:focus,
.resource-archive__filters .searchandfilter select:focus {
	outline: none;
	border-color: var(--color-interactive-light);
	box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.1);
}

.resource-archive__filters .searchandfilter select {
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.resource-archive__filters .searchandfilter input[type="submit"] {
	height: 44px;
	padding: 0 var(--spacing-lg);
	border: none;
	border-radius: var(--radius-sm);
	background: var(--gradient-cta);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
	font-family: inherit;
}

.resource-archive__filters .searchandfilter input[type="submit"]:hover {
	background: var(--gradient-cta-hover);
}

/* Checkboxes & radios within filter */
.resource-archive__filters .searchandfilter ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: auto;
    display: flex;
    gap: 2rem;
}

.resource-archive__filters .searchandfilter ul li {
	margin: 0;
	padding: 0;
}

/* ── Results Grid ─────────────────────────────────────────────────────────── */
.resource-archive__results {
	padding-bottom: var(--spacing-2xl);
}

.resource-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-lg);
}

.resource-archive__empty {
	text-align: center;
	padding: var(--spacing-2xl) 0;
	color: var(--color-text-muted);
	font-size: 16px;
}

/* ── Resource Card (horizontal: icon 1/4 | content 3/4) ─────────────────── */
.resource-card {
	display: flex;
	flex-direction: row;
	text-decoration: none;
	color: inherit;
}

/* Reset button styles when card renders as <button> for video modal */
button.resource-card {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
	width: 100%;
}

.resource-card:hover {
	text-decoration: none;
	color: inherit;
}

/* ── Icon column (1/4 width) ───────────────────────────────────────────── */
.resource-card__icon-col {
	flex: 0 0 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--badge-bg, #EFF6FF);
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.resource-card__icon-col i,
.resource-card__icon-col svg {
	width: 40px;
	height: 40px;
	color: var(--badge-color, #2563EB);
	stroke-width: 1.5;
}

/* Icon-column colour schemes */
.resource-card__icon-col.scheme-blue    { --badge-bg: #EFF6FF; --badge-color: #2563EB; }
.resource-card__icon-col.scheme-purple  { --badge-bg: #F5F3FF; --badge-color: #7C3AED; }
.resource-card__icon-col.scheme-green   { --badge-bg: #ECFDF5; --badge-color: #059669; }
.resource-card__icon-col.scheme-orange  { --badge-bg: #FFF7ED; --badge-color: #EA580C; }
.resource-card__icon-col.scheme-cyan    { --badge-bg: #ECFEFF; --badge-color: #0891B2; }
.resource-card__icon-col.scheme-red     { --badge-bg: #FEF2F2; --badge-color: #DC2626; }
.resource-card__icon-col.scheme-lime    { --badge-bg: #F0FDF4; --badge-color: #16A34A; }
.resource-card__icon-col.scheme-amber   { --badge-bg: #FFFBEB; --badge-color: #D97706; }
.resource-card__icon-col.scheme-primary { --badge-bg: rgba(255, 20, 147, 0.08); --badge-color: #FF1493; }

/* ── Featured image in icon column ─────────────────────────────────────── */
.resource-card__icon-col.has-image {
	padding: 0;
	overflow: hidden;
}

.resource-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* ── Content column (3/4 width) ────────────────────────────────────────── */
.resource-card__content-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: var(--spacing-md) var(--spacing-lg);
	min-width: 0;
	position: relative;
}

/* ── Resource type badge ────────────────────────────────────────────────── */
.resource-card__badge {
	display: inline-block;
	width: fit-content;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	border-radius: 99px;
	line-height: 1.4;
}

/* Default badge colouring */
.resource-card__badge {
	background: var(--badge-bg, #EFF6FF);
	color: var(--badge-color, #2563EB);
}

/* Badge colour schemes (match mega-menu resource link scheme colours) */
.resource-card__badge.scheme-blue    { --badge-bg: #EFF6FF; --badge-color: #2563EB; }
.resource-card__badge.scheme-purple  { --badge-bg: #F5F3FF; --badge-color: #7C3AED; }
.resource-card__badge.scheme-green   { --badge-bg: #ECFDF5; --badge-color: #059669; }
.resource-card__badge.scheme-orange  { --badge-bg: #FFF7ED; --badge-color: #EA580C; }
.resource-card__badge.scheme-cyan    { --badge-bg: #ECFEFF; --badge-color: #0891B2; }
.resource-card__badge.scheme-red     { --badge-bg: #FEF2F2; --badge-color: #DC2626; }
.resource-card__badge.scheme-lime    { --badge-bg: #F0FDF4; --badge-color: #16A34A; }
.resource-card__badge.scheme-amber   { --badge-bg: #FFFBEB; --badge-color: #D97706; }
.resource-card__badge.scheme-primary { --badge-bg: rgba(255, 20, 147, 0.08); --badge-color: #FF1493; }

/* ── Card title / subtitle ─────────────────────────────────────────────── */
.resource-card__title {
	font-size: 17px;
	margin: 0;
	color: var(--badge-color, inherit);
}

.resource-card__subtitle {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* ── Card meta row ─────────────────────────────────────────────────────── */
.resource-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--spacing-sm);
}

.resource-card__read-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--color-text-muted);
}

.resource-card__arrow {
	position: absolute;
	top: var(--spacing-md);
	right: var(--spacing-md);
	display: inline-flex;
	align-items: center;
	color: var(--color-text-subtle);
	transition: color 0.15s ease, transform 0.15s ease;
}

.resource-card:hover .resource-card__arrow {
	color: var(--badge-color, var(--color-interactive));
	transform: translateX(3px);
}

/* ── Per-type card scheme colours (title inherits --badge-color) ────────── */
.resource-card.scheme-blue    { --badge-color: #2563EB; }
.resource-card.scheme-purple  { --badge-color: #7C3AED; }
.resource-card.scheme-green   { --badge-color: #059669; }
.resource-card.scheme-orange  { --badge-color: #EA580C; }
.resource-card.scheme-cyan    { --badge-color: #0891B2; }
.resource-card.scheme-red     { --badge-color: #DC2626; }
.resource-card.scheme-lime    { --badge-color: #16A34A; }
.resource-card.scheme-amber   { --badge-color: #D97706; }
.resource-card.scheme-primary { --badge-color: #FF1493; }

/* ── Per-type card accent on hover ─────────────────────────────────────── */
.resource-card.scheme-blue:hover    { border-color: #93C5FD; background: rgba(37, 99, 235, 0.02); }
.resource-card.scheme-purple:hover  { border-color: #C4B5FD; background: rgba(124, 58, 237, 0.02); }
.resource-card.scheme-green:hover   { border-color: #6EE7B7; background: rgba(5, 150, 105, 0.02); }
.resource-card.scheme-orange:hover  { border-color: #FDBA74; background: rgba(234, 88, 12, 0.02); }
.resource-card.scheme-cyan:hover    { border-color: #67E8F9; background: rgba(8, 145, 178, 0.02); }
.resource-card.scheme-red:hover     { border-color: #FCA5A5; background: rgba(220, 38, 38, 0.02); }
.resource-card.scheme-lime:hover    { border-color: #86EFAC; background: rgba(22, 163, 74, 0.02); }
.resource-card.scheme-amber:hover   { border-color: #FCD34D; background: rgba(217, 119, 6, 0.02); }
.resource-card.scheme-primary:hover { border-color: #FF69B4; background: rgba(255, 20, 147, 0.02); }

/* ── Pagination ────────────────────────────────────────────────────────── */
.resource-archive__results .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--spacing-xs);
	padding-top: var(--spacing-xl);
}

.resource-archive__results .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--spacing-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.resource-archive__results .page-numbers:hover {
	border-color: var(--color-interactive-light);
	background: rgba(192, 38, 211, 0.04);
	color: var(--color-interactive);
}

.resource-archive__results .page-numbers.current {
	background: var(--gradient-cta);
	color: #fff;
	border-color: transparent;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.resource-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.resource-grid {
		grid-template-columns: 1fr;
	}

	.resource-card__icon-col {
		flex: 0 0 72px;
	}

	.resource-card__icon-col i,
	.resource-card__icon-col svg {
		width: 28px;
		height: 28px;
	}

	.resource-card__content-col {
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.resource-archive__filters .searchandfilter {
		flex-direction: column;
	}
	.resource-archive__filters .searchandfilter ul {
		flex-direction: column;
		gap: var(--spacing-xs);
		width: 100%;
	}
	.resource-archive__filters .searchandfilter > li {
		max-width: 100%;
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════
   Ninja Forms — Page Embedded (.page-nf-form wrapper)
   Use: wrap any [ninja_form id=X] shortcode or do_shortcode
   call in <div class="page-nf-form"> … </div>
   ═══════════════════════════════════════════════════════════ */

/* Strip default NF chrome */
.page-nf-form .nf-form-cont {
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	width: 100%;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.page-nf-form .nf-form-wrap {
	display: block !important;
}

.page-nf-form .nf-form-layout {
	display: block !important;
}

.page-nf-form nf-rows-wrap,
.page-nf-form nf-row,
.page-nf-form nf-field {
	display: block !important;
	visibility: visible !important;
}

/* "* Required" notice */
.page-nf-form .nf-form-fields-required {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin-bottom: 20px;
}

/* Field spacing */
.page-nf-form .nf-field-container {
	margin-bottom: 20px;
}

/* Labels — NF uses <label> for most fields, <span class="nf-label-span"> for html/hr/date etc. */
.page-nf-form .nf-field-label label,
.page-nf-form .nf-field-label .nf-label-span {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-text);
	margin-bottom: 6px;
}

/* Required asterisk */
.page-nf-form .ninja-forms-req-symbol {
	color: var(--color-error, #D4183D);
	margin-left: 2px;
}

/* Inputs, Textarea, Select — mirror the modal's .field-wrap selector pattern
   (confirmed working in .nf-modal__form). Use !important on properties that
   NF's display-opinions-light.css sets unconditionally on .nf-form-content inputs
   (border-radius:0, border:1px solid #c4c4c4, height:50px, padding:12px). */
.page-nf-form .field-wrap input,
.page-nf-form .field-wrap textarea,
.page-nf-form .field-wrap select {
        width: 100%;
        padding: 11px 14px !important;
        border: 1.5px solid var(--color-border, #E9EBEF) !important;
        border-radius: 8px !important;
        background: var(--color-input-background, #f3f3f5) !important;
        font-size: 0.9375rem !important;
        color: var(--color-text, #111827) !important;
        height: auto !important;
        box-shadow: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-nf-form .field-wrap input:focus,
.page-nf-form .field-wrap textarea:focus,
.page-nf-form .field-wrap select:focus {
        outline: none;
        border-color: var(--color-primary, #FF1493) !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.1);
}

/* Textarea height */
.page-nf-form .field-wrap textarea {
        min-height: 120px;
        resize: vertical;
        height: auto !important;
}

/* Select — custom caret via background-image on the element itself */
.page-nf-form .field-wrap select {
        padding-right: 40px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        background-size: 10px 6px !important;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
}

/* Checkboxes & Radios — NF structure: .list-checkbox-wrap/.list-radio-wrap > ul > li > input + label */
.page-nf-form .list-checkbox-wrap .nf-field-element li label,
.page-nf-form .list-radio-wrap .nf-field-element li label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--color-text);
	cursor: pointer;
	margin-bottom: 8px;
}

.page-nf-form .nf-field-element input[type="checkbox"],
.page-nf-form .nf-field-element input[type="radio"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	accent-color: var(--color-primary, #FF1493);
	cursor: pointer;
	border: none;
}

/* Section / divider fields */
.page-nf-form .nf-field-container.section-container .nf-field-element,
.page-nf-form .nf-field-wrap .field-wrap.section-wrap .nf-field-element {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted, #6B7280);
	padding: 20px 0 6px;
	border-bottom: 1px solid var(--color-border, #E9EBEF);
	margin-bottom: 16px;
}

/* HTML content fields — block display so inline elements (e.g. <span>) render correctly */
.page-nf-form .nf-field-container.html-container .nf-field-element {
		display: block;
		width: 100%;
		font-size: 0.9375rem;
		color: var(--color-text-muted);
		line-height: 1.6;
	}

.page-nf-form .nf-field-container.html-container .nf-field-element span {
		display: inline;
}

/* Error messages */
.page-nf-form .nf-error-msg {
	color: var(--color-error, #D4183D);
	font-size: 0.8125rem;
	margin-top: 5px;
	display: block;
}

.page-nf-form .nf-field-container.nf-fail .field-wrap input,
.page-nf-form .nf-field-container.nf-fail .field-wrap textarea,
.page-nf-form .nf-field-container.nf-fail .field-wrap select {
	border-color: var(--color-error, #D4183D);
	box-shadow: 0 0 0 3px rgba(212, 24, 61, 0.1);
}

/* Success message */
.page-nf-form .nf-response-msg {
	padding: 16px 20px;
	background: #f0fdf4;
	border: 1.5px solid #86efac;
	border-radius: 8px;
	color: #166534;
	font-size: 0.9375rem;
	font-weight: 500;
	margin-top: 8px;
}

/* Submit button — NF uses <input type="submit"> directly inside .submit-wrap */
.page-nf-form .submit-wrap input[type="submit"],
.page-nf-form .submit-wrap input[type="button"],
.page-nf-form .submit-wrap button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-cta, linear-gradient(135deg, #C026D3, #DB2777));
	color: #fff;
	border: none;
	border-radius: var(--border-radius-sm, 6px);
	padding: 13px 32px;
	font-size: 1rem;
	font-weight: 600;
	font-family: var(--font-heading, inherit);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	min-width: 160px;
}

.page-nf-form .submit-wrap input[type="submit"]:hover,
.page-nf-form .submit-wrap input[type="button"]:hover,
.page-nf-form .submit-wrap button[type="submit"]:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* Multi-part form breadcrumbs */
.page-nf-form .mp-breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted, #6B7280);
}

.page-nf-form .mp-breadcrumbs .mp-breadcrumb-item.active {
	color: var(--color-primary, #FF1493);
}

.page-nf-form .mp-breadcrumbs .mp-breadcrumb-item.complete {
	color: var(--color-success, #10B981);
}

.page-nf-form .mp-breadcrumbs .mp-breadcrumb-separator {
	color: var(--color-border-muted, #CBCED4);
}

/* Multi-part prev/next buttons */
.page-nf-form .mp-btn-back,
.page-nf-form .mp-btn-next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 24px;
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.page-nf-form .mp-btn-back {
	background: var(--color-bg-alt, #F3F3F5);
	color: var(--color-text, #111827);
	border: 1.5px solid var(--color-border, #E9EBEF);
}

.page-nf-form .mp-btn-back:hover {
	border-color: var(--color-border-muted, #CBCED4);
}

.page-nf-form .mp-btn-next {
	background: var(--gradient-cta, linear-gradient(135deg, #C026D3, #DB2777));
	color: #fff;
	border: none;
}

.page-nf-form .mp-btn-next:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   404 Page
   ═══════════════════════════════════════════════════════════ */
.error-404 {
	text-align: center;
	padding: 120px var(--container-padding) 80px;
	max-width: var(--max-width);
	margin: 0 auto;
}

.error-404 h1 {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 400;
	color: var(--color-text);
	margin: 0 0 var(--spacing-sm) 0;
	letter-spacing: -0.02em;
}

.error-404 p {
	font-size: clamp(15px, 1.5vw, 18px);
	color: var(--color-text-muted);
	margin: 0 0 var(--spacing-lg) 0;
}