/**
 * AI Page Inspector — Generated B2B Page Style (fixed industrial style, MVP).
 *
 * Covers every class emitted by plugin/templates/sections/*.html. One fixed
 * style per the project's MVP decision — no theme system, no CSS variables
 * for brand color yet (that's a clean future addition, not built here to keep
 * this pass minimal). Loaded only where generated content is rendered.
 *
 * Layout constraint system: a single spacing scale + container width, and a
 * section-hierarchy layer keyed by [data-aipi-layout] (hero/features/content/cta)
 * so every section obeys the same grid/width/rhythm rules regardless of its
 * specific content (hero, trust, products, etc.). Specific classes below still
 * own their own detail styling (colors, card shadows, etc.) — the layout layer
 * only controls width, column count, and vertical rhythm.
 */

:root {
	--aipi-space-1: 8px;
	--aipi-space-2: 16px;
	--aipi-space-3: 24px;
	--aipi-space-4: 40px;
	--aipi-space-5: 64px;
	--aipi-container-width: 1240px;
	--aipi-content-width: 720px; /* narrower, readable-width column for text-heavy sections */

	/* Modern Minimal (default) palette. */
	--aipi-ink: #0a2540;
	--aipi-ink-soft: #123a63;
	--aipi-accent: #3a7bd5;
	--aipi-body: #4a5a68;
	--aipi-muted: #8a97a3;
	--aipi-surface: #ffffff;
	--aipi-surface-alt: #f4f6f8;
	--aipi-media-bg: #dde3e8;
	--aipi-radius: 10px;
	--aipi-radius-lg: 16px;
	--aipi-shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.08);
	--aipi-shadow-md: 0 12px 32px rgba(10, 37, 64, 0.12);
	--aipi-headline-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Always-dark contrast panel (the "advantages" section) — deliberately
	   NOT tied to --aipi-ink/--aipi-surface, which flip meaning between
	   Modern Minimal and Premium Business; this pairing must stay a dark
	   background with light text in both styles. */
	--aipi-panel-bg: #0a2540;
	--aipi-panel-text: #ffffff;
	--aipi-panel-text-soft: #c7d3dd;
}

/* Premium Business variant: set by applying data-aipi-style="premium" to
   #aipi-generated-root (see the "UI Style" toggle on the Pages/Landing
   tabs, wired up in inspector.js) — richer, deeper-contrast palette, a
   serif headline pairing, and crisper/less-rounded detailing for a more
   upscale enterprise feel, using the exact same markup and class names as
   the default. */
[data-aipi-style='premium'] {
	--aipi-ink: #f5efe3;
	--aipi-ink-soft: #d8c9a3;
	--aipi-accent: #c9a15a;
	--aipi-body: #cbd3da;
	--aipi-muted: #8f97a1;
	--aipi-surface: #12161c;
	--aipi-surface-alt: #171b22;
	--aipi-media-bg: #1d222a;
	--aipi-radius: 3px;
	--aipi-radius-lg: 4px;
	--aipi-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
	--aipi-shadow-md: 0 20px 44px rgba(0, 0, 0, 0.45);
	--aipi-headline-font: Georgia, "Times New Roman", "Noto Serif", serif;
	--aipi-panel-bg: #05070a;
	--aipi-panel-text: #f5efe3;
	--aipi-panel-text-soft: #cbd3da;
	background: #0d1015;
	color: var(--aipi-body);
}

#aipi-generated-root {
	display: block;
	width: 100%;
	clear: both;
	box-sizing: border-box;
}

#aipi-generated-root > .aipi-sec,
#aipi-generated-root > .aipi-generated-module {
	display: block;
	width: 100%;
}

.aipi-sec {
	display: block;
	padding: var(--aipi-space-5) var(--aipi-space-3);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	clear: both;
}

.aipi-sec * {
	box-sizing: border-box;
}

.aipi-sec-inner {
	max-width: var(--aipi-container-width);
	margin: 0 auto;
}

/* ---------- Section-hierarchy layout layer ---------- */

/* Hero: full-width section background, content constrained to the container. */
[data-aipi-layout='hero'] .aipi-sec-inner,
[data-aipi-layout='hero'] .aipi-split {
	max-width: var(--aipi-container-width);
}

/* Feature blocks: 2-3 column max on desktop, never more. Existing grids
   (trust metrics, product cards, advantages) already use auto-fit/minmax;
   this rule caps them so they never sprawl past 3 columns regardless of
   how many items a future template variant might add. */
[data-aipi-layout='features'] .aipi-trust-metrics,
[data-aipi-layout='features'] .aipi-product-grid,
[data-aipi-layout='features'] .aipi-advantages-grid,
[data-aipi-layout='features'] .aipi-testimonials-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 900px) {
	[data-aipi-layout='features'] .aipi-product-grid,
	[data-aipi-layout='features'] .aipi-advantages-grid,
	[data-aipi-layout='features'] .aipi-testimonials-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	[data-aipi-layout='features'] .aipi-trust-metrics {
		grid-template-columns: repeat(3, auto);
		display: grid;
		justify-content: center;
	}
}

/* Content sections: single, readable-width column — not the full container. */
[data-aipi-layout='content'] .aipi-split-copy,
[data-aipi-layout='content'] .aipi-proof-quote,
[data-aipi-layout='content'] .aipi-sec-intro {
	max-width: var(--aipi-content-width);
}

[data-aipi-layout='content'] .aipi-proof-quote {
	margin-left: auto;
	margin-right: auto;
}

/* CTA: centered, constrained width — never full-bleed text. */
[data-aipi-layout='cta'] .aipi-cta-inner {
	max-width: var(--aipi-content-width);
	margin: 0 auto;
	text-align: center;
}

/* Visual rhythm: every section gets consistent vertical spacing between it
   and its neighbor, on top of its own internal padding. No section is
   allowed to sit flush against the next with zero breathing room. */
.aipi-sec + .aipi-sec {
	border-top: 1px solid rgba(10, 37, 64, 0.06);
}

.aipi-btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: var(--aipi-radius);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.aipi-btn-primary {
	background: var(--aipi-ink);
	color: var(--aipi-surface);
	box-shadow: var(--aipi-shadow-sm);
}

.aipi-btn-primary:hover {
	background: var(--aipi-ink-soft);
	transform: translateY(-2px);
	box-shadow: var(--aipi-shadow-md);
}

.aipi-btn-ghost {
	background: transparent;
	color: var(--aipi-ink);
	border-color: var(--aipi-ink);
}

.aipi-btn-ghost:hover {
	background: var(--aipi-ink);
	color: var(--aipi-surface);
	transform: translateY(-2px);
}

/* Premium Business: crisper corners, gold accent border instead of a solid
   fill on the secondary button, no translate-lift (a stiller, more formal
   interaction). */
[data-aipi-style='premium'] .aipi-btn {
	border-radius: var(--aipi-radius);
	letter-spacing: 0.02em;
}

[data-aipi-style='premium'] .aipi-btn-primary {
	background: var(--aipi-accent);
	color: #05070a;
}

[data-aipi-style='premium'] .aipi-btn-primary:hover {
	background: #dab876;
	transform: none;
	box-shadow: 0 0 0 3px rgba(201, 161, 90, 0.25);
}

[data-aipi-style='premium'] .aipi-btn-ghost {
	color: var(--aipi-accent);
	border-color: var(--aipi-accent);
}

[data-aipi-style='premium'] .aipi-btn-ghost:hover {
	background: var(--aipi-accent);
	color: #05070a;
	transform: none;
}

/* ---------- Hero ---------- */

.aipi-sec-hero {
	background: linear-gradient(160deg, var(--aipi-surface-alt) 0%, var(--aipi-surface) 65%);
}

[data-aipi-style='premium'] .aipi-sec-hero {
	background: radial-gradient(ellipse at top right, rgba(201, 161, 90, 0.08), transparent 60%), var(--aipi-surface);
}

.aipi-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.aipi-hero-copy,
.aipi-product-hero-copy {
	min-width: 0;
}

.aipi-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	color: var(--aipi-accent);
	margin: 0 0 12px;
}

.aipi-hero-headline {
	font-family: var(--aipi-headline-font);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--aipi-ink);
	letter-spacing: -0.01em;
}

.aipi-hero-subhead {
	font-size: 18px;
	line-height: 1.5;
	color: var(--aipi-body);
	margin: 0 0 28px;
}

.aipi-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.aipi-hero-media {
	display: flex;
	justify-content: center;
}

.aipi-hero-img {
	width: 100%;
	max-width: 480px;
	height: auto;
	border-radius: var(--aipi-radius-lg);
	background: var(--aipi-media-bg);
	object-fit: cover;
	box-shadow: var(--aipi-shadow-md);
}

/* ---------- Trust ---------- */

.aipi-sec-trust {
	background: var(--aipi-surface);
	text-align: center;
}

.aipi-sec-kicker {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	color: var(--aipi-muted);
	margin: 0 0 32px;
}

.aipi-trust-metrics {
	display: flex;
	justify-content: center;
	gap: 64px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	flex-wrap: wrap;
}

.aipi-metric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.aipi-metric-value {
	font-family: var(--aipi-headline-font);
	font-size: 38px;
	font-weight: 700;
	color: var(--aipi-ink);
	font-variant-numeric: tabular-nums;
}

.aipi-metric-label {
	font-size: 14px;
	color: var(--aipi-muted);
	margin-top: 4px;
}

.aipi-trust-certs {
	font-size: 14px;
	color: var(--aipi-muted);
	letter-spacing: 0.04em;
}

/* ---------- Products ---------- */

.aipi-sec-products {
	background: var(--aipi-surface-alt);
}

.aipi-sec-title {
	font-family: var(--aipi-headline-font);
	font-size: 30px;
	font-weight: 700;
	color: var(--aipi-ink);
	margin: 0 0 12px;
	text-align: center;
}

.aipi-sec-intro {
	font-size: 16px;
	color: var(--aipi-body);
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.aipi-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aipi-product-card {
	background: var(--aipi-surface);
	border-radius: var(--aipi-radius-lg);
	padding: 28px 24px;
	box-shadow: var(--aipi-shadow-sm);
	border: 1px solid rgba(10, 37, 64, 0.06);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.aipi-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--aipi-shadow-md);
}

.aipi-product-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

[data-aipi-style='premium'] .aipi-product-card {
	border-color: rgba(201, 161, 90, 0.28);
}

.aipi-product-img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--aipi-media-bg);
	margin-bottom: 16px;
}

.aipi-product-name {
	font-family: var(--aipi-headline-font);
	font-size: 19px;
	font-weight: 700;
	color: var(--aipi-ink);
	margin: 0 0 8px;
}

.aipi-product-desc {
	font-size: 15px;
	color: var(--aipi-body);
	line-height: 1.5;
	margin: 0;
}

/* ---------- Applications (split layout) ---------- */

.aipi-split {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.aipi-split-media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: var(--aipi-media-bg);
}

.aipi-sec-applications {
	background: var(--aipi-surface);
}

.aipi-applications-img {
	display: block;
	box-shadow: var(--aipi-shadow-md);
}

.aipi-applications-list {
	list-style: disc;
	padding-left: 20px;
	color: var(--aipi-body);
	font-size: 16px;
	line-height: 1.8;
}

/* ---------- Advantages ---------- */

.aipi-sec-advantages {
	background: var(--aipi-panel-bg);
	color: var(--aipi-panel-text);
	border-top: 1px solid rgba(201, 161, 90, 0.35);
}

.aipi-sec-advantages .aipi-sec-title {
	color: var(--aipi-panel-text);
}

.aipi-advantages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aipi-advantage {
	min-width: 0;
}

.aipi-advantage-name {
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--aipi-panel-text);
}

.aipi-advantage-desc {
	font-size: 15px;
	color: var(--aipi-panel-text-soft);
	line-height: 1.5;
	margin: 0;
}

/* ---------- Proof ---------- */

.aipi-sec-proof {
	background: var(--aipi-surface);
	text-align: center;
}

.aipi-proof-quote {
	max-width: 720px;
	margin: 0 auto;
	border: none;
	padding: 0;
}

.aipi-proof-text {
	font-family: var(--aipi-headline-font);
	font-size: 23px;
	line-height: 1.5;
	color: var(--aipi-ink);
	font-style: italic;
	margin: 0 0 20px;
}

.aipi-proof-attr {
	font-size: 14px;
	color: var(--aipi-muted);
}

.aipi-proof-role {
	color: var(--aipi-muted);
	font-size: 14px;
}

.aipi-proof-name {
	font-weight: 700;
	color: var(--aipi-ink);
}

.aipi-proof-result {
	margin-top: 24px;
	font-size: 16px;
	color: var(--aipi-accent);
	font-weight: 600;
}

/* ---------- Logos (client / press wordmark trust strip) ---------- */

.aipi-sec-logos {
	background: var(--aipi-surface-alt);
	padding-top: var(--aipi-space-3);
	padding-bottom: var(--aipi-space-3);
}

.aipi-sec-logos .aipi-sec-kicker {
	text-align: center;
	margin-bottom: var(--aipi-space-2);
}

.aipi-logos-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aipi-logo-item {
	min-width: 0;
}

.aipi-logo-name {
	display: inline-block;
	font-family: var(--aipi-headline-font);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--aipi-muted);
	opacity: 0.75;
	transition: opacity 200ms ease, color 200ms ease;
}

.aipi-logo-item:hover .aipi-logo-name {
	opacity: 1;
	color: var(--aipi-ink);
}

/* ---------- Comparison (decision matrix / us-vs-alternative table) ---------- */

.aipi-sec-comparison {
	background: var(--aipi-surface);
}

.aipi-comparison-table-wrap {
	overflow-x: auto;
	border-radius: var(--aipi-radius-lg);
	box-shadow: var(--aipi-shadow-sm);
}

.aipi-comparison-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	background: var(--aipi-surface);
}

.aipi-comparison-table th,
.aipi-comparison-table td {
	padding: 14px 20px;
	text-align: left;
	font-size: 14px;
	border-bottom: 1px solid var(--aipi-surface-alt);
}

.aipi-comparison-table thead th {
	background: var(--aipi-ink);
	color: var(--aipi-surface);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.aipi-comparison-table tbody td:first-child {
	font-weight: 700;
	color: var(--aipi-ink);
}

.aipi-comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.aipi-comparison-table .aipi-comparison-col-highlight {
	background: var(--aipi-surface-alt);
	color: var(--aipi-accent);
	font-weight: 700;
}

.aipi-comparison-table thead .aipi-comparison-col-highlight {
	background: var(--aipi-ink-soft);
	color: var(--aipi-surface);
}

/* ---------- Gallery (exhibitions / facility / customer visits) ---------- */

.aipi-sec-gallery {
	background: var(--aipi-surface-alt);
}

.aipi-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.aipi-gallery-item {
	min-width: 0;
	border-radius: var(--aipi-radius);
	overflow: hidden;
	background: var(--aipi-surface);
	box-shadow: var(--aipi-shadow-sm);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.aipi-gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--aipi-shadow-md);
}

.aipi-gallery-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--aipi-media-bg);
}

.aipi-gallery-caption {
	margin: 0;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aipi-ink);
}

/* ---------- Testimonials (quick multi-quote social proof) ---------- */

.aipi-sec-testimonials {
	background: var(--aipi-surface);
}

.aipi-testimonials-grid {
	display: grid;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aipi-testimonial {
	min-width: 0;
	padding: 24px;
	border-radius: var(--aipi-radius-lg);
	background: var(--aipi-surface-alt);
	box-shadow: var(--aipi-shadow-sm);
}

.aipi-testimonial-quote {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--aipi-ink);
}

.aipi-testimonial-quote::before {
	content: '\201C';
}

.aipi-testimonial-quote::after {
	content: '\201D';
}

.aipi-testimonial-attr {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aipi-testimonial-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--aipi-ink);
}

.aipi-testimonial-role {
	font-size: 13px;
	color: var(--aipi-muted);
}

/* ---------- CTA ---------- */

.aipi-sec-cta {
	background: linear-gradient(135deg, var(--aipi-surface-alt) 0%, var(--aipi-surface) 100%);
	text-align: center;
}

[data-aipi-style='premium'] .aipi-sec-cta {
	background: radial-gradient(ellipse at center, rgba(201, 161, 90, 0.1), transparent 65%), var(--aipi-panel-bg);
	color: var(--aipi-panel-text);
	border-top: 1px solid rgba(201, 161, 90, 0.35);
	border-bottom: 1px solid rgba(201, 161, 90, 0.35);
}

[data-aipi-style='premium'] .aipi-cta-headline,
[data-aipi-style='premium'] .aipi-cta-subhead {
	color: var(--aipi-panel-text);
}

.aipi-cta-inner {
	max-width: 640px;
	margin: 0 auto;
}

.aipi-cta-headline {
	font-family: var(--aipi-headline-font);
	font-size: 34px;
	font-weight: 700;
	color: var(--aipi-ink);
	margin: 0 0 12px;
}

.aipi-cta-subhead {
	font-size: 17px;
	color: var(--aipi-body);
	margin: 0 0 28px;
}

.aipi-cta-btn {
	margin-top: var(--aipi-space-2);
}

.aipi-cta-split {
	text-align: left;
}

/* ---------- Library variant: hero "bold-centered" ---------- */

.aipi-hero-bold {
	background: linear-gradient(160deg, var(--aipi-panel-bg) 0%, #123a63 100%);
	color: var(--aipi-panel-text);
	text-align: center;
	padding-top: var(--aipi-space-5);
	padding-bottom: var(--aipi-space-5);
}

.aipi-hero-bold-inner {
	max-width: 760px;
	margin: 0 auto;
}

.aipi-hero-bold .aipi-eyebrow {
	color: var(--aipi-accent);
}

.aipi-hero-bold .aipi-hero-headline,
.aipi-hero-bold .aipi-hero-subhead {
	color: var(--aipi-panel-text);
}

.aipi-hero-bold .aipi-hero-subhead {
	color: var(--aipi-panel-text-soft);
}

.aipi-hero-actions-center {
	justify-content: center;
}

.aipi-btn-ghost-invert {
	color: var(--aipi-panel-text);
	border-color: var(--aipi-panel-text);
}

.aipi-btn-ghost-invert:hover {
	background: var(--aipi-panel-text);
	color: var(--aipi-panel-bg);
}

[data-aipi-style='premium'] .aipi-hero-bold {
	background: radial-gradient(ellipse at top, rgba(201, 161, 90, 0.14), transparent 60%), var(--aipi-panel-bg);
}

/* ---------- Library variant: cta "split-form" ---------- */

.aipi-cta-split-inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: var(--aipi-space-4);
	align-items: center;
	max-width: var(--aipi-container-width);
	text-align: left;
}

.aipi-cta-split-copy .aipi-cta-headline,
.aipi-cta-split-copy .aipi-cta-subhead {
	margin: 0 0 var(--aipi-space-1);
}

.aipi-cta-split-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--aipi-space-4);
	background: var(--aipi-surface);
	border-radius: var(--aipi-radius-lg);
	box-shadow: var(--aipi-shadow-md);
	border: 1px solid rgba(10, 37, 64, 0.08);
}

.aipi-cta-split-btn {
	width: 100%;
	text-align: center;
}

[data-aipi-style='premium'] .aipi-cta-split-card {
	border-color: rgba(201, 161, 90, 0.3);
}

@media (max-width: 780px) {
	.aipi-cta-split-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

/* ---------- About Us ---------- */

.aipi-sec-about {
	background: var(--aipi-surface);
}

.aipi-split-reverse {
	grid-template-columns: 1.1fr 0.9fr;
}

.aipi-sec-title-left,
.aipi-sec-intro-left {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.aipi-sec-intro-left {
	max-width: none;
}

.aipi-about-img {
	width: 100%;
	height: auto;
	border-radius: var(--aipi-radius-lg);
	box-shadow: var(--aipi-shadow-md);
}

/* ---------- Image Box ---------- */

.aipi-sec-imagebox {
	background: var(--aipi-surface-alt);
	padding-top: var(--aipi-space-4);
	padding-bottom: var(--aipi-space-4);
}

.aipi-imagebox-frame {
	position: relative;
	border-radius: var(--aipi-radius-lg);
	overflow: hidden;
	box-shadow: var(--aipi-shadow-md);
}

.aipi-imagebox-img {
	display: block;
	width: 100%;
	height: auto;
}

.aipi-imagebox-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: var(--aipi-space-3) var(--aipi-space-4);
	background: linear-gradient(0deg, rgba(5, 7, 10, 0.82), transparent);
	color: #ffffff;
}

.aipi-imagebox-kicker {
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	font-weight: 700;
	color: var(--aipi-accent);
}

.aipi-imagebox-headline {
	margin: 0;
	font-family: var(--aipi-headline-font);
	font-size: 26px;
	color: #ffffff;
}

/* ---------- Timeline ---------- */

.aipi-sec-timeline {
	background: var(--aipi-surface);
}

.aipi-timeline-track {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: var(--aipi-space-3);
	list-style: none;
	margin: var(--aipi-space-3) 0 0;
	padding: 0;
}

.aipi-timeline-step {
	position: relative;
	padding: var(--aipi-space-3) var(--aipi-space-2) 0;
	border-top: 3px solid var(--aipi-accent);
}

.aipi-timeline-num {
	display: block;
	font-family: var(--aipi-headline-font);
	font-size: 28px;
	font-weight: 700;
	color: var(--aipi-accent);
	opacity: 0.5;
	margin-bottom: 6px;
}

.aipi-timeline-step-title {
	font-size: 17px;
	margin: 0 0 6px;
	color: var(--aipi-ink);
}

.aipi-timeline-step-desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--aipi-body);
	margin: 0;
}

/* ---------- Before / After ---------- */

.aipi-sec-beforeafter {
	background: var(--aipi-surface-alt);
}

.aipi-beforeafter-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--aipi-space-3);
	margin-top: var(--aipi-space-3);
}

.aipi-beforeafter-col {
	padding: var(--aipi-space-3);
	border-radius: var(--aipi-radius);
	background: var(--aipi-surface);
	box-shadow: var(--aipi-shadow-sm);
}

.aipi-beforeafter-tag {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.aipi-beforeafter-before .aipi-beforeafter-tag {
	background: rgba(239, 68, 68, 0.12);
	color: #b91c1c;
}

.aipi-beforeafter-after .aipi-beforeafter-tag {
	background: rgba(34, 197, 94, 0.14);
	color: #15803d;
}

.aipi-beforeafter-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--aipi-body);
}

/* ---------- FAQ ---------- */

.aipi-sec-faq {
	background: var(--aipi-surface);
}

.aipi-faq-list {
	max-width: var(--aipi-content-width);
	margin: var(--aipi-space-3) auto 0;
}

.aipi-faq-item {
	border-bottom: 1px solid rgba(10, 37, 64, 0.1);
	padding: var(--aipi-space-2) 0;
}

.aipi-faq-question {
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--aipi-ink);
	list-style: none;
}

.aipi-faq-question::-webkit-details-marker {
	display: none;
}

.aipi-faq-question::after {
	content: '+';
	float: right;
	color: var(--aipi-accent);
	font-weight: 700;
}

.aipi-faq-item[open] .aipi-faq-question::after {
	content: '\2212';
}

.aipi-faq-answer {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--aipi-body);
}

/* ---------- Contact Us ---------- */

.aipi-sec-contact {
	background: var(--aipi-surface-alt);
}

.aipi-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--aipi-space-4);
	align-items: start;
}

.aipi-contact-details {
	list-style: none;
	margin: var(--aipi-space-2) 0 0;
	padding: 0;
	color: var(--aipi-body);
	font-size: 15px;
	line-height: 2;
}

.aipi-contact-info {
	color: var(--aipi-body);
	line-height: 1.7;
}

.aipi-contact-card {
	padding: var(--aipi-space-3);
	background: var(--aipi-surface);
	border-radius: var(--aipi-radius-lg);
	box-shadow: var(--aipi-shadow-md);
	border: 1px solid rgba(10, 37, 64, 0.06);
}

.aipi-contact-card-label {
	margin: 0 0 var(--aipi-space-1);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aipi-muted);
}

.aipi-contact-field {
	padding: 10px 12px;
	margin-bottom: 10px;
	border: 1px solid rgba(10, 37, 64, 0.15);
	border-radius: 6px;
	color: var(--aipi-muted);
	font-size: 14px;
	background: var(--aipi-surface-alt);
}

.aipi-contact-field-area {
	min-height: 70px;
}

.aipi-contact-submit {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

[data-aipi-style='premium'] .aipi-contact-card,
[data-aipi-style='premium'] .aipi-beforeafter-col {
	border-color: rgba(201, 161, 90, 0.28);
}

/* ---------- Breadcrumb ---------- */

.aipi-sec-breadcrumb {
	background: var(--aipi-surface-alt);
	padding-top: var(--aipi-space-1);
	padding-bottom: var(--aipi-space-1);
}

.aipi-breadcrumb-trail {
	font-size: 13px;
	color: var(--aipi-muted);
}

.aipi-breadcrumb-link {
	color: var(--aipi-muted);
	text-decoration: none;
}

.aipi-breadcrumb-link:hover {
	color: var(--aipi-accent);
	text-decoration: underline;
}

.aipi-breadcrumb-sep {
	margin: 0 8px;
	color: var(--aipi-muted);
	opacity: 0.6;
}

.aipi-breadcrumb-current {
	color: var(--aipi-ink);
	font-weight: 600;
}

/* ---------- Product Hero (product detail page) ---------- */

.aipi-sec-product-hero {
	background: var(--aipi-surface-alt);
}

.aipi-product-hero-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--aipi-space-4);
	align-items: center;
}

.aipi-product-gallery-main img {
	width: 100%;
	height: auto;
	border-radius: var(--aipi-radius-lg);
	box-shadow: var(--aipi-shadow-md);
}

.aipi-product-gallery {
	min-width: 0;
}

.aipi-product-gallery-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.aipi-product-gallery-thumb {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background: var(--aipi-media-bg);
	border: 2px solid transparent;
}

.aipi-product-gallery-thumb:first-child {
	border-color: var(--aipi-accent);
}

.aipi-product-hero-name {
	font-family: var(--aipi-headline-font);
	font-size: 34px;
	font-weight: 700;
	color: var(--aipi-ink);
	margin: 0 0 12px;
}

.aipi-product-hero-specs {
	list-style: none;
	margin: 0 0 var(--aipi-space-3);
	padding: 0;
	color: var(--aipi-body);
	font-size: 15px;
	line-height: 1.9;
}

.aipi-product-hero-specs li::before {
	content: '\2713 ';
	color: var(--aipi-accent);
	font-weight: 700;
}

/* ---------- Spec Table ---------- */

.aipi-sec-specs {
	background: var(--aipi-surface);
}

.aipi-spec-table {
	width: 100%;
	max-width: var(--aipi-content-width);
	margin: var(--aipi-space-3) auto 0;
	border-collapse: collapse;
	font-size: 15px;
}

.aipi-spec-table tr {
	border-bottom: 1px solid rgba(10, 37, 64, 0.1);
}

.aipi-spec-table th {
	width: 40%;
	padding: 12px 16px 12px 0;
	text-align: left;
	color: var(--aipi-muted);
	font-weight: 700;
}

.aipi-spec-table td {
	padding: 12px 0;
	text-align: left;
	color: var(--aipi-ink);
	font-weight: 600;
}

/* ---------- Downloads ---------- */

.aipi-sec-downloads {
	background: var(--aipi-surface-alt);
}

.aipi-downloads-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var(--aipi-space-2);
	list-style: none;
	margin: var(--aipi-space-3) 0 0;
	padding: 0;
}

.aipi-download-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--aipi-space-2);
	background: var(--aipi-surface);
	border-radius: var(--aipi-radius);
	box-shadow: var(--aipi-shadow-sm);
}

.aipi-download-icon {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--aipi-accent);
}

.aipi-download-label {
	flex: 1 1 auto;
	font-size: 14px;
	color: var(--aipi-ink);
	font-weight: 600;
}

.aipi-download-link {
	flex: 0 0 auto;
	color: var(--aipi-accent);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.aipi-download-link:hover {
	text-decoration: underline;
}

/* ---------- Related Items ---------- */

.aipi-sec-related {
	background: var(--aipi-surface);
}

.aipi-related-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var(--aipi-space-3);
	list-style: none;
	margin: var(--aipi-space-3) 0 0;
	padding: 0;
}

.aipi-related-card {
	padding: var(--aipi-space-3);
	border-radius: var(--aipi-radius);
	background: var(--aipi-surface-alt);
	border: 1px solid rgba(10, 37, 64, 0.06);
}

.aipi-related-name {
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--aipi-ink);
}

.aipi-related-desc {
	font-size: 14px;
	color: var(--aipi-body);
	line-height: 1.5;
	margin: 0 0 12px;
}

.aipi-related-link {
	color: var(--aipi-accent);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.aipi-related-link:hover {
	text-decoration: underline;
}

[data-aipi-style='premium'] .aipi-download-card,
[data-aipi-style='premium'] .aipi-related-card {
	border-color: rgba(201, 161, 90, 0.28);
}

/* ================================================================== *
 * Enhanced B2B section elements (dev.53)
 *
 * Styling for the marketing elements added to the section templates in this
 * pass: hero credibility chips + spec badge, product card media frame / spec
 * line / link, advantage icon + metric, the trust section 4th metric, and the
 * CTA reassurance + secondary action. All reuse the existing design tokens so
 * both Modern Minimal and Premium Business inherit them; premium-specific
 * accents are added where the default token flip isn't enough.
 * ================================================================== */

/* Accent-coloured kicker variant (products / applications lead-ins). */
.aipi-sec-kicker-accent {
	color: var(--aipi-accent);
}

/* The advantages section sits on the always-dark panel background, so its
   kicker needs the light panel-soft colour rather than the default muted grey
   (which is too low-contrast on dark). */
.aipi-sec-advantages .aipi-sec-kicker {
	color: var(--aipi-panel-text-soft);
}

.aipi-sec-kicker-left {
	text-align: left;
}

/* ---------- Hero: credibility chips ---------- */

.aipi-hero-trustbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.aipi-hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--aipi-ink-soft);
}

.aipi-hero-chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aipi-accent);
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.14);
}

[data-aipi-style='premium'] .aipi-hero-chip-dot {
	box-shadow: 0 0 0 3px rgba(201, 161, 90, 0.18);
}

/* ---------- Hero: floating spec badge over the media ---------- */

.aipi-hero-media {
	position: relative;
}

.aipi-hero-badge {
	position: absolute;
	left: -14px;
	bottom: 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 14px 18px;
	background: var(--aipi-ink);
	color: var(--aipi-surface);
	border-radius: var(--aipi-radius);
	box-shadow: var(--aipi-shadow-md);
	max-width: 200px;
}

[data-aipi-style='premium'] .aipi-hero-badge {
	background: var(--aipi-accent);
	color: #05070a;
}

.aipi-hero-badge-value {
	font-family: var(--aipi-headline-font);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.aipi-hero-badge-label {
	font-size: 12px;
	line-height: 1.3;
	margin-top: 4px;
	opacity: 0.85;
}

/* When the badge would have no content (both slots empty after assembly), it
   collapses to nothing visually — an empty badge is just an empty flex box.
   :empty can't detect whitespace, so we keep it lightweight and let empty
   text render an empty (unobtrusive) pill; acceptable for MVP. */

/* ---------- Products: media frame, spec line, card link ---------- */

.aipi-product-media {
	margin: -28px -24px 20px;
	overflow: hidden;
	border-radius: var(--aipi-radius-lg) var(--aipi-radius-lg) 0 0;
	background: var(--aipi-media-bg);
}

.aipi-product-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.aipi-product-spec {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--aipi-accent);
	margin: 0 0 8px;
}

.aipi-product-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--aipi-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: gap 180ms ease, border-color 180ms ease;
}

.aipi-product-link::after {
	content: "\2192";
	transition: transform 180ms ease;
}

.aipi-product-card:hover .aipi-product-link {
	border-color: currentColor;
}

.aipi-product-card:hover .aipi-product-link::after {
	transform: translateX(3px);
}

[data-aipi-style='premium'] .aipi-product-link {
	color: var(--aipi-accent);
}

/* ---------- Advantages: icon glyph + supporting metric ---------- */

.aipi-advantage-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 22px;
	line-height: 1;
}

.aipi-advantage-metric {
	margin: 14px 0 0;
	font-family: var(--aipi-headline-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--aipi-panel-text);
	opacity: 0.92;
}

[data-aipi-style='premium'] .aipi-advantage-icon {
	background: rgba(201, 161, 90, 0.16);
	color: var(--aipi-accent);
}

/* ---------- CTA: secondary action + reassurance ---------- */

.aipi-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 22px;
	margin-top: 8px;
}

.aipi-cta-secondary {
	font-size: 15px;
	font-weight: 700;
	color: var(--aipi-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 180ms ease;
}

.aipi-cta-secondary:hover {
	border-color: currentColor;
}

[data-aipi-style='premium'] .aipi-cta-secondary {
	color: var(--aipi-accent);
}

.aipi-cta-reassurance {
	margin: 18px 0 0;
	font-size: 13.5px;
	color: var(--aipi-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
	.aipi-hero-grid,
	.aipi-split,
	.aipi-split-reverse,
	.aipi-beforeafter-grid,
	.aipi-contact-grid,
	.aipi-product-hero-grid {
		grid-template-columns: 1fr;
	}

	.aipi-hero-headline {
		font-size: 30px;
	}

	.aipi-trust-metrics {
		gap: 32px;
	}

	.aipi-hero-badge {
		left: auto;
		right: 16px;
		bottom: 16px;
	}

	.aipi-product-media {
		margin: -28px -24px 20px;
	}
}