/*
 * Neural LLM — nllm components.css
 *
 * PURPOSE:
 *   Reusable branded UI components used across marketing pages.
 *   Every component here is self-contained: it can be dropped into any
 *   page layout without inheriting local state from a parent component.
 *
 * ARCHITECTURE:
 *   Load order: tokens.css → template.css → components.css → responsive.css
 *   Components defined here:
 *     - CTA Buttons (.nllm-btn)
 *     - Hero section (.nllm-hero)
 *     - Pricing grid (.nllm-pricing-grid / .nllm-pricing-card)
 *     - Feature tiles (.nllm-features-grid / .nllm-feature-tile)
 *     - Download buttons (.nllm-download-btn)
 *     - Comparison table (.nllm-compare-table)
 *     - Testimonial card (.nllm-testimonial)
 *     - Announcement banner (.nllm-banner)
 *     - Code block (.nllm-code-block)
 *     - Changelog entry (.nllm-changelog)
 *
 * DEPENDENCIES:
 *   ../../../media/com_neurallicense/brand/tokens.css  (--nllm-* / --pc-*)
 *   template.css (body reset, surface variables must be loaded first)
 *
 * [claude:sonnet-4.6][hurc:v0.7.0]
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CTA BUTTONS
   .nllm-btn                  — base (filled violet)
   .nllm-btn--bolt            — amber→magenta→violet gradient (Power Claude CTA)
   .nllm-btn--outline         — outlined, transparent fill
   .nllm-btn--ghost           — text-only, no border
   .nllm-btn--sm / --lg       — size modifiers
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nllm-space-sm);
    padding: 0.625rem 1.25rem;           /* 10px 20px */
    border-radius: var(--nllm-radius-sm);
    font-family: var(--nllm-font-sans);
    font-size: var(--nllm-text-sm);      /* 14px */
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    /* Default: filled violet */
    background-color: var(--nllm-violet);
    color: var(--nllm-text);
    box-shadow: var(--nllm-shadow-sm);
    transition:
        background-color var(--nllm-transition-fast),
        transform var(--nllm-transition-fast),
        box-shadow var(--nllm-transition-fast),
        opacity var(--nllm-transition-fast);
    white-space: nowrap;
}

.nllm-btn:hover {
    background-color: var(--nllm-violet-deep);
    color: var(--nllm-text);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--nllm-shadow-md);
}

.nllm-btn:focus-visible {
    outline: 2px solid var(--nllm-violet-soft);
    outline-offset: 3px;
}

.nllm-btn:active {
    transform: translateY(0);
    box-shadow: var(--nllm-shadow-sm);
}

/* Bolt gradient CTA — the primary Power Claude action button */
.nllm-btn--bolt {
    background: var(--pc-bolt-gradient);
    color: var(--nllm-surface-deep) !important;   /* dark text on bright gradient */
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.nllm-btn--bolt:hover {
    /* Slightly saturate / brighten the gradient on hover via a semi-transparent overlay */
    background: var(--pc-bolt-gradient);
    filter: brightness(1.1);
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.4);
    color: var(--nllm-surface-deep) !important;
}

/* Outline variant */
.nllm-btn--outline {
    background-color: transparent;
    border-color: var(--nllm-violet);
    color: var(--nllm-violet-soft);
    box-shadow: none;
}

.nllm-btn--outline:hover {
    background-color: rgba(124, 58, 237, 0.1);
    border-color: var(--nllm-violet-soft);
    color: var(--nllm-text);
    box-shadow: none;
}

/* Ghost variant (text only) */
.nllm-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--nllm-text-muted);
    box-shadow: none;
}

.nllm-btn--ghost:hover {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    box-shadow: none;
}

/* Size variants */
.nllm-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.nllm-btn--lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--nllm-radius-md);
}

/* Full-width */
.nllm-btn--full {
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO SECTION
   Full-width gradient background with large heading, subhead, and CTA group.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-hero {
    position: relative;
    overflow: hidden;
    padding-block: calc(var(--nllm-space-2xl) * 2.5) calc(var(--nllm-space-2xl) * 2);
    text-align: center;
    /* Gradient backdrop — violet to deep navy */
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 237, 0.25) 0%, transparent 70%),
        var(--nllm-surface-deep);
}

/* Decorative grid overlay */
.nllm-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;
}

.nllm-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: var(--nllm-space-xl);
}

/* Eyebrow label above the main heading */
.nllm-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    color: var(--nllm-violet-pale);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-block-end: var(--nllm-space-lg);
}

/* Main display heading */
.nllm-hero__heading {
    font-size: clamp(2.25rem, 6vw, var(--nllm-text-display));   /* 36px → 72px */
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--nllm-text);
    margin-block-end: var(--nllm-space-lg);
}

/* Subheading / description */
.nllm-hero__subhead {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--nllm-text-muted);
    max-width: 640px;
    margin-inline: auto;
    margin-block-end: var(--nllm-space-xl);
    line-height: 1.6;
}

/* CTA button row */
.nllm-hero__ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nllm-space-md);
    flex-wrap: wrap;
}

/* Social proof row below CTAs */
.nllm-hero__social-proof {
    margin-block-start: var(--nllm-space-xl);
    color: var(--nllm-text-subtle);
    font-size: var(--nllm-text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nllm-space-md);
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PRICING GRID
   Three-column layout: Free | Pro Monthly | Pro Annual (highlighted)
   Hidden fourth column (Team Annual) kept as stub via display:none.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-pricing-section {
    padding-block: var(--nllm-space-2xl);
}

.nllm-pricing-section__heading {
    text-align: center;
    margin-block-end: var(--nllm-space-2xl);
}

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

/* Base card */
.nllm-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),
        border-color var(--nllm-transition-base);
}

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

/* Featured / highlighted card — Pro Annual */
.nllm-pricing-card--featured {
    border-color: var(--nllm-violet);
    box-shadow: var(--nllm-shadow-md);
    /* Scale up slightly to visually emphasise */
    transform: scale(1.03);
    background-color: var(--nllm-violet-bg);   /* deep brand purple */
}

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

/* "Best Value" badge on featured card */
.nllm-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;
}

/* Card header */
.nllm-pricing-card__tier {
    font-size: var(--nllm-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--nllm-violet-soft);
}

.nllm-pricing-card--featured .nllm-pricing-card__tier {
    color: var(--nllm-violet-pale);
}

/* Price display */
.nllm-pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--nllm-space-xs);
    line-height: 1;
}

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

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

.nllm-pricing-card__billing-note {
    font-size: 0.75rem;
    color: var(--nllm-text-subtle);
    margin-block-start: calc(var(--nllm-space-xs) * -1);
}

/* Savings pill */
.nllm-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);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Short description */
.nllm-pricing-card__desc {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    line-height: 1.5;
    margin: 0;
}

/* Divider between price and features */
.nllm-pricing-card__divider {
    border: none;
    border-top: 1px solid var(--nllm-surface-soft);
    margin-block: var(--nllm-space-sm) 0;
}

.nllm-pricing-card--featured .nllm-pricing-card__divider {
    border-color: rgba(124, 58, 237, 0.4);
}

/* Feature checklist */
.nllm-pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
    flex: 1;   /* push CTA to bottom */
}

.nllm-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);
    line-height: 1.4;
}

/* Checkmark icon via pseudo-element */
.nllm-pricing-card__features li::before {
    content: '✓';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(124, 58, 237, 0.15);
    color: var(--nllm-violet-soft);
    border-radius: var(--nllm-radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 1px;
}

/* Unavailable feature — muted with × */
.nllm-pricing-card__features li.is-unavailable {
    color: var(--nllm-text-subtle);
    opacity: 0.5;
}

.nllm-pricing-card__features li.is-unavailable::before {
    content: '×';
    background-color: transparent;
    color: var(--nllm-text-subtle);
}

/* CTA at bottom of card */
.nllm-pricing-card__cta {
    margin-block-start: var(--nllm-space-md);
}

/* Hidden Team Annual tier — keep DOM stub for future launch */
.nllm-pricing-card--hidden {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURE TILES
   3-4 column icon+heading+description grid (GitHub Copilot-inspired)
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-features-section {
    padding-block: var(--nllm-space-2xl);
}

.nllm-features-section__heading {
    text-align: center;
    margin-block-end: var(--nllm-space-xl);
}

.nllm-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nllm-space-lg);
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: var(--nllm-space-xl);
}

.nllm-features-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

.nllm-feature-tile {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    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),
        border-color var(--nllm-transition-base);
}

.nllm-feature-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--nllm-shadow-md);
    border-color: rgba(124, 58, 237, 0.4);
}

/* Icon container */
.nllm-feature-tile__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.1));
    border-radius: var(--nllm-radius-sm);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.nllm-feature-tile__heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nllm-text);
    margin: 0;
    line-height: 1.3;
}

.nllm-feature-tile__desc {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    margin: 0;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DOWNLOAD BUTTONS
   Platform-specific with icon + label, grouped in a flex row.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-download-group {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-md);
    flex-wrap: wrap;
}

.nllm-download-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    padding: 0.75rem 1.25rem;
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition:
        background-color var(--nllm-transition-fast),
        border-color var(--nllm-transition-fast),
        color var(--nllm-transition-fast),
        transform var(--nllm-transition-fast);
}

.nllm-download-btn:hover {
    background-color: var(--nllm-surface-soft);
    border-color: var(--nllm-violet);
    color: var(--nllm-text);
    transform: translateY(-2px);
    text-decoration: none;
}

.nllm-download-btn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nllm-download-btn__label {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nllm-download-btn__platform {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nllm-text-subtle);
    line-height: 1;
}

.nllm-download-btn__name {
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    color: var(--nllm-text);
    line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPARISON TABLE
   Feature matrix used on pricing page to compare tiers side-by-side.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--nllm-text-sm);
    max-width: 900px;
    margin-inline: auto;
}

.nllm-compare-table th,
.nllm-compare-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;
}

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

.nllm-compare-table thead th {
    font-weight: 700;
    color: var(--nllm-text);
    background-color: var(--nllm-surface);
    border-bottom-color: var(--nllm-surface-edge);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-block: var(--nllm-space-lg);
}

/* Highlight the featured tier column header */
.nllm-compare-table thead th.is-featured {
    color: var(--nllm-violet-soft);
    background-color: var(--nllm-violet-bg);
    border-bottom-color: var(--nllm-violet);
}

/* Check / cross icons in cells */
.nllm-compare-table .is-yes { color: var(--pc-status-flowing); font-size: 1rem; }
.nllm-compare-table .is-no  { color: var(--nllm-surface-edge); font-size: 1rem; }

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

/* ─────────────────────────────────────────────────────────────────────────────
   ANNOUNCEMENT BANNER
   Top-of-page strip for launch announcements, discounts, etc.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-banner {
    background: var(--nllm-gradient);
    color: var(--nllm-text);
    text-align: center;
    padding: var(--nllm-space-sm) var(--nllm-space-xl);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nllm-space-md);
}

.nllm-banner a {
    color: var(--nllm-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nllm-banner a:hover {
    color: var(--nllm-violet-pale);
}

/* Dismiss button */
.nllm-banner__dismiss {
    background: none;
    border: none;
    color: rgba(248, 250, 252, 0.6);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--nllm-transition-fast);
}

.nllm-banner__dismiss:hover {
    color: var(--nllm-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CODE BLOCK (enhanced beyond base pre/code)
   For FAQ technical answers and product page examples.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-code-block {
    position: relative;
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    overflow: hidden;
}

/* Language label / filename bar */
.nllm-code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    background-color: var(--nllm-surface-soft);
    border-bottom: 1px solid var(--nllm-surface-edge);
}

.nllm-code-block__lang {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nllm-text-subtle);
    font-family: var(--nllm-font-mono);
}

/* Window dots decoration */
.nllm-code-block__dots {
    display: flex;
    gap: 5px;
}

.nllm-code-block__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.nllm-code-block__dot--red    { background-color: #ff5f57; }
.nllm-code-block__dot--yellow { background-color: #febc2e; }
.nllm-code-block__dot--green  { background-color: #28c840; }

.nllm-code-block pre {
    margin: 0;
    border: none;
    border-radius: 0;
    padding: var(--nllm-space-lg);
    font-size: 0.8125rem;    /* 13px */
    line-height: 1.65;
    overflow-x: auto;
}

/* Syntax token colors — minimal, readable on dark surface */
.nllm-code-block .token-keyword  { color: var(--nllm-violet-pale); }
.nllm-code-block .token-string   { color: var(--nllm-cyan-pale); }
.nllm-code-block .token-comment  { color: var(--nllm-surface-edge); font-style: italic; }
.nllm-code-block .token-function { color: var(--pc-bolt-amber-pale); }
.nllm-code-block .token-number   { color: var(--nllm-cyan-bright); }

/* ─────────────────────────────────────────────────────────────────────────────
   CHANGELOG ENTRY
   Version log item with badge, date, and change list.
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-changelog {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-2xl);
    max-width: 780px;
    margin-inline: auto;
}

.nllm-changelog-entry {
    position: relative;
    padding-inline-start: var(--nllm-space-xl);
    border-inline-start: 2px solid var(--nllm-surface-soft);
}

.nllm-changelog-entry::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--nllm-violet);
    border: 2px solid var(--nllm-surface-deep);
}

.nllm-changelog-entry__meta {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-md);
    margin-block-end: var(--nllm-space-md);
}

.nllm-changelog-entry__version {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nllm-text);
}

.nllm-changelog-entry__date {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
}

.nllm-changelog-entry__changes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
}

.nllm-changelog-entry__changes li {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-muted);
    padding-inline-start: var(--nllm-space-md);
    position: relative;
}

.nllm-changelog-entry__changes li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--nllm-violet-soft);
    font-size: 0.75rem;
}

/* Change type badges */
.nllm-changelog-entry__changes li[data-type="feat"]   { color: var(--nllm-text-muted); }
.nllm-changelog-entry__changes li[data-type="fix"]    { color: var(--nllm-text-muted); }
.nllm-changelog-entry__changes li[data-type="feat"]::before { color: var(--pc-status-flowing); }
.nllm-changelog-entry__changes li[data-type="fix"]::before  { color: var(--pc-bolt-amber); }

/* ─────────────────────────────────────────────────────────────────────────────
   TESTIMONIAL CARD
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-testimonial {
    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);
}

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

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

.nllm-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-md);
    border-top: 1px solid var(--nllm-surface-soft);
    padding-block-start: var(--nllm-space-md);
}

.nllm-testimonial__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--nllm-radius-full);
    background-color: var(--nllm-surface-soft);
    flex-shrink: 0;
    object-fit: cover;
}

.nllm-testimonial__name {
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    color: var(--nllm-text);
}

.nllm-testimonial__handle {
    font-size: 0.75rem;
    color: var(--nllm-text-subtle);
}

/* Testimonial grid */
.nllm-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nllm-space-lg);
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: var(--nllm-space-xl);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MARKETING PAGE KIT — BASE
   Section + page scoping wrappers. All per-section styling lives in
   Domain/Marketing/site/assets/css/section/*.css (synced to media/).
   Per-page overrides live in Domain/Marketing/site/assets/css/page/*.css.
   ───────────────────────────────────────────────────────────────────────────── */

.pc-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--nllm-space-2xl) var(--nllm-space-lg);
}

.pc-section__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.pc-section + .pc-section {
	border-top: 1px solid color-mix(in srgb, var(--nllm-text-subtle) 12%, transparent);
}

/* Page-scope wrappers. Per-page overrides go in
 * Domain/Marketing/site/assets/css/page/{name}.css */
.pc-page--home,
.pc-page--product,
.pc-page--pricing,
.pc-page--faq,
.pc-page--changelog,
.pc-page--about {
	min-height: 100vh;
}

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

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

/* ─────────────────────────────────────────────────────────────────────
 * EMPHASIS UTILITIES (.nllm-emph) — [claude:opus-4.7-1m][hurc:v0.7.0]
 * ─────────────────────────────────────────────────────────────────────
 * PURPOSE
 *   Reusable inline emphasis classes for marketing copy. When a single
 *   word or short phrase inside a longer sentence carries the value
 *   proposition (numbers, product names, action verbs), wrap it in one
 *   of these classes to lift it visually without breaking line flow.
 *
 * USAGE
 *   <h1>Native <span class="nllm-emph--bolt">multi-account rotation</span>
 *       — the <span class="nllm-emph">#1 GitHub request</span></h1>
 *
 * VARIANTS
 *   .nllm-emph             — Violet→cyan brand gradient (default)
 *   .nllm-emph--bolt       — Amber→magenta→violet "hot" gradient (energy)
 *   .nllm-emph--solid      — Solid violet (works on light surfaces)
 *   .nllm-emph--accent     — Cyan accent (paired callouts)
 *   .nllm-emph--underline  — Highlighter underline (text color unchanged)
 *
 * RULES
 *   - One emphasis per sentence; emphasis everywhere = emphasis nowhere
 *   - Apply to NOUNS that carry meaning, not to connectives
 *   - The --underline variant pairs well with non-emphasized headings
 *   - All variants inherit font-weight 700 (except --underline)
 *
 * ACCESSIBILITY
 *   Gradient-clip text falls back to a brand color via `color:`. The
 *   text is never invisible; no aria-hidden, no decorative-only usage.
 */

.nllm-emph,
.nllm-emph--bolt,
.nllm-emph--solid,
.nllm-emph--accent {
	font-weight: 700;
}

.nllm-emph {
	color: var(--nllm-violet-soft);                  /* fallback */
	background-image: var(--nllm-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nllm-emph--bolt {
	color: var(--pc-bolt-amber);                     /* fallback */
	background-image: var(--pc-bolt-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nllm-emph--solid {
	color: var(--nllm-violet);
}

.nllm-emph--accent {
	color: var(--nllm-cyan-bright);
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Highlighter underline — true underline, sits BELOW
 * the text baseline so it never crosses descenders (which made the prior
 * version read as a strikethrough). Thin 0.18em bar pinned to ~1.02 of
 * line-box so it lives in the descender gap, not over the glyphs. */
.nllm-emph--underline {
	background-image: linear-gradient(
		120deg,
		color-mix(in srgb, var(--pc-bolt-amber) 90%, transparent) 0%,
		color-mix(in srgb, var(--pc-bolt-magenta) 80%, transparent) 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 0.18em;
	background-position: 0 102%;
	padding: 0 0.05em 0.1em;
	font-weight: inherit;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Solid callout — bold amber color treatment with NO
 * overlay bar. Use this in body copy (testimonials, paragraphs) where the
 * underline variant overlaps glyph descenders. Far more readable on long
 * inline phrases against dark surfaces. */
.nllm-emph--callout {
	color: var(--pc-bolt-amber-pale);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-shadow: 0 0 1px color-mix(in srgb, var(--pc-bolt-amber) 35%, transparent);
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Hero soft-highlight — pairs with .nllm-emph--bolt
 * gradient text. Adds a faint amber underglow so highlighted phrases
 * stand out against the deep-violet hero gradient without competing with
 * the headline. The combination of gradient text + soft glow produces a
 * scannable focal point in the subhead's longest sentence. */
.nllm-emph--hero {
	color: var(--pc-bolt-amber);
	font-weight: 700;
	background-image: linear-gradient(
		180deg,
		transparent 0%,
		transparent 65%,
		color-mix(in srgb, var(--pc-bolt-amber) 22%, transparent) 65%,
		color-mix(in srgb, var(--pc-bolt-amber) 22%, transparent) 100%
	);
	background-repeat: no-repeat;
	padding: 0 0.1em;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Value soft-highlight — the GREEN counterpart of .nllm-emph--hero.
 * Marks the money / throughput phrases a skimmer must catch in long
 * body copy ("$100/mo saved", "up to 5× faster"). Same shape as the
 * amber hero highlight — bright text plus a faint underglow — but in
 * the savings-green family, so the eye separates "what you save or
 * gain" (green) from "product energy" (amber) without reading the
 * sentence. Used in text-heavy sections (founder note, cost-of-manual,
 * pain-point answers) and as the `win` value-badge in the comparison
 * table. Contrast: #86efac text on the deep surface ≈ 9:1 (WCAG AA). */
.nllm-emph--save {
	color: var(--pc-save-text);
	font-weight: 700;
	background-image: linear-gradient(
		180deg,
		transparent 0%,
		transparent 65%,
		color-mix(in srgb, var(--pc-save-strong) 24%, transparent) 65%,
		color-mix(in srgb, var(--pc-save-strong) 24%, transparent) 100%
	);
	background-repeat: no-repeat;
	padding: 0 0.1em;
}

/* Stacked-side-by-side spacing in pricing/feature copy. */
.nllm-emph + .nllm-emph,
.nllm-emph--bolt + .nllm-emph--bolt {
	margin-left: 0.1em;
}

/* ─────────────────────────────────────────────────────────────────────
 * MONEY / VALUE EMPHASIS (.nllm-save / .nllm-gain / .nllm-solution) — [claude:opus-4.7-1m][hurc:v0.7.0]
 * ─────────────────────────────────────────────────────────────────────
 * PURPOSE
 *   A GREEN semantic layer on top of the amber "energy" emphasis. The
 *   site sells two different ideas and a skimmer must separate them in
 *   under two seconds without reading the sentence:
 *
 *       GREEN  → what you SAVE (money) or GAIN (capacity, time, sessions)
 *       AMBER  → the product's raw power/energy  (.nllm-emph--bolt)
 *       MUTED  → the worse alternative you're being compared against
 *
 *   Green is the universal "good outcome / money" hue, so a "Save
 *   $1,200/yr" pill or a "✓ Auto-resumes" solution line registers as a
 *   benefit at a glance even before the eye parses the words.
 *
 * THE THREE SHAPES
 *   .nllm-save      — inline PILL for a hard number you keep ($ saved,
 *                     % cheaper). Filled deep-green chip, bright text.
 *   .nllm-gain      — inline CHIP for added capacity ("+4 parallel
 *                     sessions", "+220k tokens"). Auto-prefixes a "+".
 *   .nllm-solution  — BLOCK callout (always visible, never collapsed)
 *                     for "here is what Power Claude fixes, and how
 *                     fast". Green left-border + ✓ marker. Used in FAQ
 *                     and pain-point answers so the fix out-shouts the
 *                     problem.
 *
 * STAT / COLUMN MODIFIERS
 *   .pc-stat--save  — turns a big stat number green (savings/gains).
 *   .pc-stat--cost  — turns a big stat number amber (the cost of the
 *                     status quo / the alternative).
 *   .pc-comparison-table__col--muted — greys a comparison column so the
 *                     baseline ("1 Max account") visually recedes behind
 *                     the Power Claude column.
 *
 * RULES
 *   - Green means money/capacity ONLY. Never use it for product energy.
 *   - One .nllm-save per claim — a row of green pills reads as noise.
 *   - .nllm-solution is ALWAYS rendered open; it is the payoff, never
 *     hidden behind an accordion toggle.
 *
 * ACCESSIBILITY
 *   The ✓ / + markers are decorative (added via ::before) and paired
 *   with real words, so screen readers still read a complete sentence.
 *   Contrast: #86efac on #052e16 ≈ 9:1, well above WCAG AA.
 */

/* Inline savings pill — a number you KEEP. */
.nllm-save {
	display: inline-block;
	padding: 0.05em 0.5em;
	border-radius: var(--nllm-radius-full);
	background-color: var(--pc-save-bg);
	color: var(--pc-save-text);
	border: 1px solid color-mix(in srgb, var(--pc-save-border) 55%, transparent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;          /* digits align across pills */
	white-space: nowrap;                          /* never break "$1,200/yr" */
	line-height: 1.4;
}

/* Inline capacity chip — something you GAIN. Auto-prefixes "+". */
.nllm-gain {
	color: var(--pc-gain-text);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nllm-gain::before {
	content: "+";                                 /* decorative; word follows */
	margin-right: 0.05em;
}

/* Block solution callout — the fix, stated loud and always open. The
 * green left rail + ✓ make it read as "solved" before the copy is read.
 * Pairs under a pain-point/FAQ question to answer WHAT + HOW FAST. */
.nllm-solution {
	display: block;
	margin: var(--nllm-space-sm) 0 0;
	padding: var(--nllm-space-sm) var(--nllm-space-md);
	border-left: 3px solid var(--pc-save-strong);
	border-radius: 0 var(--nllm-radius-sm) var(--nllm-radius-sm) 0;
	background-color: color-mix(in srgb, var(--pc-save-strong) 9%, transparent);
	color: var(--nllm-text, #e2e8f0);
}

/* The "✓ Power Claude fixes this" lead-in inside a solution callout. */
.nllm-solution__lead {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	font-weight: 700;
	color: var(--pc-save-text);
}

.nllm-solution__lead::before {
	content: "✓";                                 /* decorative solved-marker */
	color: var(--pc-save-strong);
	font-weight: 700;
}

/* Optional "how fast" tag appended to a solution lead ("in <30s"). */
.nllm-solution__speed {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.02em 0.45em;
	border-radius: var(--nllm-radius-full);
	background-color: color-mix(in srgb, var(--pc-save-strong) 16%, transparent);
	color: var(--pc-save-text);
	font-size: 0.85em;
	font-weight: 700;
	white-space: nowrap;
}

/* Big-stat color modifiers — applied to an existing .pc-stat number. */
.pc-stat--save { color: var(--pc-save-text); }
.pc-stat--cost { color: var(--pc-loss-text); }

/* Comparison column de-emphasis — greys the baseline/alternative column
 * so the Power Claude column wins the eye. Applied to cells in the
 * comparison table (see comparison-table.php value rendering). */
.pc-comparison-table__col--muted {
	color: var(--nllm-text-subtle);
	opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────
 * CREDIBILITY BADGE STRIP (.nllm-credbar) — [claude:opus-4.7-1m][hurc:v0.7.0]
 * ─────────────────────────────────────────────────────────────────────
 * PURPOSE
 *   Compact horizontal strip of "Available on / Trusted by" logos. Sits
 *   just under the hero or above the pricing section to bank trust
 *   before the visitor reaches an ask.
 *
 * STRUCTURE
 *   <section class="nllm-credbar">
 *     <p class="nllm-credbar__label">Available on</p>
 *     <ul class="nllm-credbar__list">
 *       <li class="nllm-credbar__item">
 *         <a class="nllm-credbar__link" href="..." rel="noopener">
 *           <img class="nllm-credbar__logo" src="..." alt="VS Code Marketplace">
 *         </a>
 *       </li>
 *     </ul>
 *   </section>
 *
 * RULES
 *   - Max 6 logos. More dilutes; fewer reads sparse.
 *   - All logos in a single visual row at desktop, wrapping at mobile.
 *   - Monochrome treatment by default — full color on hover ("earn the
 *     click" effect).
 *   - NO surrounding box; the section breathes within a 1280px max.
 */

.nllm-credbar {
	padding: var(--nllm-space-xl) var(--nllm-space-md);
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
	border-top: 1px solid color-mix(in srgb, var(--nllm-text-subtle) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--nllm-text-subtle) 12%, transparent);
}

.nllm-credbar__label {
	margin: 0 0 var(--nllm-space-lg);
	font-size: var(--nllm-text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nllm-text-subtle);
}

.nllm-credbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(var(--nllm-space-xl), 5vw, 4rem);
}

.nllm-credbar__item {
	display: inline-flex;
}

.nllm-credbar__link {
	display: inline-flex;
	align-items: center;
	gap: var(--nllm-space-sm);
	color: var(--nllm-text-muted);
	text-decoration: none;
	opacity: 0.75;
	filter: grayscale(0.4);
	transition:
		opacity var(--nllm-transition-base),
		filter var(--nllm-transition-base),
		color var(--nllm-transition-base);
}

.nllm-credbar__link:hover,
.nllm-credbar__link:focus-visible {
	opacity: 1;
	filter: grayscale(0);
	color: var(--nllm-text);
}

.nllm-credbar__logo {
	height: 28px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

@media (max-width: 600px) {
	.nllm-credbar__list {
		gap: var(--nllm-space-lg);
	}
	.nllm-credbar__logo {
		height: 22px;
	}
}

/* ============================================================================
 * mod_hurc_account brand bridge — MOVED.
 * ----------------------------------------------------------------------------
 * The `--hurc-account-*` consuming-site token mapping now lives in the brand
 * SSoT, media/com_neurallicense/brand/tokens.css (loaded first, before this
 * file). Keeping a single copy there avoids the two-bridges drift risk.
 * ========================================================================== */