/* AUTO-GENERATED by scripts/build/marketing-css-bundle.sh */
/* Source files concatenated below — DO NOT EDIT THIS FILE DIRECTLY. */


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/header.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/header.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Section Header (utility)
 * Layout: marketing.section.header
 *
 * Used on: any section that delegates heading rendering (proof-grid, pricing-grid, etc.)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - heading      (required) — h2 text
 *   - intro        (optional) — subheading / intro paragraph
 *   - align        (optional, default 'left') — 'left' | 'center' | 'right'
 *   - eyebrow      (optional) — small badge label above heading
 *   - eyebrow_note (optional) — clarifying note beneath heading, styled as a muted pill
 *
 * Visual spec:
 *   Heading at h2 size with optional intro paragraph below. Alignment
 *   controlled by modifier class. Eyebrow (if present) shows as a small
 *   violet uppercase label above the heading. eyebrow_note shows as a muted
 *   pill beneath the heading for contextual clarification.
 *
 * Tokens used:
 *   --nllm-text, --nllm-text-muted, --nllm-text-h2, --nllm-text-body,
 *   --nllm-text-sm, --nllm-text-xs, --nllm-violet-pale, --nllm-space-xl, --nllm-space-md
 *
 * M1 status: complete — simple utility, no M2 changes expected.
 *
 * [claude:sonnet-4.6][client:2.1.159][hurc:v0.10.1]
 */

.pc-section-header {
	margin-bottom: var(--nllm-space-xl);
}

.pc-section-header--center {
	text-align: center;
}

.pc-section-header--right {
	text-align: right;
}

.pc-section-header__eyebrow {
	display: inline-block;
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	color: var(--nllm-violet-pale);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--nllm-space-md);
}

.pc-section-header__heading {
	font-size: var(--nllm-text-h2, 2.25rem);
	font-weight: 800;
	color: var(--nllm-text);
	margin: 0 0 var(--nllm-space-md);
	line-height: 1.15;
}

.pc-section-header__eyebrow-note {
	display: inline-block;
	font-size: var(--nllm-text-xs, 0.75rem);
	color: var(--nllm-text-muted);
	background: color-mix(in srgb, var(--nllm-violet-pale) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--nllm-violet-pale) 30%, transparent);
	border-radius: 4px;
	padding: 0.2em 0.6em;
	margin-bottom: var(--nllm-space-md);
	letter-spacing: 0.01em;
}

.pc-section-header__intro {
	font-size: var(--nllm-text-body, 1rem);
	color: var(--nllm-text-muted);
	line-height: 1.7;
	max-width: 680px;
	margin: 0;
}

.pc-section-header--center .pc-section-header__intro {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.pc-section-header__heading {
		font-size: var(--nllm-text-h3, 1.5rem);
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/calculator.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/calculator.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Calculator — Power Claude savings calculator (CONVERSION-FOCUSED)
 * Layout: marketing.section.calculator
 *
 * Used on: product (/power-claude)
 *
 * VISUAL SPEC
 *   This is a SALES TOOL, not a dev toy. Hierarchy reads top-to-bottom:
 *     1. Section header — 2-line punch ("Show me the savings" + lede)
 *     2. HERO output    — giant gradient number ("Hours reclaimed per month")
 *                         applying .nllm-emph--bolt (amber→magenta→violet)
 *     3. Two secondary stats (rate-limit recovery, context-switch tax) — side-by-side
 *     4. Three sliders (sessions/day, hours/day, accounts in rotation)
 *
 *   Mobile-first: at 320px everything stacks single-column. At ≥600px the two
 *   secondary stats sit side-by-side. The card itself stays centred up to 680px.
 *
 *   The hero number is FIRST in DOM order (above the sliders) so mobile users
 *   see the value prop before they're asked to play with controls. Desktop
 *   reading order is identical — the eye lands on the big gradient number,
 *   then drops down to the inputs.
 *
 * PADDING NOTE
 *   Tightened ~30% vs the original card (xl → lg, lg → md). The calculator
 *   sits between dense feature blocks; excess interior padding made it feel
 *   like a separate landing page rather than a section.
 *
 * TOKENS USED
 *   --nllm-surface, --nllm-surface-soft, --nllm-text, --nllm-text-muted,
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-text-h1, --nllm-text-h2,
 *   --nllm-violet, --nllm-violet-pale,
 *   --nllm-space-xs/sm/md/lg/xl/2xl,
 *   --nllm-radius-md/lg, --nllm-shadow-md
 *
 *   .nllm-emph--bolt (from templates/nllm/css/components.css) supplies the
 *   hot-gradient text fill on the hero number — DO NOT duplicate that here.
 *
 * [claude:sonnet-4.6] M1 scaffold
 * [claude:opus-4.7-1m] redesign: hero-first, drop slider-cruft styles, mobile-first
 */

/* ─────────────────────────────────────────────────────────────────────
 * SECTION CONTAINER
 * Dark surface acts as a "rest stop" between the feature-grid and the
 * pricing block above/below it on the product page.
 * ───────────────────────────────────────────────────────────────────── */
.pc-section--calculator {
	background-color: var(--nllm-surface);
}

/* ─────────────────────────────────────────────────────────────────────
 * SECTION HEADER — "Show me the savings"
 * Centered above the card. Heading uses the standard h2 token; the lede
 * is one line, muted, never wraps to more than two lines at 320px.
 * ───────────────────────────────────────────────────────────────────── */
.pc-calc__header {
	max-width: 680px;
	margin: 0 auto var(--nllm-space-lg);
	text-align: center;
}

.pc-calc__heading {
	font-size: var(--nllm-text-h2, 36px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--nllm-text);
	margin: 0 0 var(--nllm-space-sm);
}

.pc-calc__lede {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────
 * CARD — the calculator surface itself
 * Soft-elevated card on the section surface. Padding tightened ~30% from
 * the original spec (xl → lg) — sliders and stats are scannable at lower
 * heights, and the card sits better in the page flow.
 * ───────────────────────────────────────────────────────────────────── */
.pc-calculator {
	max-width: 680px;
	margin: 0 auto;
	background-color: var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-lg);
	padding: var(--nllm-space-lg);                     /* was xl — tightened */
	box-shadow: var(--nllm-shadow-md);
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-lg);
}

/* ─────────────────────────────────────────────────────────────────────
 * RESULT BLOCK — hero number + two secondary stats
 * DOM order is hero FIRST, then sliders — mobile users see the value
 * prop before they're asked to interact. .pc-calculator above uses
 * flex-direction: column, so visual order = DOM order.
 * ───────────────────────────────────────────────────────────────────── */
.pc-calculator__result {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nllm-space-md);
}

/* The showpiece. .nllm-emph--bolt does the gradient text-fill (hot amber
 * → magenta → violet). We just set the size, weight, and line-height.
 * Size scales fluidly so it doesn't dwarf the card at 320px. */
.pc-calculator__hero-value {
	display: inline-block;
	font-size: clamp(3.5rem, 12vw, 6rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.pc-calculator__hero-label {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
 * SECONDARY-STATS BREAKDOWN
 * Two stats: rate-limit recovery (hrs/wk), context-switch tax (hrs/wk).
 * The other two from the original layout (approval overhead, effective
 * TPM) were dropped — approval overhead doesn't ring true for solo
 * devs, and TPM is jargony for the sales audience.
 *
 * Mobile (<600px): stacked single-column. Larger: side-by-side.
 * ───────────────────────────────────────────────────────────────────── */
.pc-calculator__breakdown {
	display: grid;
	grid-template-columns: 1fr;                        /* mobile: stacked */
	gap: var(--nllm-space-md);
	width: 100%;
	margin-top: var(--nllm-space-sm);
}

.pc-calc-stat {
	background-color: var(--nllm-surface);
	border-radius: var(--nllm-radius-md);
	padding: var(--nllm-space-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

/* Stat value: big violet number — paired against the hot-gradient hero
 * so the violet reads as "supporting evidence", not "competing claim". */
.pc-calc-stat__value {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--nllm-violet-pale);
}

.pc-calc-stat__unit {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
	font-weight: 500;
}

.pc-calc-stat__label {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	margin-top: var(--nllm-space-xs);
	font-weight: 500;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────
 * SLIDERS — the "play with the inputs" zone
 * Three rows, single column. Each row: label above, range+value below.
 * The slider+output share a flex row so the live number sits to the
 * right of the track at all viewport widths.
 * ───────────────────────────────────────────────────────────────────── */
.pc-calculator__controls {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-md);
	padding-top: var(--nllm-space-md);
	border-top: 1px solid var(--nllm-surface);
}

.pc-calculator__field {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-xs);
}

.pc-calculator__label {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	font-weight: 500;
}

.pc-calculator__range-row {
	display: flex;
	align-items: center;
	gap: var(--nllm-space-md);
}

/* Range slider: full-width track, violet thumb via accent-color. */
.pc-calculator__range {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--nllm-violet);
}

/* Live numeric value next to the slider — width reserves space so the
 * track doesn't jiggle when the value crosses a digit boundary. */
.pc-calculator__range-value {
	flex: 0 0 3ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--nllm-text);
}

/* ─────────────────────────────────────────────────────────────────────
 * NOSCRIPT FALLBACK TABLE
 * Static scenario table for users without JS. Same dark surface, just
 * tabular instead of interactive.
 * ───────────────────────────────────────────────────────────────────── */
.pc-calc__scenario-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--nllm-space-md);
	font-size: var(--nllm-text-sm);
}

.pc-calc__scenario-table th,
.pc-calc__scenario-table td {
	padding: var(--nllm-space-sm) var(--nllm-space-md);
	text-align: left;
	border-bottom: 1px solid var(--nllm-surface);
}

.pc-calc__scenario-table th {
	color: var(--nllm-text-muted);
	font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
 * RESPONSIVE BREAKPOINTS
 *
 * 600px: secondary stats go side-by-side. At smaller widths they stack
 *        so each stat's value+label has enough breathing room.
 * 768px: card padding bumps slightly back up for the desktop reading
 *        distance (eyes are further from the screen).
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
	.pc-calculator__breakdown {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 768px) {
	.pc-calculator {
		padding: var(--nllm-space-xl);
	}
	.pc-calc__heading {
		font-size: var(--nllm-text-h1, 48px);
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/comparison-table.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/comparison-table.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Comparison Table
 * Layout: marketing.section.comparison-table
 *
 * Used on: product, pricing
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - heading (required)
 *   - rows (required) — array of {feature, free, pro, team} comparison rows
 *   - tiers (optional) — array of tier label strings
 *   - featured_tier_index (optional, default 1) — 0-based index of highlighted column
 *
 * Visual spec:
 *   Full-width comparison table. Feature names in first column (left-aligned).
 *   Tier columns centered. Featured tier (Pro) highlighted with violet header.
 *   Check (✓) and cross (×) icons via CSS pseudo-elements.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-surface-edge, --nllm-surface-deep,
 *   --nllm-text, --nllm-text-muted, --nllm-text-subtle, --nllm-text-sm,
 *   --nllm-violet, --nllm-violet-pale, --nllm-violet-bg, --nllm-space-xl,
 *   --nllm-space-lg, --nllm-space-md, --pc-status-flowing
 *
 * M1 status: minimal baseline. M2 adds sticky header row on scroll.
 *
 * [claude:sonnet-4.6]
 * [claude:sonnet-4-6] Added overflow-x: auto on wrap to prevent horizontal page scroll at 320px
 */

.pc-section--comparison-table {
	background-color: var(--nllm-surface-deep);
}

.pc-comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--nllm-text-sm);
}

.pc-comparison-table th,
.pc-comparison-table td {
	padding: var(--nllm-space-md) var(--nllm-space-lg);
	text-align: center;
	border-bottom: 1px solid var(--nllm-surface-soft);
	color: var(--nllm-text-muted);
	vertical-align: middle;
}

.pc-comparison-table th:first-child,
.pc-comparison-table td:first-child {
	text-align: left;
	color: var(--nllm-text);
	font-weight: 500;
}

.pc-comparison-table thead th {
	font-weight: 700;
	color: var(--nllm-text);
	background-color: var(--nllm-surface);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pc-comparison-table thead th.is-featured {
	color: var(--nllm-violet-pale);
	background-color: var(--nllm-violet-bg);
	border-bottom-color: var(--nllm-violet);
}

.pc-comparison-table tbody tr:hover td {
	background-color: rgba(51, 65, 85, 0.2);
}

.pc-comparison-table .is-yes {
	color: var(--pc-status-flowing);
}

.pc-comparison-table .is-no {
	color: var(--nllm-surface-edge);
}

@media (max-width: 768px) {
	.pc-comparison-table th,
	.pc-comparison-table td {
		padding: var(--nllm-space-sm) var(--nllm-space-md);
		font-size: 0.75rem;
	}
}

/* Contain table overflow at very narrow viewports — table scrolls horizontally
   inside the wrapper instead of expanding the page body. */
.pc-comparison-table__wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
	.pc-comparison-table {
		min-width: 280px;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/cost-of-manual.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/cost-of-manual.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Cost of Manual
 * Layout: marketing.section.cost-of-manual
 *
 * Used on: product
 *
 * Schema (consumed by layout):
 *   - heading (required) — section headline
 *   - paragraphs (required) — array<string>, ≥1 entry
 *   - stat_strip (optional, default []) — array of {value, caption} pairs, 0-3 entries
 *
 * Visual spec:
 *   Dark surface background. Left-aligned heading + body paragraphs.
 *   Optional stat strip below: 3 oversized metric values with captions,
 *   laid out in a horizontal row on desktop, stacked on mobile.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-text, --nllm-text-muted, --nllm-text-subtle,
 *   --nllm-text-h2, --nllm-text-body, --nllm-text-sm, --nllm-violet-pale,
 *   --nllm-space-2xl, --nllm-space-xl, --nllm-space-lg, --nllm-space-md
 *
 * M1 status: minimal baseline. M2 adds animated counter on stat values.
 *
 * [claude:sonnet-4.6]
 */

.pc-section--cost-of-manual {
	background-color: var(--nllm-surface);
}

.pc-cost-of-manual__body {
	max-width: 720px;
	margin-bottom: var(--nllm-space-xl);
}

.pc-cost-of-manual__paragraph {
	font-size: var(--nllm-text-body, 1rem);
	color: var(--nllm-text-muted);
	line-height: 1.7;
	margin: 0 0 var(--nllm-space-md);
}

.pc-cost-of-manual__stat-strip {
	display: flex;
	gap: var(--nllm-space-xl);
	flex-wrap: wrap;
	margin-top: var(--nllm-space-xl);
}

.pc-stat {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
}

.pc-stat__value {
	font-size: var(--nllm-text-h1, 3rem);
	font-weight: 800;
	color: var(--nllm-violet-pale);
	line-height: 1;
}

.pc-stat__caption {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
	line-height: 1.4;
}

@media (max-width: 768px) {
	.pc-cost-of-manual__stat-strip {
		gap: var(--nllm-space-lg);
	}

	.pc-stat__value {
		font-size: var(--nllm-text-h2, 2rem);
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/cta-button.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/cta-button.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: CTA Button (utility)
 * Layout: marketing.section.cta-button
 *
 * Used on: hero, final-cta, feature-tile, pricing-card (sub-layout)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - label (required) — button text
 *   - url (required) — href
 *   - style (optional, default 'bolt') — 'bolt' | 'outline' | 'ghost' | 'violet'
 *   - microcopy (optional) — small text below button (e.g. "No credit card required")
 *   - data_cta (optional) — value for data-cta tracking attribute
 *   - size (optional, default 'md') — 'sm' | 'md' | 'lg'
 *
 * Visual spec:
 *   Delegates to .nllm-btn system in components.css for the button itself.
 *   This file adds the .pc-cta-button wrapper which includes the optional
 *   microcopy line below the button anchor.
 *
 * Tokens used:
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-space-sm
 *
 * M1 status: wrapper + microcopy. Button styles live in components.css.
 *
 * [claude:sonnet-4.6]
 */

.pc-cta-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nllm-space-sm);
}

.pc-cta-button__microcopy {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
	line-height: 1.4;
	text-align: center;
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/disclaimer.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/disclaimer.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Disclaimer
 * Layout: marketing.section.disclaimer
 *
 * Used on: product (standalone), hero (inline via show_disclaimer)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - variant (required) — 'a' | 'b'
 *     Variant A: standalone section with heading + body text (product page footer)
 *     Variant B: compact inline strip below hero CTAs (show_disclaimer=true)
 *   - heading (optional) — variant A only
 *   - body (required) — disclaimer text (may contain safe HTML)
 *
 * Visual spec:
 *   Variant A: small muted text block on dark surface, max-width 680px centered.
 *   Variant B: compact banner strip, slightly lighter background, very small text.
 *   Both variants: text-subtle color, no decorative elements.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-text-subtle, --nllm-text-sm,
 *   --nllm-space-xl, --nllm-space-lg, --nllm-space-md, --nllm-radius-md
 *
 * M1 status: minimal baseline. Both variants visible at M1.
 *
 * [claude:sonnet-4.6]
 */

.pc-section--disclaimer {
	background-color: var(--nllm-surface);
	padding: var(--nllm-space-xl) var(--nllm-space-lg);
}

.pc-disclaimer {
	max-width: 680px;
	margin: 0 auto;
}

.pc-disclaimer__heading {
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	color: var(--nllm-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--nllm-space-sm);
}

.pc-disclaimer__body {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
	line-height: 1.6;
}

/* Variant B: compact strip used inline inside hero */
.pc-disclaimer--b {
	background-color: var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-md);
	padding: var(--nllm-space-md);
	margin-top: var(--nllm-space-lg);
	text-align: center;
}

.pc-disclaimer--b .pc-disclaimer__body {
	font-size: 0.7rem;
}

@media (max-width: 768px) {
	.pc-section--disclaimer {
		padding: var(--nllm-space-lg) var(--nllm-space-md);
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/faq-accordion.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/faq-accordion.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: FAQ Accordion
 * Layout: marketing.section.faq-accordion
 *
 * Used on: faq, pricing (preview subset)
 *
 * Schema:
 *   - section_id (required)  — anchor id for the <section>
 *   - heading    (required)  — large group heading (Setup / Privacy / Billing …)
 *   - questions  (required)  — array of {id, question, answer (HTML allowed)}
 *   - pill_color (optional)  — violet | cyan | amber | green
 *
 * Markup the layout actually emits (kept in sync with faq-accordion.php):
 *
 *   <section class="pc-section pc-section--faq-accordion">
 *     <div class="pc-section__inner">
 *       <div class="pc-faq__header">
 *         <h2 class="pc-faq__heading">…</h2>
 *         <span class="pc-faq__pill pc-faq__pill--violet">FAQ</span>
 *       </div>
 *       <div class="pc-faq__list" role="list">
 *         <details class="pc-faq__item">
 *           <summary class="pc-faq__question">…</summary>
 *           <div class="pc-faq__answer">…</div>
 *         </details>
 *       </div>
 *     </div>
 *   </section>
 *
 * NB the previous version of this file targeted `pc-faq-accordion`,
 * `pc-faq-item`, `pc-faq-item__question`, etc. — selectors that NEVER appear
 * in the rendered HTML. The result was the entire FAQ rendering with browser
 * default <details>/<summary> styling (dim text on the dark surface — looked
 * nearly invisible). Selectors are now BEM-aligned with the layout.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-surface-edge,
 *   --nllm-text, --nllm-text-muted,
 *   --nllm-violet, --nllm-violet-pale, --nllm-violet-bg, --nllm-cyan,
 *   --pc-bolt-amber, --pc-status-flowing,
 *   --nllm-space-*, --nllm-radius-md, --nllm-text-*,
 *   --nllm-transition-base
 *
 * [ai]
 */

/* ── Section frame ──────────────────────────────────────────────────── */
.pc-section--faq-accordion {
	background-color: var(--nllm-surface-deep);
	padding-block: var(--nllm-space-2xl);
}

.pc-section__inner {
	max-width: 880px;
	margin-inline: auto;
	padding-inline: var(--nllm-space-lg);
}

/* ── Section header (heading + FAQ pill) ────────────────────────────── */
.pc-faq__header {
	display: flex;
	align-items: center;
	gap: var(--nllm-space-md);
	margin-block-end: var(--nllm-space-xl);
}

.pc-faq__heading {
	font-size: var(--nllm-text-h2);
	font-weight: 700;
	color: var(--nllm-text);
	margin: 0;
	letter-spacing: -0.02em;
}

.pc-faq__pill {
	display: inline-flex;
	align-items: center;
	height: 1.5rem;
	padding-inline: 0.6rem;
	border-radius: var(--nllm-radius-full);
	background-color: var(--nllm-violet-bg);
	color: var(--nllm-violet-pale);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pc-faq__pill--violet { background-color: var(--nllm-violet-bg);  color: var(--nllm-violet-pale); }
.pc-faq__pill--cyan   { background-color: #083344;                 color: var(--nllm-cyan-pale, #a5f3fc); }
.pc-faq__pill--amber  { background-color: #422006;                 color: var(--pc-bolt-amber-pale); }
.pc-faq__pill--green  { background-color: #052e16;                 color: #86efac; }

/* ── Accordion list ─────────────────────────────────────────────────── */
.pc-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
}

/* ── Accordion item ─────────────────────────────────────────────────── */
.pc-faq__item {
	background-color: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-md);
	overflow: hidden;
	transition: border-color var(--nllm-transition-base);
}

.pc-faq__item[open] {
	border-color: var(--nllm-violet);
}

/* ── Question (<summary>) ───────────────────────────────────────────── */
.pc-faq__question {
	padding: var(--nllm-space-md) var(--nllm-space-lg);
	cursor: pointer;
	font-size: var(--nllm-text-body, 1rem);
	font-weight: 600;
	color: var(--nllm-text);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--nllm-space-md);
	user-select: none;
}

/* Remove default disclosure triangle in WebKit + Firefox */
.pc-faq__question::-webkit-details-marker { display: none; }
.pc-faq__question::marker { content: ''; }

.pc-faq__question::after {
	content: '›';
	color: var(--nllm-violet-pale);
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 400;
	transform: rotate(90deg);
	transition: transform var(--nllm-transition-base);
	flex-shrink: 0;
}

.pc-faq__item[open] .pc-faq__question::after {
	transform: rotate(270deg);
}

.pc-faq__question:hover,
.pc-faq__question:focus-visible {
	background-color: var(--nllm-surface-soft);
	outline: none;
}

/* ── Answer body ────────────────────────────────────────────────────── */
.pc-faq__answer {
	padding: 0 var(--nllm-space-lg) var(--nllm-space-lg);
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	line-height: 1.7;
}

.pc-faq__answer p {
	color: var(--nllm-text-muted);
}

.pc-faq__answer a {
	color: var(--nllm-cyan-bright, #22d3ee);
	text-decoration: underline;
}

.pc-faq__answer code {
	font-family: var(--nllm-font-mono);
	font-size: 0.85em;
	padding: 0.1em 0.35em;
	background: var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-sm);
	color: var(--nllm-text);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.pc-faq__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--nllm-space-sm);
	}

	.pc-faq__heading {
		font-size: 1.75rem;
	}

	.pc-faq__question,
	.pc-faq__answer {
		padding-inline: var(--nllm-space-md);
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/feature-tile.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/feature-tile.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Feature Tile
 * Layout: marketing.section.feature-tile
 *
 * Used on: home, product
 *
 * Schema (consumed by layout):
 *   - eyebrow (required) — short badge label e.g. "ROTATION"
 *   - headline (required)
 *   - body (required)
 *   - layout_side (required) — 'left' | 'right' (text side)
 *   - screenshot (optional) — image src path
 *   - screenshot_alt (optional)
 *   - micro_stat (optional) — single-line metric string
 *   - background_token (optional, default 'surface') — 'surface'|'surface-soft'
 *   - tos_block (optional) — verbatim ToS framing block
 *
 * Visual spec:
 *   Two-column layout: text block on one side, screenshot on the other.
 *   Alternating left/right via layout_side modifier. Background driven by
 *   background_token. Eyebrow is a small violet badge above the headline.
 *   Micro-stat displayed in accent color below body copy.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-text, --nllm-text-muted,
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-violet-pale, --nllm-violet,
 *   --nllm-space-2xl, --nllm-space-xl, --nllm-space-lg, --nllm-space-md,
 *   --nllm-space-sm, --nllm-radius-md
 *
 * M1 status: minimal baseline. M2 adds entrance animations, sticky image.
 *
 * [claude:sonnet-4.6][hurc:v0.7.0]
 */

.pc-section--feature-tile {
	background-color: var(--nllm-surface);
}

.pc-feature-tile--bg-surface-soft {
	background-color: var(--nllm-surface-soft);
}

.pc-feature-tile__inner {
	display: flex;
	align-items: center;
	gap: var(--nllm-space-2xl);
	max-width: 1100px;
	margin: 0 auto;
}

/* Text-right: image left, text right */
.pc-feature-tile--text-right .pc-feature-tile__inner {
	flex-direction: row;
}

/* Text-left: text left, image right */
.pc-feature-tile--text-left .pc-feature-tile__inner {
	flex-direction: row-reverse;
}

.pc-feature-tile__text {
	flex: 1;
	min-width: 0;
}

.pc-feature-tile__eyebrow {
	display: inline-block;
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	color: var(--nllm-violet-pale);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--nllm-space-md);
}

.pc-feature-tile__headline {
	font-size: var(--nllm-text-h2, 2.25rem);
	font-weight: 800;
	color: var(--nllm-text);
	margin: 0 0 var(--nllm-space-md);
	line-height: 1.15;
}

.pc-feature-tile__body {
	font-size: var(--nllm-text-body, 1rem);
	color: var(--nllm-text-muted);
	line-height: 1.7;
	margin: 0 0 var(--nllm-space-md);
}

.pc-feature-tile__micro-stat {
	font-size: var(--nllm-text-sm);
	font-weight: 600;
	color: var(--nllm-violet-pale);
	margin: 0 0 var(--nllm-space-md);
}

.pc-feature-tile__tos {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
	line-height: 1.5;
	margin: 0;
}

.pc-feature-tile__image {
	flex: 1;
	min-width: 0;
}

.pc-feature-tile__screenshot {
	width: 100%;
	/* [claude:opus-4.8-1m][client:2.1.159][hurc:v0.10.1] Lock the screenshot frame to 16:10 and cover-fit it. Every feature
	 * screenshot is authored at 1600x1000, so cover is a no-op for correct
	 * assets — but if an asset ships at the wrong aspect ratio it now FILLS the
	 * frame (cropped to top) instead of collapsing to a thin, tiny strip the
	 * way `height: auto` did. Uniform tile heights on desktop and mobile. */
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--nllm-radius-md);
	display: block;
	transition: transform .25s ease, box-shadow .25s ease;
}

.pc-feature-tile__screenshot-link {
	display: block;
	position: relative;
	cursor: zoom-in;
	border-radius: var(--nllm-radius-md);
	overflow: hidden;
	outline: none;
}

.pc-feature-tile__screenshot-link:hover .pc-feature-tile__screenshot,
.pc-feature-tile__screenshot-link:focus-visible .pc-feature-tile__screenshot {
	transform: scale(1.015);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

.pc-feature-tile__screenshot-link:focus-visible {
	box-shadow: 0 0 0 3px var(--nllm-violet, #8b5cf6);
}

/* ──────────────────────────────────────────────────────────────────────────
 * [claude:opus-4.7-1m][hurc:v0.7.0] Thumbnail strip — supplemental screenshots rendered as a small row
 * under the primary screenshot. Each thumb is a lightbox trigger (matches
 * the primary image's button pattern), so users can click to expand any of
 * them. Used on the CLI showcase tile (pc-status, pc-doctor under pc-list)
 * so the "40+ pc commands" claim is visible without three full-size images
 * shoving the headline below the fold.
 * ──────────────────────────────────────────────────────────────────────── */

.pc-feature-tile__thumb-strip {
	display: flex;
	gap: var(--nllm-space-sm, .5rem);
	margin-top: var(--nllm-space-sm, .5rem);
	flex-wrap: wrap;
}

.pc-feature-tile__thumb {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(168, 85, 247, .18);
	border-radius: var(--nllm-radius-md, 12px);
	cursor: zoom-in;
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pc-feature-tile__thumb:hover,
.pc-feature-tile__thumb:focus-visible {
	transform: translateY(-2px);
	border-color: var(--nllm-violet, #a855f7);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
	outline: none;
}

.pc-feature-tile__thumb-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	height: auto;
	object-fit: cover;
	object-position: top center;
	border-radius: inherit;
}

.pc-feature-tile__expand-hint {
	position: absolute;
	bottom: var(--nllm-space-sm, .5rem);
	right: var(--nllm-space-sm, .5rem);
	padding: 4px 10px;
	font-size: var(--nllm-text-xs, .75rem);
	font-weight: 600;
	color: #fff;
	background: rgba(15, 23, 42, .82);
	border-radius: 999px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.pc-feature-tile__screenshot-link:hover .pc-feature-tile__expand-hint,
.pc-feature-tile__screenshot-link:focus-visible .pc-feature-tile__expand-hint {
	opacity: 1;
	transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Inline code block — rendered in the image slot for tiles that ship a
 * `code_block` instead of a screenshot (the CLI showcase tile is the
 * canonical example: `pc health` Unicode table rendered inline so the
 * "nice CLI UI" claim is visible rather than just stated).
 *
 * Design contract:
 *   • Monospace, terminal-like — JetBrains Mono / Fira Code preferred, falls
 *     back to ui-monospace so we never inherit Inter from --nllm-font-base.
 *   • Dark surface that contrasts with the page bg without screaming.
 *   • Preserves Unicode box-drawing glyphs (┌─┴┐) at all widths — no
 *     letter-spacing tweaks, no font-feature-settings that would break grid
 *     alignment.
 *   • Horizontal scroll on narrow viewports (tables are wider than mobile)
 *     instead of wrapping, which would shatter the table grid.
 * ──────────────────────────────────────────────────────────────────────── */

.pc-feature-tile__code {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: .375rem;
}

.pc-feature-tile__code-label {
	font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
	font-size: var(--nllm-text-xs, .75rem);
	color: var(--nllm-text-subtle, #94a3b8);
	letter-spacing: .04em;
}

.pc-feature-tile__code-prompt {
	color: var(--nllm-violet, #a855f7);
	font-weight: 600;
}

.pc-feature-tile__code-block {
	margin: 0;
	padding: 1rem 1.25rem;
	background: #0b1020;
	border: 1px solid rgba(168, 85, 247, .22);
	border-radius: var(--nllm-radius-md, 12px);
	color: #e2e8f0;
	font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
	font-size: .8125rem;
	line-height: 1.45;
	overflow-x: auto;
	white-space: pre;
	tab-size: 4;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

.pc-feature-tile__code-block code {
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	padding: 0;
}

.pc-feature-tile__body code {
	background: rgba(168, 85, 247, .12);
	color: var(--nllm-violet, #a855f7);
	padding: 1px 6px;
	border-radius: 4px;
	font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
	font-size: .9em;
}

@media (max-width: 768px) {
	.pc-feature-tile__inner,
	.pc-feature-tile--text-right .pc-feature-tile__inner,
	.pc-feature-tile--text-left .pc-feature-tile__inner {
		flex-direction: column;
	}

	.pc-feature-tile__headline {
		font-size: var(--nllm-text-h3, 1.5rem);
	}

	.pc-feature-tile__code-block {
		font-size: .6875rem;
	}
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Power Claude brand-stamp — consumer-owned identity. Mirrors the canonical
 * badge from power-claude/media/brand/power-claude/badge.{svg,css}: same class
 * namespace (.pc-stamp-*), same tooltip literal ("Power Claude feature"), same
 * bolt glyph, same color story. Marketing host owns its own --nllm-violet
 * token so we use it here (literal fallback matches the canonical CSS so the
 * chip looks identical to the in-extension surface). */
.pc-feature-tile__eyebrow-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pc-stamp-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	font: 11px/1 system-ui, -apple-system, sans-serif;
	color: var(--nllm-violet, #7c3aed);
	background: rgba(124, 58, 237, 0.08);
	border: 1px solid rgba(124, 58, 237, 0.25);
	border-radius: 999px;
	cursor: help;
	user-select: none;
	vertical-align: middle;
}

.pc-stamp-badge svg {
	flex: none;
	width: 10px;
	height: 10px;
}

.pc-stamp-badge:hover {
	background: rgba(124, 58, 237, 0.16);
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/final-cta.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/final-cta.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Final CTA
 * Layout: marketing.section.final-cta
 *
 * Used on: home, product, pricing, faq
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - heading (required) — closing pitch headline
 *   - subheading (optional)
 *   - primary_cta (required) — {label, url, style?}
 *   - secondary_cta (optional)
 *   - background (optional, default 'gradient') — 'gradient' | 'surface-deep'
 *
 * Visual spec:
 *   Full-width gradient (or deep surface) closing section. Centered
 *   heading in display size. Two CTAs. Intended as the last section
 *   on every page before the footer.
 *
 * Tokens used:
 *   --nllm-gradient, --nllm-surface-deep, --nllm-text, --nllm-text-muted,
 *   --nllm-text-display, --nllm-text-h1, --nllm-text-h3, --nllm-space-2xl,
 *   --nllm-space-xl, --nllm-space-lg, --nllm-space-md
 *
 * M1 status: minimal baseline. M2 adds parallax background on scroll.
 *
 * [claude:sonnet-4.6]
 */

.pc-section--final-cta {
	background: var(--nllm-gradient);
	color: var(--nllm-text);
	text-align: center;
}

.pc-final-cta--bg-surface-deep {
	background: var(--nllm-surface-deep);
}

.pc-final-cta__inner {
	max-width: 760px;
	margin: 0 auto;
}

.pc-final-cta__heading {
	font-size: var(--nllm-text-h1, 3rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 var(--nllm-space-md);
}

.pc-final-cta__subheading {
	font-size: var(--nllm-text-h3, 1.5rem);
	color: var(--nllm-text-muted);
	margin: 0 0 var(--nllm-space-xl);
	line-height: 1.5;
}

.pc-final-cta__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-md);
	justify-content: center;
}

@media (max-width: 768px) {
	.pc-final-cta__heading {
		font-size: var(--nllm-text-h2, 2rem);
	}

	.pc-final-cta__subheading {
		font-size: var(--nllm-text-body, 1rem);
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/hero.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/hero.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Hero
 * Layout: marketing.section.hero
 *
 * Used on: home, product, pricing
 *
 * Schema (consumed by layout):
 *   - eyebrow (optional)
 *   - headline (required)
 *   - subheadline (required)
 *   - primary_cta (required) — {label, url, style?, microcopy?, data_cta?}
 *   - secondary_cta (optional)
 *   - background (default 'gradient-deep') — drives .pc-hero--{background} modifier
 *   - show_disclaimer (default false)
 *
 * Visual spec:
 *   Dark gradient background. Centered text. Display 72px headline.
 *   Two CTAs side by side (bolt-gradient primary, outline secondary).
 *   Variant B disclaimer (if shown) sits below CTAs.
 *
 * Tokens used:
 *   --nllm-gradient, --nllm-text, --nllm-text-muted, --nllm-text-display,
 *   --nllm-text-h1, --nllm-text-h3, --nllm-text-sm, --nllm-space-2xl,
 *   --nllm-space-xl, --nllm-space-lg, --nllm-space-md, --nllm-radius-sm
 *
 * M1 status: minimal baseline. M2 adds responsive refinements.
 *
 * [claude:sonnet-4.6][hurc:v0.7.0]
 */

.pc-section--hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 237, 0.25) 0%, transparent 70%),
		var(--nllm-surface-deep);
	color: var(--nllm-text);
	text-align: center;
	padding: var(--nllm-space-2xl) var(--nllm-space-lg);
}

/* Decorative grid overlay — 48×48 px faint slate gridlines for futuristic look */
.pc-section--hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(71, 85, 105, 0.15) 1px, transparent 1px),
		linear-gradient(90deg, rgba(71, 85, 105, 0.15) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.pc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}

/* ── Product mark (logo above eyebrow) ─────────────────────────────────── */

.pc-hero__mark {
	display: flex;
	justify-content: center;
	margin-bottom: var(--nllm-space-lg);
}

.pc-hero__mark-img {
	width: 96px;
	height: 96px;
	/* Drop shadow that picks up the brand violet glow */
	filter: drop-shadow(0 4px 24px rgba(124, 58, 237, 0.45));
}

/* ── Eyebrow ──────────────────────────────────────────────────────────── */

.pc-hero__eyebrow {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--nllm-space-md);
}

.pc-hero__headline {
	font-size: var(--nllm-text-display, 4.5rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 var(--nllm-space-md);
}

.pc-hero__subheadline {
	font-size: var(--nllm-text-h3, 1.5rem);
	color: var(--nllm-text-muted);
	max-width: 720px;
	margin: 0 auto var(--nllm-space-xl);
	line-height: 1.5;
}

.pc-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-md);
	justify-content: center;
}

/* ── Proof screenshot — click-to-expand lightbox trigger ───────────────────
 * [claude:opus-4.7-1m][hurc:v0.7.0] The hero proof screenshot is wrapped in a <button> so it opens in the
 * shared marketing lightbox. A <button> carries UA chrome (border, padding,
 * background, system font) — this block resets all of it so the button is a
 * transparent, full-width wrapper that behaves visually like the bare <img>
 * did before. Mirrors .pc-feature-tile__screenshot-link. The hover/focus
 * lift + "Click to expand" pill signal the affordance. */
.pc-hero__proof-link {
	/* Button reset — strip every piece of UA chrome. */
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	/* Wrapper behaviour — rounded clip + zoom affordance. */
	position: relative;
	cursor: zoom-in;
	border-radius: var(--nllm-radius-md, 12px);
	overflow: hidden;
	outline: none;
}

/* Subtle scale-up of the screenshot on hover/keyboard focus. */
.pc-hero__proof-link:hover .pc-hero__proof-img,
.pc-hero__proof-link:focus-visible .pc-hero__proof-img {
	transform: scale(1.015);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

/* Keyboard focus ring — violet, matches the brand accent. */
.pc-hero__proof-link:focus-visible {
	box-shadow: 0 0 0 3px var(--nllm-violet, #8b5cf6);
}

/* The screenshot itself animates the lift; transition lives here so it is
 * smooth in both directions. */
.pc-hero__proof-img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .25s ease, box-shadow .25s ease;
}

/* "Click to expand" pill — hidden until hover/focus so it does not clutter
 * the hero on first paint. */
.pc-hero__expand-hint {
	position: absolute;
	bottom: var(--nllm-space-sm, .5rem);
	right: var(--nllm-space-sm, .5rem);
	padding: 4px 10px;
	font-size: var(--nllm-text-xs, .75rem);
	font-weight: 600;
	color: #fff;
	background: rgba(15, 23, 42, .82);
	border-radius: 999px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.pc-hero__proof-link:hover .pc-hero__expand-hint,
.pc-hero__proof-link:focus-visible .pc-hero__expand-hint {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 768px) {
	.pc-hero__headline {
		/* [claude:opus-4.7-1m][hurc:v0.7.0] Fluid clamp instead of a flat 2.5rem. At 320px a flat 48px
		   headline overflows the ~192px content box and gets clipped by the
		   hero section's `overflow: hidden`. clamp() floors the type at
		   1.6rem on the narrowest phones and scales up with the viewport,
		   so the longest single word ("babysitting") always fits. */
		font-size: clamp(1.6rem, 6vw, var(--nllm-text-h1, 2.5rem));
	}

	.pc-hero__subheadline {
		font-size: var(--nllm-text-body, 1rem);
	}

	/* [ai] Stack the hero CTAs full-width on phones/tablets. The base .nllm-btn
	   carries `white-space: nowrap`, so a long label ("Start 14-day Premium
	   Trial — $0 today") renders wider than the ~256px content box at 320px and
	   gets clipped by the hero's `overflow: hidden`. Column layout + 100% width +
	   allowing the label to wrap keeps both CTAs inside the viewport and gives
	   full-width tap targets. NOTE: the equivalent `.nllm-hero__ctas` rule in
	   templates/nllm/css/responsive.css never matched — the live markup uses
	   `.pc-hero__ctas`, so that rule is dead and this is where the behaviour lives. */
	.pc-hero__ctas {
		flex-direction: column;
		align-items: stretch;
	}

	.pc-hero__ctas .pc-cta-button {
		width: 100%;
	}

	.pc-hero__ctas .nllm-btn {
		width: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-section--hero * {
		transition: none !important;
		animation: none !important;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/methodology.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/methodology.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Methodology (utility)
 * Layout: marketing.section.methodology
 *
 * Used on: product (standalone), proof-chart (embedded via details/summary)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - heading (optional, default 'Methodology')
 *   - body (required) — methodology description text
 *   - expandable (optional, default true) — render as <details> vs always-visible
 *
 * Visual spec:
 *   When expandable: <details> toggle with violet summary text. Body in
 *   small muted type. When always-visible: plain block with heading + body.
 *   Used as standalone section or embedded in proof-chart figures.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-text-muted, --nllm-text-subtle,
 *   --nllm-text-sm, --nllm-violet, --nllm-space-xl, --nllm-space-md,
 *   --nllm-radius-md
 *
 * M1 status: complete — simple utility, no M2 changes expected.
 *
 * [claude:sonnet-4.6]
 */

.pc-section--methodology {
	background-color: var(--nllm-surface);
}

.pc-methodology {
	max-width: 680px;
	margin: 0 auto;
}

.pc-methodology__toggle {
	font-size: var(--nllm-text-sm);
	font-weight: 600;
	color: var(--nllm-violet);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.pc-methodology__heading {
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	color: var(--nllm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 var(--nllm-space-md);
}

.pc-methodology__body {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
	line-height: 1.7;
	margin-top: var(--nllm-space-md);
}

.pc-methodology--expandable {
	background-color: var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-md);
	padding: var(--nllm-space-md);
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/nudge-modal.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/nudge-modal.css
   Run `make sync-assets` after editing the source. */

/**
 * Trial Nudge Modal — overlaid on the page when a user clicks a free-download CTA.
 * Encourages them to start the $0 Premium Trial instead (one-per-session intercept).
 *
 * Tokens used: --nllm-text, --nllm-text-muted, --nllm-violet-pale, --nllm-surface-card,
 *              --nllm-border, --nllm-space-xl, --nllm-space-md, --nllm-space-sm,
 *              --nllm-radius-lg, --nllm-text-h3, --nllm-text-body, --nllm-text-sm
 *
 * [claude:sonnet-4.6][client:2.1.159][hurc:v0.10.1]
 */

#pc-trial-nudge-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pc-nudge__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.65);
	backdrop-filter: blur(4px);
}

.pc-nudge__card {
	position: relative;
	background: var(--nllm-surface-card, #1e1e2e);
	border: 1px solid var(--nllm-border, #3a3a5c);
	border-radius: var(--nllm-radius-lg, 12px);
	padding: var(--nllm-space-xl, 2rem);
	max-width: 480px;
	width: calc(100% - 2rem);
	text-align: center;
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
	animation: pc-nudge-in 0.2s ease-out both;
}

@keyframes pc-nudge-in {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.pc-nudge__eyebrow {
	font-size: var(--nllm-text-sm, 0.8rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nllm-violet-pale, #cba6f7);
	margin: 0 0 0.5rem;
}

.pc-nudge__heading {
	font-size: var(--nllm-text-h3, 1.5rem);
	font-weight: 800;
	color: var(--nllm-text, #cdd6f4);
	margin: 0 0 var(--nllm-space-md, 1rem);
	line-height: 1.2;
}

.pc-nudge__body {
	font-size: var(--nllm-text-body, 1rem);
	color: var(--nllm-text-muted, #6c7086);
	line-height: 1.6;
	margin: 0 0 var(--nllm-space-xl, 2rem);
}

.pc-nudge__body strong {
	color: var(--nllm-text, #cdd6f4);
}

.pc-nudge__actions {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm, 0.5rem);
	align-items: center;
}

.pc-nudge__cta-primary {
	width: 100%;
}

.pc-nudge__cta-skip {
	font-size: var(--nllm-text-sm, 0.8rem);
	color: var(--nllm-text-muted, #6c7086);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0.25rem 0;
}

.pc-nudge__cta-skip:hover {
	color: var(--nllm-text, #cdd6f4);
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/pricing-card.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/pricing-card.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Pricing Card
 * Layout: marketing.section.pricing-card
 *
 * Used on: pricing (standalone single-card embed or within pricing-grid)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - tier (required) — tier name string e.g. 'Pro Annual'
 *   - amount (required) — price string e.g. '$12'
 *   - period (required) — billing period e.g. '/mo'
 *   - billing_note (optional) — e.g. 'Billed annually'
 *   - savings (optional) — savings pill text e.g. 'Save 40%'
 *   - description (required) — short tier description
 *   - features (required) — array of {text, available} items
 *   - cta (required) — {label, url, style}
 *   - is_featured (optional, default false)
 *   - badge (optional) — badge text e.g. 'Best Value'
 *
 * Visual spec:
 *   Card with tier name, large price, feature checklist, and CTA.
 *   Featured card has violet border, slight scale-up, and badge.
 *   Unavailable features show × in muted style.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-surface-edge, --nllm-violet,
 *   --nllm-violet-pale, --nllm-violet-bg, --nllm-text, --nllm-text-muted,
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-gradient, --nllm-space-xl,
 *   --nllm-space-md, --nllm-space-sm, --nllm-space-xs, --nllm-radius-lg,
 *   --nllm-radius-full, --nllm-shadow-md, --nllm-shadow-lg, --pc-status-flowing
 *
 * M1 status: minimal baseline. M2 adds annual/monthly toggle interaction.
 *
 * [claude:sonnet-4.6][client:2.1.152][hurc:v0.7.0]
 */

.pc-section--pricing-card {
	background-color: var(--nllm-surface);
}

.pc-pricing-card {
	position: relative;
	background-color: var(--nllm-surface);
	border: 1px solid var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-lg);
	padding: var(--nllm-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-md);
	transition: transform var(--nllm-transition-base), box-shadow var(--nllm-transition-base);
}

.pc-pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--nllm-shadow-lg);
}

.pc-pricing-card--featured {
	border-color: var(--nllm-violet);
	box-shadow: var(--nllm-shadow-md);
	transform: scale(1.03);
	background-color: var(--nllm-violet-bg);
}

.pc-pricing-card--featured:hover {
	transform: scale(1.03) translateY(-4px);
}

.pc-pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--nllm-gradient);
	color: var(--nllm-text);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.3em 0.9em;
	border-radius: var(--nllm-radius-full);
	white-space: nowrap;
}

.pc-pricing-card__tier {
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nllm-violet-pale);
}

.pc-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: var(--nllm-space-xs);
}

.pc-pricing-card__price-was {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--nllm-text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	align-self: center;
}

.pc-pricing-card__amount {
	font-size: 3rem;
	font-weight: 800;
	color: var(--nllm-text);
	letter-spacing: -0.03em;
}

.pc-pricing-card__period {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
}

.pc-pricing-card__billing-note {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
}

.pc-pricing-card__savings {
	display: inline-block;
	background-color: rgba(34, 197, 94, 0.12);
	color: var(--pc-status-flowing);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2em 0.6em;
	border-radius: var(--nllm-radius-full);
}

.pc-pricing-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	flex: 1;
}

.pc-pricing-card__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--nllm-space-sm);
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
}

.pc-pricing-card__cta {
	margin-top: var(--nllm-space-md);
}

@media (max-width: 768px) {
	.pc-pricing-card--featured {
		transform: none;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/pricing-grid.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/pricing-grid.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Pricing Grid
 * Layout: marketing.section.pricing-grid
 *
 * Used on: pricing, home (compact teaser variant)
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - heading (required)
 *   - subheading (optional)
 *   - cards (required) — array of pricing-card $displayData shapes
 *   - compact (optional, default false) — compact teaser mode for home page
 *
 * Visual spec:
 *   Section header above a 3-column card grid. Featured card scaled up
 *   slightly. Compact mode reduces padding and scales down cards for
 *   use as a pricing teaser on the home page.
 *
 * Tokens used:
 *   --nllm-surface-deep, --nllm-text, --nllm-space-2xl, --nllm-space-xl,
 *   --nllm-space-lg
 *
 * M1 status: minimal baseline. M2 adds annual/monthly billing toggle.
 *
 * [claude:sonnet-4.6]
 */

.pc-section--pricing-grid {
	background-color: var(--nllm-surface-deep);
}

.pc-pricing-grid__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--nllm-space-lg);
	max-width: 1100px;
	margin: var(--nllm-space-xl) auto 0;
	align-items: start;
}

/* Compact teaser variant: reduced card size for home page embed */
.pc-pricing-grid--compact .pc-pricing-grid__cards {
	max-width: 900px;
}

.pc-pricing-grid--compact .pc-pricing-card {
	padding: var(--nllm-space-lg);
}

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

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


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/problems-slider.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/problems-slider.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Problems Slider — [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1]
 * Layout: marketing.section.problems-slider
 *
 * Used on: home, product (Power Claude page) — replaces the two legacy
 * hardcoded TESTIMONIAL cards (voice-1 / voice-2) with one data-driven slider.
 *
 * PURPOSE
 *   A horizontal, scroll-snap carousel of REAL community complaints about
 *   Claude Code / Claude (sourced from Reddit, GitHub, Hacker News), each card
 *   pairing the verbatim, attributed complaint with how Power Claude solves it.
 *   The complaint is framed as evidence the pain is real — never as a Power
 *   Claude testimonial. Every card carries a mandatory outbound source link.
 *
 * ARCHITECTURE / REVEAL MODEL
 *   The "Solved" content is progressively disclosed so it is reachable by every
 *   visitor regardless of input modality:
 *     • Baseline (no JS, touch, no-hover): the solve panel renders stacked
 *       below the problem and is ALWAYS visible. Nothing is hidden behind an
 *       interaction that a touch/no-JS user cannot perform.
 *     • Enhancement (hover-capable pointers): the solve panel becomes an
 *       absolutely-positioned overlay that slides up over the card on :hover,
 *       :focus-within (keyboard), or when JS adds .is-solved-open (click).
 *   A persistent green "✓ Solved" tag anchors the promise in both modes.
 *
 * DEPENDENCIES
 *   Design tokens from the nllm token layer (loaded by the page CSS):
 *     --nllm-surface, --nllm-surface-soft, --nllm-surface-deep,
 *     --nllm-surface-edge, --nllm-text, --nllm-text-muted, --nllm-text-subtle,
 *     --nllm-text-sm, --nllm-text-xs, --nllm-text-h2, --nllm-violet,
 *     --nllm-violet-soft, --nllm-violet-pale, --nllm-violet-bg,
 *     --nllm-radius-md, --nllm-radius-sm, --nllm-radius-full,
 *     --nllm-space-xs, --nllm-space-sm, --nllm-space-md, --nllm-space-lg,
 *     --nllm-space-xl, --nllm-transition-base, --nllm-transition-fast,
 *     --pc-bolt-amber, --pc-bolt-amber-pale, --pc-status-flowing.
 *   JS behaviour (nav buttons, solve toggle): problemsSlider.js.
 *
 * SHAPE
 *   .pc-section--problems-slider
 *   └── .pc-section__inner
 *       ├── .pc-problems__head           (heading + subheading)
 *       └── .pc-problems                 (carousel viewport; relative)
 *           ├── .pc-problems__nav--prev/next   (JS-revealed paging buttons)
 *           └── .pc-problems__track       (scroll-snap flex row)
 *               └── .pc-problem[data-slide]
 *                   └── .pc-problem__card
 *                       ├── .pc-problem__problem   (front: badge/theme/quote/source/reveal)
 *                       └── .pc-problem__solve     (overlay: headline/body/chips/CTA)
 */

/* ── Section shell ─────────────────────────────────────────────────────────
 * Full-bleed band on the base surface; the inner is width-constrained but
 * wider than the testimonial column it replaces, since a carousel wants room. */
.pc-section--problems-slider {
	background-color: var(--nllm-surface);
	padding-block: var(--nllm-space-xl);
}

.pc-section--problems-slider .pc-section__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--nllm-space-lg);
}

/* ── Heading block ───────────────────────────────────────────────────────── */
.pc-problems__head {
	margin-bottom: var(--nllm-space-lg);
	text-align: center;
}

.pc-problems__heading {
	margin: 0 0 var(--nllm-space-xs);
	font-size: var(--nllm-text-h2);
	color: var(--nllm-text);
}

.pc-problems__subheading {
	margin: 0;
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
}

/* ── Carousel viewport ─────────────────────────────────────────────────────
 * Position context for the absolutely-placed prev/next controls. */
.pc-problems {
	position: relative;
}

/* The scroll-snap track. Horizontal overflow with mandatory snap so each card
 * settles cleanly. scrollbar hidden — paging is via buttons / swipe / keys. */
.pc-problems__track {
	display: flex;
	gap: var(--nllm-space-md);
	margin: 0;
	padding: var(--nllm-space-xs) var(--nllm-space-xs) var(--nllm-space-md);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;            /* Firefox */
}

.pc-problems__track::-webkit-scrollbar {
	display: none;                    /* WebKit */
}

/* ── Slide ─────────────────────────────────────────────────────────────────
 * Responsive fixed width so several peek into view on desktop and one fills a
 * phone. min() caps the width on narrow viewports. */
.pc-problem {
	flex: 0 0 auto;
	width: min(360px, 85vw);
	scroll-snap-align: start;
}

/* ── Card ──────────────────────────────────────────────────────────────────
 * The card is the positioning context for the overlay reveal. Min-height keeps
 * the row even while different quotes vary in length, and is sized generously so
 * the hover "Solved" overlay (taller than the bare complaint) fits inside the
 * card without scrolling. `overflow: hidden` is load-bearing: it CLIPS the
 * absolutely-positioned solve overlay to the card bounds, so the panel can never
 * spill out into the carousel / page (the overflow the modal used to work around). */
.pc-problem__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 400px;
	height: 100%;
	overflow: hidden;
	background-color: var(--nllm-surface-soft);
	border: 1px solid var(--nllm-surface-edge);
	border-left: 4px solid var(--pc-bolt-amber);
	border-radius: var(--nllm-radius-md);
}

/* ── Problem face ──────────────────────────────────────────────────────────
 * The always-visible front: source badge, theme, the verbatim quote, the
 * attributed source link, and (on hover devices) the reveal affordance. */
.pc-problem__problem {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	padding: var(--nllm-space-lg);
}

/* Source platform chip — distinct accents per platform for quick scanning. */
.pc-problem__badge {
	align-self: flex-start;
	padding: 2px var(--nllm-space-xs);
	font-size: var(--nllm-text-xs);
	font-weight: var(--nllm-font-weight-semibold);
	letter-spacing: 0.02em;
	color: var(--nllm-text-subtle);
	background-color: var(--nllm-surface-deep);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-full);
}

.pc-problem__theme {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--nllm-text);
}

/* The complaint itself. A left rule + muted italic signals "their words". */
.pc-problem__quote {
	margin: 0;
	padding-left: var(--nllm-space-sm);
	border-left: 2px solid var(--nllm-surface-edge);
}

.pc-problem__quote p {
	margin: 0;
	font-size: var(--nllm-text-sm);
	font-style: italic;
	color: var(--nllm-text-muted);
}

/* Mandatory attribution link — kept visually quiet but always present. */
.pc-problem__source {
	margin-top: auto;
	font-size: var(--nllm-text-xs);
	color: var(--nllm-text-subtle);
	text-decoration: none;
}

.pc-problem__source:hover {
	color: var(--nllm-text);
	text-decoration: underline;
}

/* ── Solve panel ───────────────────────────────────────────────────────────
 * Baseline: stacked below the problem, always visible (no-JS / touch safe). */
.pc-problem__solve {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	padding: var(--nllm-space-lg);
	background-color: var(--nllm-violet-bg);
	border-top: 1px solid var(--nllm-surface-edge);
}

/* Persistent "Solved" promise — green status accent. */
.pc-problem__solved-tag {
	align-self: flex-start;
	padding: 2px var(--nllm-space-sm);
	font-size: var(--nllm-text-xs);
	font-weight: var(--nllm-font-weight-bold);
	color: var(--pc-status-flowing);
	background-color: var(--nllm-surface-deep);
	border: 1px solid var(--pc-status-flowing);
	border-radius: var(--nllm-radius-full);
}

.pc-problem__solve-headline {
	margin: 0;
	font-size: 0.98rem;
	font-weight: var(--nllm-font-weight-semibold);
	color: var(--nllm-text);
}

.pc-problem__solve-body p {
	margin: 0 0 var(--nllm-space-xs);
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
}

/* Feature chips — the shipped Power Claude features that address this pain. */
.pc-problem__features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-problem__feature-chip {
	padding: 2px var(--nllm-space-xs);
	font-size: var(--nllm-text-xs);
	color: var(--nllm-violet);
	background-color: var(--nllm-violet-pale);
	border-radius: var(--nllm-radius-sm);
}

/* Card actions — primary trial CTA + a quiet link to the full breakdown. */
.pc-problem__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-sm);
	align-items: center;
	margin-top: var(--nllm-space-xs);
}

.pc-problem__cta {
	padding: var(--nllm-space-xs) var(--nllm-space-md);
	font-size: var(--nllm-text-sm);
	font-weight: var(--nllm-font-weight-semibold);
	color: var(--nllm-surface-deep);
	background-color: var(--pc-bolt-amber);
	border-radius: var(--nllm-radius-sm);
	text-decoration: none;
}

.pc-problem__cta:hover {
	background-color: var(--pc-bolt-amber-pale);
}

.pc-problem__readmore {
	font-size: var(--nllm-text-xs);
	color: var(--nllm-violet);
	text-decoration: none;
}

.pc-problem__readmore:hover {
	text-decoration: underline;
}

/* ── Nav controls ──────────────────────────────────────────────────────────
 * Revealed by JS (hidden attribute removed). Centered vertically, overlapping
 * the track edges. Disabled state fades at the scroll extremes. */
.pc-problems__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--nllm-text);
	background-color: var(--nllm-surface-deep);
	border: 1px solid var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-full);
	transform: translateY(-50%);
	cursor: pointer;
}

.pc-problems__nav--prev { left: calc(-1 * var(--nllm-space-sm)); }
.pc-problems__nav--next { right: calc(-1 * var(--nllm-space-sm)); }

.pc-problems__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ── Hover-capable enhancement (JS present) ────────────────────────────────
 * [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1] Where a fine, hover-capable pointer exists AND problemsSlider.js has
 * marked the carousel `.is-enhanced`, the "Solved" panel becomes an absolutely-
 * positioned overlay that fills the card and is UNVEILED ON HOVER (or keyboard
 * :focus-within) — restoring the original hover reveal in place of the click
 * modal. Two things keep it inside the card and never clipped:
 *   • the card's `overflow: hidden` clips the overlay to the card bounds, so it
 *     cannot spill past the card into the carousel/section (no overflow), and
 *   • the overlay's `overflow-y: auto` + the card's generous min-height let even
 *     the tallest "Solved" body sit fully inside, scrolling internally only in
 *     the rare case it still exceeds the card (so no headline/CTA is ever cut).
 *
 * Touch / coarse-pointer / no-JS devices never match this query (or never get
 * `.is-enhanced`), so the panel stays stacked and fully visible — the accessible
 * baseline is unchanged. */
@media (hover: hover) and (pointer: fine) {
	/* The solve panel: an overlay that fills the card, hidden until hover/focus. */
	.is-enhanced .pc-problem__solve {
		position: absolute;
		inset: 0;
		z-index: 1;
		overflow-y: auto;                 /* internal scroll = the no-clip guarantee */
		border-top: 0;                    /* full overlay, not a stacked section */
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.75rem);
		transition:
			opacity var(--nllm-transition-fast, 0.15s ease),
			transform var(--nllm-transition-fast, 0.15s ease),
			visibility var(--nllm-transition-fast, 0.15s ease);
	}

	/* Unveil on pointer hover or when keyboard focus enters the card. */
	.is-enhanced .pc-problem__card:hover .pc-problem__solve,
	.is-enhanced .pc-problem__card:focus-within .pc-problem__solve {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* The card lifts + its amber rule brightens on hover/focus so it still reads
	 * as interactive (the hover IS the affordance now — no button, no modal). */
	.is-enhanced .pc-problem__card {
		transition: border-color var(--nllm-transition-fast, 0.15s ease),
			transform var(--nllm-transition-fast, 0.15s ease);
	}

	.is-enhanced .pc-problem__card:hover,
	.is-enhanced .pc-problem__card:focus-within {
		border-color: var(--pc-bolt-amber);
		transform: translateY(-2px);
	}
}

/* ── Reduced motion ────────────────────────────────────────────────────────
 * Honour the user preference: no scroll easing, no card lift, instant reveal. */
@media (prefers-reduced-motion: reduce) {
	.pc-problems__track { scroll-behavior: auto; }

	.is-enhanced .pc-problem__card {
		transition: none;
	}

	.is-enhanced .pc-problem__card:hover,
	.is-enhanced .pc-problem__card:focus-within {
		transform: none;
	}

	/* Instant reveal — no fade/slide for the solve overlay. */
	.is-enhanced .pc-problem__solve {
		transition: none;
		transform: none;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/proof-chart.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/proof-chart.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Proof Chart
 * Layout: marketing.section.proof-chart
 *
 * Used on: product (standalone or nested inside proof-grid)
 *
 * Schema (consumed by layout):
 *   - chart_id (required) — slug e.g. 'chart-recovery-latency'
 *   - chart_svg_path (required) — path relative to webroot
 *   - caption (required)
 *   - methodology_footnote (required)
 *
 * Visual spec:
 *   figure element wrapping an SVG chart. Caption below SVG. Expandable
 *   methodology footnote in a <details> element. Pending placeholder shown
 *   when SVG file is not yet available (dotted outline box).
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-surface-edge, --nllm-text,
 *   --nllm-text-muted, --nllm-text-subtle, --nllm-text-sm, --nllm-violet,
 *   --nllm-space-xl, --nllm-space-lg, --nllm-space-md, --nllm-radius-md
 *
 * M1 status: minimal baseline with pending placeholder. M2 adds SVG animations.
 *
 * [claude:sonnet-4.6][hurc:v0.7.0]
 */

.pc-section--proof-chart {
	background-color: var(--nllm-surface);
}

.pc-proof-chart {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-md);
}

.pc-proof-chart__svg-wrap {
	background-color: var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-md);
	overflow: hidden;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pc-proof-chart__svg-wrap svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Chart lightbox trigger ────────────────────────────────────────────────
 * [claude:opus-4.7-1m][hurc:v0.7.0] The inline SVG chart is wrapped in a <button> so it opens in the
 * shared marketing lightbox. A <button> carries UA chrome (border, padding,
 * background, system font) — this block resets all of it so the button is a
 * transparent, full-width wrapper around the SVG. Mirrors
 * .pc-feature-tile__screenshot-link. */
.pc-proof-chart__svg-link {
	/* Button reset — strip every piece of UA chrome. */
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	/* Wrapper behaviour — zoom affordance + focus clip. */
	position: relative;
	cursor: zoom-in;
	outline: none;
}

/* Subtle scale-up of the chart on hover/keyboard focus. */
.pc-proof-chart__svg-link svg {
	transition: transform .25s ease;
}

.pc-proof-chart__svg-link:hover svg,
.pc-proof-chart__svg-link:focus-visible svg {
	transform: scale(1.015);
}

/* Keyboard focus ring — violet, matches the brand accent. */
.pc-proof-chart__svg-link:focus-visible {
	box-shadow: inset 0 0 0 3px var(--nllm-violet, #8b5cf6);
}

/* "Click to expand" pill — hidden until hover/focus so it does not clutter
 * the chart on first paint. */
.pc-proof-chart__expand-hint {
	position: absolute;
	bottom: var(--nllm-space-sm, .5rem);
	right: var(--nllm-space-sm, .5rem);
	padding: 4px 10px;
	font-size: var(--nllm-text-xs, .75rem);
	font-weight: 600;
	color: #fff;
	background: rgba(15, 23, 42, .82);
	border-radius: 999px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.pc-proof-chart__svg-link:hover .pc-proof-chart__expand-hint,
.pc-proof-chart__svg-link:focus-visible .pc-proof-chart__expand-hint {
	opacity: 1;
	transform: translateY(0);
}

.pc-proof-chart__pending {
	width: 100%;
	min-height: 200px;
	border: 2px dashed var(--nllm-surface-edge);
	border-radius: var(--nllm-radius-md);
	opacity: 0.4;
}

.pc-proof-chart__caption {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	text-align: center;
	line-height: 1.5;
}

.pc-proof-chart__methodology {
	border-top: 1px solid var(--nllm-surface-soft);
	padding-top: var(--nllm-space-md);
}

.pc-proof-chart__methodology-toggle {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-violet);
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}

.pc-proof-chart__methodology-body {
	font-size: 0.75rem;
	color: var(--nllm-text-subtle);
	line-height: 1.6;
	margin-top: var(--nllm-space-md);
}

@media (max-width: 768px) {
	.pc-proof-chart__svg-wrap {
		min-height: 160px;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/proof-grid.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/proof-grid.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Proof Grid
 * Layout: marketing.section.proof-grid
 *
 * Used on: product
 *
 * Schema (consumed by layout):
 *   - heading (required) — section heading text
 *   - intro (required) — introductory paragraph
 *   - charts (required, ≥1) — array of proof-chart $displayData shapes
 *
 * Visual spec:
 *   Section header (heading + intro) centered above a responsive chart grid.
 *   Charts laid out in 2 columns on desktop, 1 column on mobile.
 *   Each chart is rendered via the proof-chart sub-layout.
 *
 * Tokens used:
 *   --nllm-surface-deep, --nllm-text, --nllm-text-muted, --nllm-text-h2,
 *   --nllm-space-2xl, --nllm-space-xl, --nllm-space-lg, --nllm-space-md
 *
 * M1 status: minimal baseline. M2 adds masonry layout for unequal-height charts.
 *
 * [claude:sonnet-4.6]
 */

.pc-section--proof-grid {
	background-color: var(--nllm-surface-deep);
}

.pc-proof-grid__charts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nllm-space-xl);
	margin-top: var(--nllm-space-xl);
}

/* Single-chart layout (only chart in grid): full width */
.pc-proof-grid__charts > *:only-child {
	grid-column: 1 / -1;
}

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


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/testimonial.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/testimonial.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Testimonial — [claude:opus-4.7-1m]
 * Layout: marketing.section.testimonial
 *
 * Used on: home, product (Power Claude page).
 *
 * Each SectionType::TESTIMONIAL renders as its OWN <section> (not a grid).
 * The PageBuilder currently emits TWO sequential testimonial sections
 * (voice-1, voice-2) stacked vertically. We render each one as a
 * self-contained card so the boundary is visually unambiguous — no
 * card ever "trails off" because every card has a violet-soft left
 * accent, a top/bottom border, and a clear source-link footer.
 *
 * Mobile rationale: each card is already full-width per section, so the
 * cramped-3-up-grid problem that would have required a horizontal
 * scroll-snap carousel doesn't exist here. Users see one full-width
 * readable card, then scroll to the next. See docs/marketing/pages/home.md
 * "Layout note (superseded by live design)" for the spec reconciliation.
 *
 * Shape:
 *   .pc-section--testimonial    (full-bleed section wrapper)
 *   └── .pc-section__inner      (width-constrained inner)
 *       └── .pc-testimonial     (the card — figure)
 *           ├── .pc-testimonial__quote          (blockquote)
 *           └── .pc-testimonial__attribution    (figcaption: name / role / source)
 *
 * Padding pass: outer section block-padding trimmed ~30% (was 2xl → now lg)
 * since we now have visible card boundaries and don't need as much
 * inter-card whitespace.
 *
 * Tokens used:
 *   --nllm-surface, --nllm-surface-soft, --nllm-text, --nllm-text-muted,
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-violet, --nllm-violet-soft,
 *   --nllm-radius-md, --nllm-space-lg, --nllm-space-md, --nllm-space-sm
 */

.pc-section--testimonial {
	background-color: var(--nllm-surface);
	padding-block: var(--nllm-space-lg);                   /* trimmed from 2xl (~30% less) */
}

.pc-section--testimonial .pc-section__inner {
	max-width: 880px;
	margin-inline: auto;
	padding-inline: var(--nllm-space-lg);
}

/* The testimonial card — clear violet left accent terminates the quote
 * visually. Same idiom as mod_nllm_testimonials cards for consistency. */
.pc-testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
	margin: 0;
	padding: var(--nllm-space-lg) var(--nllm-space-lg) var(--nllm-space-md);
	background-color: var(--nllm-surface-soft);
	border: 1px solid rgba(71, 85, 105, 0.4);
	border-left: 4px solid var(--nllm-violet);
	border-radius: var(--nllm-radius-md);
	transition: border-color var(--nllm-transition-fast, 0.18s ease),
		box-shadow var(--nllm-transition-fast, 0.18s ease);
}

.pc-testimonial:hover {
	border-color: var(--nllm-violet-soft);
	box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.pc-testimonial__quote {
	margin: 0;
	padding: 0;
	font-size: var(--nllm-text-body, 1rem);
	color: var(--nllm-text-muted);
	line-height: 1.7;
	font-style: italic;
}

.pc-testimonial__quote p {
	margin: 0;
}

.pc-testimonial__quote::before {
	content: '\201C';
	font-size: 2.25rem;
	color: var(--nllm-violet-soft);
	line-height: 0.5;
	vertical-align: -0.45em;
	margin-inline-end: 0.1em;
	font-style: normal;
}

/* Attribution + source link — sits beneath the quote with a hairline
 * separator. Source link gets brand-violet treatment so it reads as
 * "click to verify this is real" rather than a generic anchor. */
.pc-testimonial__attribution {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--nllm-space-sm) var(--nllm-space-md);
	padding-top: var(--nllm-space-md);
	border-top: 1px solid rgba(71, 85, 105, 0.3);
}

.pc-testimonial__name {
	font-size: var(--nllm-text-sm, 0.875rem);
	font-weight: 700;
	color: var(--nllm-text);
}

.pc-testimonial__role {
	font-size: 0.8125rem;
	color: var(--nllm-text-subtle);
	font-style: italic;
}

.pc-testimonial__source {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--nllm-violet-soft);
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pc-testimonial__source span {
	display: inline-block;
	margin-left: 0.2em;
	transition: transform 0.15s ease;
}

.pc-testimonial__source:hover,
.pc-testimonial__source:focus-visible {
	color: var(--nllm-violet);
	border-bottom-color: var(--nllm-violet-soft);
}

.pc-testimonial__source:hover span,
.pc-testimonial__source:focus-visible span {
	transform: translateX(3px);
}

@media (max-width: 640px) {
	.pc-section--testimonial {
		padding-block: var(--nllm-space-md);
	}

	.pc-section--testimonial .pc-section__inner {
		padding-inline: var(--nllm-space-md);
	}

	.pc-testimonial {
		padding: var(--nllm-space-md);
	}

	.pc-testimonial__attribution {
		flex-direction: column;
		align-items: flex-start;
	}

	.pc-testimonial__source {
		margin-left: 0;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/throughput-visualizer.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/throughput-visualizer.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Throughput Visualizer — concurrency speed race (CONVERSION-FOCUSED)
 * Layout: marketing.section.throughput-visualizer
 *
 * Used on: home / product (/power-claude)
 *
 * VISUAL SPEC
 *   A "feel the difference" widget. A single slider sets concurrent Claude Code
 *   sessions (1→20); two horizontal bars race below it:
 *     • Single account  — red (pain), grows linearly with session count
 *     • Power Balanced   — amber→bolt (relief), stays short until N exceeds the
 *                          account pool, then climbs gently
 *   A live "N× faster" badge sits beside the Balanced bar, and a plain-language
 *   readout sentence explains what the slider position means.
 *
 *   The point is visceral: as the visitor drags the slider up, the red bar
 *   stretches across the card while the amber bar barely moves — the gap IS
 *   the sales argument. Colour is reinforced by bar length + numeric labels so
 *   the meaning survives colour-blindness and greyscale.
 *
 *   Mobile-first: at 320px everything stacks single-column, bars full-width.
 *   The slider stays horizontal at every width. No layout reflow ≥600px beyond
 *   slightly roomier padding — the bar race reads the same on phone and desktop.
 *
 * MOTION
 *   Bars tween their width over --nllm-transition-base (220ms) so dragging the
 *   slider animates the race. Under prefers-reduced-motion the bars snap.
 *
 * TOKENS USED
 *   --nllm-surface, --nllm-surface-soft, --nllm-text, --nllm-text-muted,
 *   --nllm-text-subtle, --nllm-text-sm, --nllm-text-h2,
 *   --nllm-violet, --nllm-violet-pale,
 *   --pc-bolt-amber, --pc-bolt-amber-pale, --pc-status-blocked,
 *   --nllm-space-xs/sm/md/lg/xl, --nllm-radius-sm/md/lg,
 *   --nllm-shadow-md, --nllm-transition-base
 *
 * [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0]
 */

/* ─────────────────────────────────────────────────────────────────────
 * SECTION CONTAINER
 * Dark surface — a "rest stop" between feature blocks, same treatment as
 * the calculator section so the two interactive widgets feel like a set.
 * ───────────────────────────────────────────────────────────────────── */
.pc-section--throughput {
	background-color: var(--nllm-surface);
}

/* ─────────────────────────────────────────────────────────────────────
 * SECTION HEADER — "How concurrent sessions actually feel"
 * Centred above the card; heading on the h2 token, one-line muted lede.
 * ───────────────────────────────────────────────────────────────────── */
.pc-tv__header {
	max-width: 680px;
	margin: 0 auto var(--nllm-space-lg);
	text-align: center;
}

.pc-tv__heading {
	font-size: var(--nllm-text-h2, 36px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--nllm-text);
	margin: 0 0 var(--nllm-space-sm);
}

.pc-tv__lede {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────
 * CARD — the visualizer surface
 * Soft-elevated card matching the calculator. Column flex: slider on top,
 * bar race below, readout + methodology last.
 * ───────────────────────────────────────────────────────────────────── */
.pc-throughput {
	max-width: 680px;
	margin: 0 auto;
	background-color: var(--nllm-surface-soft);
	border-radius: var(--nllm-radius-lg);
	padding: var(--nllm-space-lg);
	box-shadow: var(--nllm-shadow-md);
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-lg);
}

/* ─────────────────────────────────────────────────────────────────────
 * SLIDERS — sessions (primary) + accounts pool size (secondary)
 * Two stacked controls. Sessions drives how fast queuing builds; accounts
 * drives when the pool absorbs the load. Both update the bar race live.
 * ───────────────────────────────────────────────────────────────────── */
.pc-throughput__controls {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-sm);
}

.pc-throughput__control {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-xs);
}

.pc-throughput__label {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	font-weight: 500;
}

/* Secondary label (accounts) — slightly muted so the sessions slider
 * reads as the primary control. */
.pc-throughput__label--secondary {
	color: var(--nllm-text-subtle);
	font-weight: 400;
}

.pc-throughput__range-row {
	display: flex;
	align-items: center;
	gap: var(--nllm-space-md);
}

/* Range slider: full-width track, violet thumb via accent-color. */
.pc-throughput__range {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--nllm-violet);
}

/* Accounts slider uses bolt-amber accent to match the balanced bar. */
.pc-throughput__range--accounts {
	accent-color: var(--pc-bolt-amber);
}

/* Live numeric value — fixed width so the track doesn't jiggle when the
 * value crosses a digit boundary (1 → 10 → 20). */
.pc-throughput__range-value {
	flex: 0 0 3ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--nllm-text);
}

/* Accounts value — matches the muted label treatment. */
.pc-throughput__range-value--accounts {
	color: var(--nllm-text-subtle);
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
 * BAR RACE — the showpiece
 * Two rows, each: a small caption label, then a track holding the fill bar
 * plus the time/speedup readouts. Track is the full card width; the fill
 * width is driven live by JS (style.width = "NN%").
 * ───────────────────────────────────────────────────────────────────── */
.pc-throughput__race {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-md);
	padding-top: var(--nllm-space-md);
	border-top: 1px solid var(--nllm-surface);
}

.pc-throughput__lane {
	display: flex;
	flex-direction: column;
	gap: var(--nllm-space-xs);
}

.pc-throughput__lane-label {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	font-weight: 600;
}

/* Track: the full-width rail the fill bar grows along. */
.pc-throughput__track {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--nllm-space-sm);
	background-color: var(--nllm-surface);
	border-radius: var(--nllm-radius-sm);
	min-height: 2.25rem;
	padding: 0;
	overflow: hidden;
}

/* Fill bar — width set live by JS. Tween so dragging animates the race. */
.pc-throughput__bar {
	height: 2.25rem;
	border-radius: var(--nllm-radius-sm);
	transition: width var(--nllm-transition-base);
	flex: 0 0 auto;
}

/* Single account = pain. Red, the longest bar at high session counts. */
.pc-throughput__bar--single {
	background-color: var(--pc-status-blocked);
}

/* Power Balanced = relief. Bolt-amber gradient, stays short. */
.pc-throughput__bar--balanced {
	background: linear-gradient(90deg, var(--pc-bolt-amber), var(--pc-bolt-amber-pale));
}

/* Time readout sits on the track, after the bar. Absolute so it never
 * forces the bar to shrink; tabular-nums keeps it from jittering. */
.pc-throughput__time {
	position: absolute;
	right: var(--nllm-space-sm);
	font-size: var(--nllm-text-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--nllm-text);
	pointer-events: none;
}

/* Speedup badge beside the Balanced lane label. Bolt-amber pill. */
.pc-throughput__speedup {
	display: inline-block;
	margin-left: var(--nllm-space-sm);
	padding: 2px var(--nllm-space-sm);
	border-radius: var(--nllm-radius-sm);
	background-color: var(--pc-bolt-amber);
	color: var(--nllm-surface);
	font-size: var(--nllm-text-sm);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.pc-throughput__speedup[hidden] {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────────
 * READOUT — plain-language explanation of the current slider position
 * aria-live so screen readers hear the updated sentence after the slider
 * settles (the JS debounces via rAF).
 * ───────────────────────────────────────────────────────────────────── */
.pc-throughput__readout {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	line-height: 1.5;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * METHODOLOGY DISCLOSURE
 * Collapsed <details> carrying the model + real-world hedge. Subtle so it
 * doesn't compete with the bar race, but present for the skeptical reader.
 * ───────────────────────────────────────────────────────────────────── */
.pc-throughput__methodology {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
}

.pc-throughput__methodology-toggle {
	cursor: pointer;
	color: var(--nllm-text-muted);
	font-weight: 600;
}

.pc-throughput__methodology-body {
	margin: var(--nllm-space-sm) 0 0;
	line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────
 * STATIC SVG FALLBACK
 * The chart that renders below the card for no-JS / pre-hydration visitors.
 * Interactive-JS users see the live bar race first; this carries the full
 * 1→20 session curve the single-snapshot bars can't show.
 * ───────────────────────────────────────────────────────────────────── */
.pc-throughput__chart {
	max-width: 680px;
	margin: var(--nllm-space-lg) auto 0;
}

.pc-throughput__chart img,
.pc-throughput__chart svg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nllm-radius-md);
}

/* ─────────────────────────────────────────────────────────────────────
 * RESPONSIVE BREAKPOINTS
 * 768px: card padding bumps up for the desktop reading distance, heading
 *        grows to the h1 token to anchor the section.
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.pc-throughput {
		padding: var(--nllm-space-xl);
	}
	.pc-tv__heading {
		font-size: var(--nllm-text-h1, 48px);
	}
}

/* Reduced motion: bars snap to their new width instead of tweening. */
@media (prefers-reduced-motion: reduce) {
	.pc-throughput__bar {
		transition: none;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/section/trust-bar.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/section/trust-bar.css
   Run `make sync-assets` after editing the source. */

/**
 * Section: Trust Bar
 * Layout: marketing.section.trust-bar
 *
 * Used on: home, product, pricing
 *
 * Schema (consumed by layout — anticipated, M2 finalises):
 *   - items (required) — array of {icon?, label, value?} trust signals
 *   - label (optional) — prefix label e.g. "Trusted by:"
 *   - style (optional, default 'strip') — 'strip' | 'logo-row'
 *
 * Visual spec:
 *   Horizontal strip of trust signals (e.g. "10k+ users", "SOC2", star ratings).
 *   Dark surface, muted text, separated by vertical dividers. Logo-row variant
 *   shows grayscale partner/media logos instead of text items.
 *
 * Tokens used:
 *   --nllm-surface-soft, --nllm-surface-edge, --nllm-text-subtle,
 *   --nllm-text-muted, --nllm-text-sm, --nllm-space-xl, --nllm-space-lg,
 *   --nllm-space-md
 *
 * M1 status: minimal baseline. M2 adds logo-row variant with lazy-loaded images.
 *
 * [claude:sonnet-4.6]
 * [claude:sonnet-4-6] Stack items vertically at 480px — white-space:nowrap caused 355px overflow at 320px
 */

.pc-section--trust-bar {
	background-color: var(--nllm-surface-soft);
	padding: var(--nllm-space-lg) var(--nllm-space-xl);
}

.pc-trust-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nllm-space-lg);
	flex-wrap: wrap;
	max-width: 1100px;
	margin: 0 auto;
}

.pc-trust-bar__label {
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-subtle);
	font-weight: 500;
	white-space: nowrap;
}

.pc-trust-bar__item {
	display: flex;
	align-items: center;
	gap: var(--nllm-space-sm);
	font-size: var(--nllm-text-sm);
	color: var(--nllm-text-muted);
	white-space: nowrap;
}

.pc-trust-bar__item + .pc-trust-bar__item::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 1rem;
	background-color: var(--nllm-surface-edge);
	margin-right: var(--nllm-space-lg);
}

.pc-trust-bar__item-value {
	font-weight: 700;
	color: var(--nllm-text);
}

@media (max-width: 768px) {
	.pc-trust-bar {
		gap: var(--nllm-space-md);
	}

	.pc-trust-bar__item + .pc-trust-bar__item::before {
		display: none;
	}
}

@media (max-width: 480px) {
	.pc-section--trust-bar {
		padding: var(--nllm-space-md) var(--nllm-space-md);
	}

	.pc-trust-bar,
	.pc-trust-bar__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--nllm-space-sm);
	}

	.pc-trust-bar__item {
		white-space: normal;
	}

	.pc-trust-bar__label {
		white-space: normal;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/sticky/cta.css ─────────────────────────────────────────────── */
/* ==========================================================================
   STICKY CTA BAR — Marketing pages overlay
   ==========================================================================

   PURPOSE
   -------
   Persistent bottom-anchored bar that surfaces the trial-CTA once the visitor
   scrolls past the hero. Designed for conversion-critical marketing pages
   (home, /power-claude, /pricing, /faq) — explicitly excluded from /about
   and /changelog where it would feel like nagging.

   [claude:opus-4.7-1m] New file 2026-05-13 — Phase 1.4 of the neural-llm.com
   overhaul. Loaded via joomla.asset.json key `marketing.sticky.cta`, gated by
   server-side body-class check in templates/nllm/index.php.

   ARCHITECTURE
   ------------
   Single block (.nllm-sticky-cta) + one modifier (.nllm-sticky-cta--visible)
   + two elements (__text, __btn). Hidden by default via translateY(100%);
   inline script in index.php toggles --visible after scrollY > 400px.
   Z-index 100 keeps it above page content but BELOW Joomla admin notices.

   DEPENDENCIES
   ------------
   - nllm.tokens (brand/tokens.css) for color/space/radius variables
   - No JS dependency in this file — trigger script is inline in index.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   BLOCK: .nllm-sticky-cta
   Bottom-anchored bar. Fixed positioning + backdrop-filter for the
   glass-on-dark aesthetic that matches the deep-navy surface.
   -------------------------------------------------------------------------- */
.nllm-sticky-cta {
	/* Anchor — full-width strip at the viewport's bottom edge */
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 100;

	/* Surface — glass over deep navy, matches --nllm-surface-deep */
	background-color: rgba(15, 23, 42, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);   /* Safari fallback */
	border-block-start: 1px solid var(--nllm-surface-edge, #334155);

	/* Layout — horizontal flow with comfortable padding */
	display: flex;
	flex-wrap: wrap;
	gap: var(--nllm-space-md, 1rem);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--nllm-space-md, 1rem);
	padding-inline: var(--nllm-space-lg, 1.5rem);

	/* Animation — slide up on visibility toggle */
	transform: translateY(110%);    /* 110% ensures the box-shadow clears too */
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Type baseline */
	font-family: var(--nllm-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--nllm-text, #f8fafc);
}

/* --------------------------------------------------------------------------
   STATE MODIFIER: .nllm-sticky-cta--visible
   Toggled by inline scroll handler in templates/nllm/index.php.
   -------------------------------------------------------------------------- */
.nllm-sticky-cta--visible {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   ELEMENT: .nllm-sticky-cta__text
   Headline copy on the left side. Keeps weight to anchor the bar visually
   without competing with the CTA button for attention.
   -------------------------------------------------------------------------- */
.nllm-sticky-cta__text {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--nllm-text, #f8fafc);
	margin: 0;
}

/* --------------------------------------------------------------------------
   ELEMENT: .nllm-sticky-cta__btn
   Amber CTA — visually consistent with .nllm-hero__btn--primary so visitors
   recognize the trial action. Solid background-color + gradient-as-image
   so the button stays visible under any rendering edge case.
   -------------------------------------------------------------------------- */
.nllm-sticky-cta__btn {
	/* Solid amber backstop in case --pc-bolt-amber is unset */
	background-color: var(--pc-bolt-amber, #f59e0b);
	background-image: var(--pc-bolt-gradient,
		linear-gradient(135deg, #fde68a 0%, #f59e0b 35%, #ec4899 75%, #a855f7 100%));
	color: #0f172a;
	font-weight: 700;
	letter-spacing: 0.01em;

	/* Shape */
	padding-block: 0.6rem;
	padding-inline: 1.4rem;
	border: none;
	border-radius: var(--nllm-radius-full, 999px);
	text-decoration: none;
	white-space: nowrap;

	/* Resting glow + lift on hover */
	box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
	transition:
		transform 150ms ease,
		box-shadow 150ms ease;
}

.nllm-sticky-cta__btn:hover,
.nllm-sticky-cta__btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(245, 158, 11, 0.55);
	outline: none;
}

.nllm-sticky-cta__btn:focus-visible {
	outline: 2px solid var(--nllm-cyan-bright, #22d3ee);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Mobile (<600px)
   Stack the text above the button so neither truncates. Reduce padding +
   text size so the bar doesn't dominate the viewport on small phones.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.nllm-sticky-cta {
		flex-direction: column;
		align-items: stretch;
		gap: var(--nllm-space-sm, 0.5rem);
		padding-block: var(--nllm-space-sm, 0.5rem);
		padding-inline: var(--nllm-space-md, 1rem);
	}

	.nllm-sticky-cta__text {
		text-align: center;
		font-size: 0.85rem;
	}

	.nllm-sticky-cta__btn {
		text-align: center;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — Reduced motion users get an instant fade-in/out instead
   of the slide animation.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nllm-sticky-cta {
		transition: opacity 200ms ease;
		transform: none;
		opacity: 0;
		pointer-events: none;
	}

	.nllm-sticky-cta--visible {
		opacity: 1;
		pointer-events: auto;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/page/about.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/page/about.css
   Run `make sync-assets` after editing the source. */

/**
 * Page: about
 * Body class: .pc-page--about
 *
 * Sections on this page (anticipated M2 content):
 *   section-header (mission), feature-tile ×2 (company values),
 *   methodology, trust-bar, final-cta
 *
 * Page-scope overrides:
 *   - About page has narrower content columns for editorial readability.
 *   - feature-tile on about page uses a single-column stacked layout
 *     since it's narrative-focused, not feature-comparison focused.
 *
 * M1 status: page wrapper + narrow content width. M2 fills in actual
 *   about-page content (company story, team section).
 *
 * [claude:sonnet-4.6]
 */

.pc-page--about .pc-section {
	max-width: 860px;
}

.pc-page--about .pc-feature-tile__inner {
	flex-direction: column;
	max-width: 720px;
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/page/changelog.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/page/changelog.css
   Run `make sync-assets` after editing the source. */

/**
 * Page: changelog
 * Body class: .pc-page--changelog
 *
 * Sections on this page:
 *   section-header (page intro), changelog entries (rendered via
 *   .nllm-changelog / .nllm-changelog-entry components in components.css),
 *   final-cta
 *
 * Page-scope overrides:
 *   - Changelog entries use the .nllm-changelog component from components.css.
 *   - This file only handles the section wrapper and centering.
 *   - Entries are a timeline list; no grid layout needed.
 *
 * M1 status: page wrapper + centered entry list width. M2 adds version
 *   filter by tag (feat/fix/chore) and RSS link.
 *
 * [claude:sonnet-4.6]
 */

.pc-page--changelog {
	background-color: var(--nllm-surface-deep);
}

.pc-page--changelog .pc-section {
	max-width: 860px;
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/page/faq.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/page/faq.css
   Run `make sync-assets` after editing the source. */

/**
 * Page: faq
 * Body class: .pc-page--faq
 *
 * Sections on this page:
 *   section-header (page intro), faq-accordion (full list, 2-col layout),
 *   final-cta
 *
 * Page-scope overrides:
 *   - FAQ page uses a wider single-column accordion (max-width 900px) so
 *     questions have full room to breathe. The 2-col grid is pricing-only.
 *   - Page background is surface-deep for maximum contrast with accordion cards.
 *
 * M1 status: page background + accordion width override. M2 adds category
 *   tabs / filter to navigate large FAQ sets.
 *
 * [claude:sonnet-4.6]
 */

.pc-page--faq {
	background-color: var(--nllm-surface-deep);
}

.pc-page--faq .pc-faq-accordion {
	max-width: 900px;
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/page/home.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/page/home.css
   Run `make sync-assets` after editing the source. */

/**
 * Page: home
 * Body class: .pc-page--home
 *
 * Sections on this page (M1 placeholder order, M2 refines):
 *   hero, value-props (feature-tile ×4), testimonial ×3,
 *   pricing-teaser (pricing-grid compact), faq-preview (faq-accordion),
 *   trust-bar, final-cta
 *
 * Page-scope overrides (all section styling handled by section CSS):
 *   - Hero gets extra top padding (no nav overlap)
 *   - trust-bar on home page sits between testimonials and pricing-teaser
 *
 * M1 status: page-scope wrapper only. M2 adds page-specific section
 *   ordering tweaks and hero background overlay.
 *
 * [claude:sonnet-4.6]
 */

.pc-page--home .pc-section--hero {
	padding-top: var(--nllm-space-2xl);
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/page/pricing.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/page/pricing.css
   Run `make sync-assets` after editing the source. */

/**
 * Page: pricing
 * Body class: .pc-page--pricing
 *
 * Sections on this page:
 *   hero, pricing-grid (full 3-card), comparison-table, faq-accordion,
 *   trust-bar, final-cta
 *
 * Page-scope overrides:
 *   - Hero on pricing page is shorter — reduced padding since pricing
 *     grid immediately follows and provides the visual weight.
 *   - FAQ accordion uses 2-column layout on pricing page.
 *
 * M1 status: page-scope hero height + FAQ 2-col trigger. M2 adds annual/
 *   monthly toggle that updates pricing-grid card amounts in real-time.
 *
 * [claude:sonnet-4.6]
 */

.pc-page--pricing .pc-section--hero {
	padding-top: var(--nllm-space-xl);
	padding-bottom: var(--nllm-space-xl);
}

.pc-page--pricing .pc-faq-accordion {
	max-width: 1100px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--nllm-space-md);
}

@media (max-width: 768px) {
	.pc-page--pricing .pc-faq-accordion {
		grid-template-columns: 1fr;
	}
}


/* ── media/com_neurallicense/css/src/site/feature/marketing/page/product.css ─────────────────────────────────────────────── */
/* GENERATED — DO NOT EDIT. Source: src/var/www/html/administrator/components/com_neurallicense/src/Domain/Marketing/site/assets/css/page/product.css
   Run `make sync-assets` after editing the source. */

/**
 * Page: product
 * Body class: .pc-page--product
 *
 * Sections on this page (full conversion arc):
 *   hero, cost-of-manual, feature-tile ×5 (alternating left/right),
 *   proof-grid, comparison-table, calculator, trust-bar,
 *   pricing-grid (teaser), final-cta, disclaimer
 *
 * Page-scope overrides:
 *   - Alternating feature-tile background (surface / surface-soft) for
 *     visual rhythm. Layout drives background_token per section, but this
 *     provides a fallback nth-child rule.
 *
 * M1 status: alternating feature-tile backgrounds. M2 adds sticky in-page
 *   nav (anchor links to major sections).
 *
 * [claude:sonnet-4.6]
 */

.pc-page--product .pc-section--feature-tile:nth-child(odd) {
	background-color: var(--nllm-surface);
}

.pc-page--product .pc-section--feature-tile:nth-child(even) {
	background-color: var(--nllm-surface-soft);
}