/* =============================================================================
 * channels.css — reusable multi-channel download/install block
 * [claude:sonnet-4-6][client:2.1.170][hurc:v0.10.1]
 *
 * PURPOSE
 *   Styles the `neural.download.channels` layout (templates/nllm/html/layouts/
 *   neural/download/channels.php): a responsive GRID of download-location CARDS,
 *   one per place you can get Power Claude —
 *     • VS Code Marketplace, Open VSX, npm, GitHub Releases — third-party MIRRORS,
 *       each wearing a green "New" diagonal corner ribbon.
 *     • Direct .vsix from our own site — the original source, not a mirror, so it
 *       carries no ribbon.
 *   Consumed from multiple host pages (the public downloads page + the hikashop
 *   post-purchase pages). This file isolates the neural-channels__* namespace from
 *   the nl-downloads__* namespace on the public downloads page.
 *
 * ARCHITECTURE
 *   Token-clean. Every gated property (color, padding/margin/gap, font-size/weight/
 *   line-height, box-shadow, transition, border-radius) uses a var(--nllm-*) brand
 *   token or a component-local var(--ch-*) wrapping an off-scale literal. Non-gated
 *   properties (display, flex, grid, position, overflow, text-align, white-space,
 *   transform, @media) are used directly. Style/token references:
 *   media/com_neurallicense/css/downloads.css (buttons + the corner-ribbon geometry)
 *   and templates/nllm/css/activation.css (--nllm-space-sm usage).
 *
 * DEPENDENCIES
 *   Registered via the Web Asset Manager in templates/nllm/index.php for every
 *   commerce page. Requires the brand token sheet (media/com_neurallicense/brand/
 *   tokens.css); literal fallbacks on every var() keep the block self-sufficient if
 *   tokens.css is absent.
 *
 * MOBILE-FIRST
 *   Base styles target 320px single-column. The 541px breakpoint widens the card
 *   grid into auto-fit columns, matching the downloads page's responsive gate.
 * ============================================================================= */

.neural-channels {
    /* ── Component token declarations ──────────────────────────────────────
     * Every off-scale or component-specific literal is defined here so every
     * usage below is a token reference, never a bare literal. Mirrors the
     * --dl-* pattern in downloads.css. */

    /* Brand alias tokens — map nllm-* into short local handles. */
    --ch-surface:      var(--nllm-surface, #1e293b);
    --ch-surface-deep: var(--nllm-surface-deep, #0f172a);
    --ch-edge:         var(--nllm-surface-soft, #334155);
    --ch-text:         var(--nllm-text, #f8fafc);
    --ch-muted:        var(--nllm-text-muted, #cbd5e1);
    --ch-subtle:       var(--nllm-text-subtle, #94a3b8);
    --ch-violet:       var(--nllm-violet, #7c3aed);
    --ch-violet-soft:  var(--nllm-violet-soft, #a855f7);
    /* Brand "save"/green family — the freshness "New" ribbon on the mirror cards.
     * Mirrors --dl-save / --dl-save-strong in downloads.css so the green is
     * identical across the downloads page and this shared block. */
    --ch-save:         var(--pc-save-text, #86efac);
    --ch-save-strong:  var(--pc-save-strong, #22c55e);
    --ch-on-accent:    #fff;
    --ch-radius-sm:    var(--nllm-radius-sm, 6px);
    --ch-radius-md:    var(--nllm-radius-md, 10px);
    --ch-radius-pill:  999px;

    /* Off-scale spacing literals — same technique as downloads.css so no raw
     * literal ever appears in a property declaration below. */
    --ch-space-015:    0.15rem;
    --ch-space-04:     0.4rem;
    --ch-space-055:    0.55rem;
    --ch-space-065:    0.65rem;
    --ch-space-075:    0.75rem;
    --ch-space-11:     1.1rem;
    /* Grid gutter between download-location cards — roomier than the inner spacing
     * so cards read as distinct tiles, never touching. */
    --ch-gap:          var(--nllm-space-md, 1rem);
    /* Corner-ribbon overhang — the negative right offset that pushes the rotated
     * "New" banner off the card edge into a true corner ribbon, plus its padding.
     * Mirrors --dl-space-4 in downloads.css so the ribbon geometry is shared. */
    --ch-space-4:      4rem;

    /* Logo plate size — the square that holds each location's brand glyph. */
    --ch-logo:         2rem;
    /* Minimum tap target for the editor-picker tabs — ≥44px for mobile a11y. */
    --ch-tap:          2.75rem;

    /* Type scale. */
    --ch-fs-btn:       0.95rem;
    --ch-fs-name:      1rem;
    --ch-fs-tag:       0.72rem;
    --ch-fs-note:      0.85rem;
    --ch-fs-mono:      0.80rem;

    /* Shadow — mirrors downloads.css --dl-shadow-btn for visual consistency. */
    --ch-shadow-btn:   0 4px 16px rgba(124, 58, 237, 0.3);
    /* Green ribbon fill + glow for the "New" corner banner — mirrors downloads.css
     * --dl-gradient-save / --dl-shadow-save so the ribbon is visually identical to
     * the extension-card "Just launched" ribbon on the same page. */
    --ch-gradient-save: var(--pc-gradient-save, linear-gradient(135deg, #16a34a, #22c55e));
    --ch-shadow-save:   0 4px 18px rgba(22, 163, 74, 0.35);

    /* ── Hero-picker frame ─────────────────────────────────────────────────
     * The editor picker is now the PRIMARY install surface, so it wears a
     * gradient-outlined, softly-glowing "hero" frame that lifts it above the
     * quieter download-location grid below. These tokens hold the off-scale
     * literals that treatment needs (every one still resolves through a
     * --nllm-* brand token with a literal fallback). */
    --ch-cyan:         var(--nllm-cyan, #06b6d4);
    --ch-radius-lg:    var(--nllm-radius-lg, 14px);
    --ch-space-15:     1.5rem;
    /* Roomier gap BELOW the hero so it never crowds the divider + grid (the
     * old --ch-gap left the picker and the npm/GitHub cards visually touching). */
    --ch-hero-gap:     var(--nllm-space-xl, 2rem);
    /* Violet→cyan gradient painted into the 1px border ring (border-box layer). */
    --ch-hero-frame:   linear-gradient(135deg, var(--ch-violet-soft), var(--ch-cyan));
    /* Soft violet outer glow that makes the hero read as elevated/"cutting-edge". */
    --ch-hero-glow:    0 10px 40px rgba(124, 58, 237, 0.28);

    /* Root is a plain block: it stacks the (optional) editor picker above the card
     * grid. The grid itself owns the multi-column layout. */
    display: block;
    color: var(--ch-text);
    font-family: var(--nllm-font-sans, 'Inter', 'Helvetica Neue', system-ui, sans-serif);
}

/* ── Card grid ───────────────────────────────────────────────────────────────
 * Mobile-first single column; auto-fit columns from 541px so the cards tile two
 * or three across when space allows. */
.neural-channels__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ch-gap);
}

@media (min-width: 541px) {
    .neural-channels__grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* ── Download-location card ──────────────────────────────────────────────────
 * A self-contained card per install location: brand head, description, optional
 * mono command, and an action row pinned to the bottom (so cards in a row share a
 * baseline). position:relative + overflow:hidden make the card the clipping
 * context for the rotated "New" corner ribbon (same technique as
 * .nl-downloads__channel--extension in downloads.css). */
.neural-channels__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--ch-space-055);
    padding: var(--ch-space-11);
    border-radius: var(--ch-radius-md);
    background: var(--ch-surface);
    border: 1px solid var(--ch-edge);
    transition: transform var(--nllm-transition-fast, 120ms ease),
                border-color var(--nllm-transition-fast, 120ms ease);
}

.neural-channels__card:hover {
    transform: translateY(-2px);
    border-color: var(--ch-violet-soft);
}

/* Featured (Direct) — keeps a quiet violet accent border to mark the recommended
 * route, but its glow is dropped: now that the picker above is the glowing hero, a
 * second glowing box would re-introduce the competing-boxes clutter. */
.neural-channels__card--featured {
    border-color: var(--ch-violet-soft);
}

/* ── Card head (logo + name/sub) ─────────────────────────────────────────────
 * The "Easiest" tag (when present) is rendered INSIDE the title block, inline
 * after the name — never at the card's top-right, where it would collide with the
 * corner ribbon. */
.neural-channels__card-head {
    display: flex;
    align-items: center;
    gap: var(--ch-space-065);
}

.neural-channels__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ch-logo);
    height: var(--ch-logo);
    color: var(--ch-violet-soft);
}

/* npm and Open VSX render as wordmark badges, not square glyphs — let them keep
 * their natural aspect ratio instead of being squeezed into the square logo plate. */
.neural-channels__logo--wordmark {
    width: auto;
}

.neural-channels__card-title {
    flex: 1 1 auto;
    min-width: 0;
}

.neural-channels__card-name {
    display: inline;
    margin: 0;
    color: var(--ch-text);
    font-size: var(--ch-fs-name);
    font-weight: var(--nllm-font-weight-bold, 700);
    line-height: var(--nllm-line-height-tight, 1.3);
}

.neural-channels__card-sub {
    margin: var(--ch-space-015) 0 0;
    color: var(--ch-subtle);
    font-size: var(--ch-fs-tag);
    line-height: var(--nllm-line-height-normal, 1.5);
}

/* ── Description ─────────────────────────────────────────────────────────────
 * flex:1 pushes the action row to the bottom so a grid of cards shares a baseline. */
.neural-channels__card-desc {
    flex: 1 1 auto;
    margin: 0;
    color: var(--ch-muted);
    font-size: var(--ch-fs-note);
    line-height: var(--nllm-line-height-normal, 1.5);
}

.neural-channels__card-desc strong {
    color: var(--ch-text);
    font-weight: var(--nllm-font-weight-semibold, 600);
}

/* ── Mono command / filename chip ────────────────────────────────────────────
 * The npm install one-liner or the .vsix filename — a copy-friendly mono chip on
 * the deep surface. Wraps (no scroll) so a long value stays fully visible. */
.neural-channels__cmd {
    display: block;
    padding: var(--ch-space-04) var(--ch-space-055);
    border-radius: var(--ch-radius-sm);
    background: var(--ch-surface-deep);
    border: 1px solid var(--ch-edge);
    color: var(--ch-subtle);
    font-family: var(--nllm-font-mono, 'JetBrains Mono', monospace);
    font-size: var(--ch-fs-mono);
    line-height: var(--nllm-line-height-normal, 1.5);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Action row ──────────────────────────────────────────────────────────────
 * Pinned to the bottom of the card; buttons stretch to fill so the CTA reads as a
 * full-width target on mobile. */
.neural-channels__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-space-04);
    margin-top: auto;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
 * Base button — mirrors .nl-downloads__btn (same token surface + hover) so the
 * host pages feel identical. */
.neural-channels__btn {
    display: inline-block;
    padding: var(--ch-space-055) var(--ch-space-11);
    border-radius: var(--ch-radius-sm);
    background: var(--ch-surface-deep);
    border: 1px solid var(--ch-edge);
    color: var(--ch-text);
    font-size: var(--ch-fs-btn);
    font-weight: var(--nllm-font-weight-semibold, 600);
    line-height: var(--nllm-line-height-normal, 1.5);
    text-decoration: none;
    transition: transform var(--nllm-transition-fast, 120ms ease),
                border-color var(--nllm-transition-fast, 120ms ease);
    white-space: nowrap;
}

.neural-channels__btn:hover {
    transform: translateY(-1px);
    border-color: var(--ch-violet-soft);
    text-decoration: none;
}

/* Primary CTA — violet gradient fill; mirrors .nl-downloads__btn--primary. */
.neural-channels__btn--primary {
    background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    border-color: transparent;
    color: var(--ch-on-accent);
    box-shadow: var(--ch-shadow-btn);
}

.neural-channels__btn--primary:hover {
    border-color: transparent;
}

/* Ghost CTA — transparent secondary (e.g. the Marketplace "Open in VS Code"). */
.neural-channels__btn--ghost {
    background: transparent;
}

/* Coming-soon marker — a non-interactive, button-shaped chip for a MIRROR whose
 * store listing has not gone live yet (so there is no real destination to link
 * to). Muted + dashed + default cursor so it reads as informational, never
 * clickable — replaces the Install button that would otherwise silently download
 * the local .vsix. Reverts to the real button automatically once the listing
 * publishes (the layout only renders this when the card's store URL is empty). */
.neural-channels__btn--soon {
    background: var(--ch-surface-deep);
    border-style: dashed;
    color: var(--ch-subtle);
    cursor: default;
}

.neural-channels__btn--soon:hover {
    transform: none;
    border-color: var(--ch-edge);
}

/* ── Tag ("Easiest") ─────────────────────────────────────────────────────────
 * Small inline pill after the featured card's name. Violet-tinted, uppercase —
 * matches the method-tag pattern in activation.css. */
.neural-channels__tag {
    display: inline-block;
    margin-left: var(--ch-space-04);
    padding: 0 var(--nllm-space-sm, 0.5rem);
    border-radius: var(--ch-radius-pill);
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.40);
    color: var(--ch-violet-soft);
    font-size: var(--ch-fs-tag);
    font-weight: var(--nllm-font-weight-semibold, 600);
    line-height: var(--nllm-line-height-normal, 1.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── New (corner ribbon) ─────────────────────────────────────────────────────
 * Green diagonal TOP-RIGHT corner banner on each third-party MIRROR card — the
 * same rotated-banner treatment as .nl-downloads__ribbon on the extension card, so
 * every "New" marker on the page is visually identical. The card clips the
 * overhang (overflow:hidden) so the banner sits flush in the corner. A brand-new
 * store should read as freshly-launched, not unpopular, beside the large tally. */
.neural-channels__new {
    position: absolute;
    top: var(--ch-space-075);
    right: calc(0rem - var(--ch-space-4));
    min-width: calc(var(--ch-space-4) * 2.4);
    padding: var(--ch-space-015) var(--ch-space-4);
    transform: rotate(45deg);
    background: var(--ch-gradient-save);
    color: var(--ch-on-accent);
    font-size: var(--ch-fs-tag);
    font-weight: var(--nllm-font-weight-extrabold, 800);
    line-height: var(--nllm-line-height-normal, 1.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    box-shadow: var(--ch-shadow-save);
}

/* ── Trial CTA (Direct card) ─────────────────────────────────────────────────
 * The premium-trial push on the preferred Direct download card. Green "save"
 * gradient so it reads as the positive upsell, distinct from the violet primary. */
.neural-channels__btn--trial {
    background: var(--ch-gradient-save);
    border-color: transparent;
    color: var(--ch-on-accent);
    box-shadow: var(--ch-shadow-save);
}

.neural-channels__btn--trial:hover {
    border-color: transparent;
}

/* ── Card-action + grid-scoped button rules ──────────────────────────────────
 * Grouped here, after every base .neural-channels__btn* variant, so specificity
 * ascends in source order (base 0,1,0 → card-scoped 0,2,0 → grid-scoped 0,3,0) —
 * satisfying stylelint no-descending-specificity. */

/* In a card's action row, buttons stretch to share the row width. */
.neural-channels__card-actions .neural-channels__btn {
    flex: 1 1 auto;
    text-align: center;
    white-space: normal;
}

/* Quieted grid CTA — inside the download-location grid the primary button drops
 * the violet gradient for a flat surface fill. The gradient is RESERVED for the
 * hero picker's "Install", so the grid's "Install / Download" buttons stop looking
 * like a second copy of it. (The green Premium-Trial CTA is a different colour, so
 * it is intentionally left loud.) */
.neural-channels__grid .neural-channels__card-actions .neural-channels__btn--primary {
    background: var(--ch-surface-deep);
    border-color: var(--ch-edge);
    color: var(--ch-text);
    box-shadow: none;
}

.neural-channels__grid .neural-channels__card-actions .neural-channels__btn--primary:hover {
    border-color: var(--ch-violet-soft);
}

/* ── Interactive "Pick your editor" picker ───────────────────────────────────
 * Editor-FIRST install UX rendered ABOVE the card grid (the neural.download.
 * channels/picker.php sub-layout). A row of editor TABS + one PANEL per editor.
 *
 * PROGRESSIVE-ENHANCEMENT CONTRACT (the load-bearing part):
 *   • NO JS (default) → .neural-picker__tabs is display:none and EVERY panel
 *                       renders (stacked, each with its editor-name heading), so
 *                       every install path stays reachable by scrolling.
 *   • JS upgrade      → channels-picker.js adds .neural-picker--js to the section:
 *                       the tab row appears, only the .is-active panel shows, and
 *                       each panel's name heading hides (the active tab names it).
 *                       VS Code (recommended) is active on first paint.
 * Mobile-first: tabs wrap across rows at 320px; the active panel's CTA / command
 * is full width. Inherits the --ch-* tokens from the enclosing .neural-channels. */
.neural-picker {
    position: relative;
    /* Roomier bottom gap so the hero clears the divider + grid below it. */
    margin-bottom: var(--ch-hero-gap);
    padding: var(--ch-space-15) var(--ch-space-11);
    border-radius: var(--ch-radius-lg);
    /* Gradient-outlined HERO frame: a 1px transparent border filled by the
     * violet→cyan gradient (border-box layer) behind a solid-surface padding-box
     * layer, plus a soft violet glow. This is what visually PROMOTES the picker
     * to the primary install surface, distinct from the flat-bordered location
     * cards below — so the two blocks no longer read as duplicate boxes. */
    border: 1px solid transparent;
    background:
        linear-gradient(var(--ch-surface), var(--ch-surface)) padding-box,
        var(--ch-hero-frame) border-box;
    box-shadow: var(--ch-hero-glow);
}

/* Title + lede — the novice-facing prompt that frames the whole block. */
.neural-picker__title {
    display: flex;
    align-items: center;
    gap: var(--ch-space-055);
    margin: 0;
    color: var(--ch-text);
    font-size: var(--ch-fs-name);
    font-weight: var(--nllm-font-weight-bold, 700);
    line-height: var(--nllm-line-height-tight, 1.3);
}

/* Slim violet→cyan accent bar before the hero title — a small "cutting-edge"
 * cue that ties the title to the frame gradient, added with zero extra markup. */
.neural-picker__title::before {
    content: "";
    flex: 0 0 auto;
    width: var(--ch-space-04);
    height: var(--ch-fs-name);
    border-radius: var(--ch-radius-pill);
    background: var(--ch-hero-frame);
}

.neural-picker__lede {
    margin: var(--ch-space-015) 0 var(--ch-space-075);
    color: var(--ch-muted);
    font-size: var(--ch-fs-note);
    line-height: var(--nllm-line-height-normal, 1.5);
}

/* ── Tab row ──────────────────────────────────────────────────────────────────
 * Hidden until JS upgrades the picker (with no JS the panels show in full, so a
 * tab would be a dead control). .neural-picker--js turns it into a wrapping
 * pill row. */
.neural-picker__tabs {
    display: none;
}

.neural-picker--js .neural-picker__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ch-space-04);
    margin-bottom: var(--ch-space-075);
}

/* A single editor tab — a pill button. min-height holds the tap target ≥44px on
 * mobile; the active tab takes the violet gradient fill. */
.neural-picker__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ch-space-04);
    min-height: var(--ch-tap);
    padding: var(--ch-space-04) var(--ch-space-11);
    border-radius: var(--ch-radius-pill);
    background: var(--ch-surface-deep);
    border: 1px solid var(--ch-edge);
    color: var(--ch-text);
    font-family: inherit;
    font-size: var(--ch-fs-btn);
    font-weight: var(--nllm-font-weight-semibold, 600);
    line-height: var(--nllm-line-height-normal, 1.5);
    cursor: pointer;
    transition: border-color var(--nllm-transition-fast, 120ms ease),
                background var(--nllm-transition-fast, 120ms ease);
}

.neural-picker__tab:hover {
    border-color: var(--ch-violet-soft);
}

/* Visible keyboard-focus ring for tab-key users navigating the tablist. */
.neural-picker__tab:focus-visible {
    outline: 2px solid var(--ch-violet-soft);
    outline-offset: 2px;
}

.neural-picker__tab.is-active {
    background: var(--nllm-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    border-color: transparent;
    color: var(--ch-on-accent);
    box-shadow: var(--ch-shadow-btn);
}

/* "Recommended" micro-label inside the VS Code tab. Deliberately NOT a filled
 * pill — a filled chip inside the (also pill-shaped) tab read as a button nested
 * in a button. It is now plain uppercase accent text set off by a thin leading
 * divider, so it labels the tab without looking like a second control. */
.neural-picker__tab-rec {
    padding-left: var(--ch-space-04);
    border-left: 1px solid currentcolor;
    background: none;
    color: var(--ch-violet-soft);
    font-size: var(--ch-fs-tag);
    font-weight: var(--nllm-font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    white-space: nowrap;
}

.neural-picker__tab.is-active .neural-picker__tab-rec {
    background: none;
    color: var(--ch-on-accent);
    opacity: 0.9;
}

/* ── Panels ───────────────────────────────────────────────────────────────────
 * No-JS: every panel renders, separated by a top margin. JS: only .is-active
 * shows (and the inter-panel margin is reset since just one is visible). */
.neural-picker__panel + .neural-picker__panel {
    margin-top: var(--ch-space-075);
}

.neural-picker--js .neural-picker__panel {
    display: none;
    margin-top: 0;
}

.neural-picker--js .neural-picker__panel.is-active {
    display: block;
}

/* Per-panel editor name — the no-JS label. Hidden in JS mode (the active tab
 * already names the editor, so a heading would just repeat it). */
.neural-picker__panel-name {
    margin: 0 0 var(--ch-space-055);
    color: var(--ch-text);
    font-size: var(--ch-fs-note);
    font-weight: var(--nllm-font-weight-bold, 700);
}

.neural-picker--js .neural-picker__panel-name {
    display: none;
}

/* The prominent action — a CTA button (one-click editors) or a mono command chip
 * (CLI editors). Full-width-feeling on mobile via the inline-block + chip width. */
/* The hero's single primary action. It KEEPS the violet gradient (via
 * .neural-channels__btn--primary) and is sized up a touch, so it is the ONE loud
 * "Install" button in this section — the grid CTAs below are quieted to a surface
 * fill so the two no longer look like the same button rendered twice. */
.neural-picker__cta {
    /* THE single action for the chosen editor. Deliberately a DIFFERENT shape from
     * the pill tabs above — a full-width, squared action BAR — so it reads as
     * "click to install", not another editor chip to pick. The wider top gap
     * detaches it from the tab row so the two rows stop looking like one control set. */
    display: block;
    width: 100%;
    margin-top: var(--ch-space-075);
    padding: var(--ch-space-075) var(--ch-space-15);
    border-radius: var(--ch-radius-lg);
    font-size: var(--ch-fs-name);
    font-weight: var(--nllm-font-weight-bold, 700);
    text-align: center;
}

.neural-picker__cmd {
    margin-top: var(--ch-space-04);
}

.neural-picker__note {
    margin: var(--ch-space-055) 0 0;
    color: var(--ch-muted);
    font-size: var(--ch-fs-note);
    line-height: var(--nllm-line-height-normal, 1.5);
}

/* "Advanced — step by step" disclosure inside a panel — the power-user detail,
 * collapsed so the one prominent action stays the focus for novices. */
.neural-picker__steps {
    margin-top: var(--ch-space-055);
}

.neural-picker__steps > summary {
    color: var(--ch-violet-soft);
    font-size: var(--ch-fs-tag);
    cursor: pointer;
}

.neural-picker__steps ol {
    margin: var(--ch-space-04) 0 0;
    padding-left: var(--ch-space-11);
    color: var(--ch-muted);
    font-size: var(--ch-fs-tag);
    line-height: var(--nllm-line-height-normal, 1.5);
}

/* ── "Or grab it from any download location" divider ──────────────────────────
 * A LABELED divider between the hero picker and the download-location grid: the
 * lead-in text centered between two fading hairlines. Replaces the old plain
 * left-aligned line so the two blocks read as distinct sections rather than one
 * crowded stack — the picker's --ch-hero-gap above plus this margin below give it
 * real breathing room. */
.neural-channels__or {
    display: flex;
    align-items: center;
    gap: var(--ch-space-075);
    margin: 0 0 var(--ch-space-11);
    color: var(--ch-subtle);
    font-size: var(--ch-fs-note);
    font-weight: var(--nllm-font-weight-semibold, 600);
}

.neural-channels__or::before,
.neural-channels__or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
}

.neural-channels__or::before {
    background: linear-gradient(90deg, transparent, var(--ch-edge));
}

.neural-channels__or::after {
    background: linear-gradient(90deg, var(--ch-edge), transparent);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .neural-channels__card,
    .neural-channels__btn,
    .neural-picker__tab {
        transition: none;
    }

    .neural-channels__card:hover,
    .neural-channels__btn:hover {
        transform: none;
    }
}