/* ============================================================
   LM-Kit design system, single source of truth.
   Loaded by Pages/Shared/_Layout.cshtml AND injected into every
   imported HTML page. There is no other site-wide stylesheet.
   Per-page Elementor inline <style> blocks still ship with the
   imported pages but only scope to that page's body content.
   ============================================================ */

/* ---- 0. Self-hosted fonts --------------------------------------- */
/*
   Self-hosted to avoid the render-blocking Google Fonts third-party
   request, improve LCP, and remove a privacy-sensitive cross-origin
   fetch. Latin subset only (the website is English).
   Files in /wwwroot/fonts/ are immutable-cached for 1 year via
   Program.cs StaticFileOptions, so rename them to invalidate.
*/
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-tight-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-tight-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/inter-tight-latin-800.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin-600.woff2') format('woff2');
}

/* ---- 1. Tokens -------------------------------------------------- */
:root {
    /* Type stack. Inter for UI, Inter Tight for display, JetBrains Mono for code. */
    --lmk-font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --lmk-font-display: 'Inter Tight', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --lmk-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

    /* Color: warm ink + paper, single purple accent. */
    --lmk-purple: #6d28d9;
    --lmk-purple-2: #7c3aed;
    --lmk-purple-soft: rgba(109, 40, 217, 0.08);
    --lmk-purple-line: rgba(109, 40, 217, 0.18);

    /* Brand accent trio. The three colors are borrowed from the Calico
       IIM partner mark and used sparingly across the site for tiny
       decorative touches (tridot, tribullet, card stripe). They are
       NEVER used for body text, buttons, or large surfaces. See the
       "Brand accents" section below for the primitives that consume
       these tokens. */
    --lmk-accent-violet:  #8B5CF6;
    --lmk-accent-cyan:    #06B6D4;
    --lmk-accent-magenta: #EC4899;

    --lmk-ink: #14101e;
    --lmk-ink-2: rgba(20, 16, 30, 0.74);
    --lmk-ink-3: rgba(20, 16, 30, 0.55);
    --lmk-ink-4: rgba(20, 16, 30, 0.32);

    --lmk-paper: #fbfaf7;
    --lmk-paper-card: #ffffff;
    --lmk-paper-soft: #f4f1ec;

    --lmk-line: rgba(20, 16, 30, 0.10);
    --lmk-line-strong: rgba(20, 16, 30, 0.18);

    /* On dark surfaces. */
    --lmk-on-dark-1: rgba(255, 255, 255, 0.92);
    --lmk-on-dark-2: rgba(255, 255, 255, 0.72);
    --lmk-on-dark-3: rgba(255, 255, 255, 0.50);
    --lmk-line-dark: rgba(255, 255, 255, 0.08);
    --lmk-line-dark-strong: rgba(255, 255, 255, 0.18);

    /* Radii, restrained, never pill. */
    --lmk-radius-xs: 2px;
    --lmk-radius-sm: 4px;
    --lmk-radius-md: 6px;
    --lmk-radius-lg: 12px;
    --lmk-radius-xl: 18px;

    /* Shadows. */
    --lmk-shadow-1: 0 1px 0 rgba(20, 16, 30, 0.04);
    --lmk-shadow-2: 0 8px 24px -16px rgba(20, 16, 30, 0.18);
    --lmk-shadow-3: 0 24px 48px -24px rgba(20, 16, 30, 0.28);

    /* Container. */
    --lmk-container: 1200px;
    --lmk-container-narrow: 920px;

    /* Header height, used by sticky positioning math. */
    --lmk-header-h: 60px;
}

/* ---- 2. Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; }
body { margin: 0; min-height: 100%; }
img, picture, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
button, input, select, textarea { color: inherit; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--lmk-line); margin: 0; }

/* ---- 3. Document base ------------------------------------------- */
html, body {
    background: var(--lmk-paper);
    color: var(--lmk-ink);
    font-family: var(--lmk-font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Suppress horizontal scrollbar caused by absolute-positioned mega
       menus extending past the viewport on tablet widths. `clip` is
       preferred over `hidden` because it disallows programmatic scroll
       (better behaviour for sticky descendants like our header). */
    overflow-x: clip;
}
::selection { background: var(--lmk-purple); color: #fff; }

a { text-decoration: none; color: var(--lmk-ink); }
a:hover { color: var(--lmk-purple); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lmk-font-display);
    color: var(--lmk-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-weight: 700;
}

p, li { color: var(--lmk-ink-2); line-height: 1.6; }

code, pre, kbd, samp {
    font-family: var(--lmk-font-mono);
    font-size: 0.92em;
}

/* Focus: visible but unobtrusive. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--lmk-purple);
    outline-offset: 2px;
    border-radius: var(--lmk-radius-sm);
}

/* ============================================================
   No-pill rule. We do NOT use rounded badge/chip/tag pills
   anywhere. Maximum allowed corner radius across these element
   classes is 6 px. This kills the "candy pill" look that used to
   appear on price-tier badges, feature chips, button groups, etc.

   The .lmk-imported-content scope catches WordPress / Elementor
   markup that uses arbitrary pill border-radius via inline-style or
   page-scoped CSS, which our class-pattern selectors can't predict.
   Inside imported content, ANY element with a high border-radius is
   capped to 6 px regardless of class.
   ============================================================ */
/* Specificity stacked: html body.lmk-imported-content [class*="..."]
   = (0,2,2). High enough to beat per-page Elementor scoped rules
   such as .contact-section .contact-badge (0,2,0). */
html body.lmk-imported-content [class*="badge"],
html body.lmk-imported-content [class*="chip"],
html body.lmk-imported-content [class*="-tag"]:not([class*="meta-tag"]),
html body.lmk-imported-content [class*="pill"],
html body.lmk-imported-content .tag,
html body.lmk-imported-content .btn,
html body.lmk-imported-content button,
html body.lmk-imported-content [role="button"],
html body.lmk-imported-content [class*="-badge"]:not([class*="-badge-dot"]),
html body .lmk-imported-content [class*="badge"],
.lmk-imported-content [class*="badge"],
.lmk-imported-content [class*="chip"],
.lmk-imported-content [class*="-tag"]:not([class*="meta-tag"]),
.lmk-imported-content [class*="pill"],
.lmk-imported-content .tag,
.lmk-imported-content .btn,
.lmk-imported-content button,
.lmk-imported-content [role="button"] {
    border-radius: var(--lmk-radius-md) !important;
}

/* Heavy-handed override: on any page NOT served by the Razor _Layout
   (i.e. static HTML pages we still serve directly), cap every
   element to 6 px. The Razor _Layout sets <html class="lmk-doc">,
   so html:not(.lmk-doc) hits the static / imported pages only.
   SVG circles, our intentional traffic-light dots (.lmk-codecard
   .dot), and lmk-brand-mark are exempt. */
html:not(.lmk-doc) *:not(.dot):not(.lmk-brand-mark):not(circle):not(.lmk-no-cap),
.lmk-imported-content *:not(.dot):not(.lmk-brand-mark):not(circle):not(.lmk-no-cap) {
    border-radius: var(--lmk-radius-md) !important;
}
/* But: if the element is essentially a circle (square aspect, large
   radius), it's an icon avatar / dot. Leave those alone via :where()
   below. We can't easily detect that in CSS, so we whitelist by
   common aspect ratios via attribute / size selectors. */

/* ---- Unified chip / tag design ---------------------------------
   A "chip" is a small label that names a thing: a feature, a status,
   a tier, a category. Examples in the screenshots: "Multi-turn",
   "Memory", "Tool Calling", "RAG", "FREE FOR EVERYONE".

   Our chips are FLAT, not pills:
     * Square-ish corners (4 px)
     * Subtle background tint (paper-soft or purple-soft)
     * Single-weight monospace-or-sans text, not bold-uppercase
     * No icon dot, no gradient
   ============================================================ */
.lmk-chip,
.lmk-tag,
.elementor-icon-list-item:has(.elementor-icon-list-text):not([class*="hero"]) > .elementor-icon-list-text {
    /* base chip styling, applied to imported chip-like nodes too */
}
.lmk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem;
    font-family: var(--lmk-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--lmk-ink);
    background: rgba(20, 16, 30, 0.06);
    border: 1px solid rgba(20, 16, 30, 0.10);
    border-radius: var(--lmk-radius-sm);
    text-transform: none;
}
.lmk-chip--purple {
    color: var(--lmk-purple);
    background: var(--lmk-purple-soft);
    border-color: var(--lmk-purple-line);
}
.lmk-chip--green {
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.22);
}
.lmk-chip--ink {
    color: #fff;
    background: var(--lmk-ink);
    border-color: var(--lmk-ink);
}
.lmk-chip--ghost {
    color: var(--lmk-ink-2);
    background: transparent;
    border-color: var(--lmk-line-strong);
}
/* When a chip is also a link (e.g. "Related concepts" deep-linking into
   the docs glossary), give it an unmistakable clickable affordance:
   pointer cursor, no underline, purple wash on hover, and a proper
   focus ring for keyboard navigation. Without these rules, an <a>
   styled as a chip looks visually identical to a decorative <span>
   chip, which is what produced the "nothing is clickable here" issue. */
a.lmk-chip {
    cursor: pointer;
    text-decoration: none;
    transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
a.lmk-chip:hover,
a.lmk-chip:focus-visible {
    color: var(--lmk-purple);
    background: var(--lmk-purple-soft);
    border-color: var(--lmk-purple-line);
    transform: translateY(-1px);
}
a.lmk-chip:focus-visible {
    outline: 2px solid var(--lmk-purple);
    outline-offset: 2px;
}

/* ---- 4. Layout primitives --------------------------------------- */
.lmk-container {
    width: 100%;
    max-width: var(--lmk-container);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.25rem);
}
.lmk-container.narrow { max-width: var(--lmk-container-narrow); }

.lmk-stack > * + * { margin-top: var(--stack, 1rem); }

.lmk-eyebrow {
    display: inline-block;
    font-family: var(--lmk-font-display);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--lmk-purple);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lmk-section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}
.lmk-section + .lmk-section { border-top: 1px solid var(--lmk-line); }
.lmk-section.dark { background: var(--lmk-ink); color: var(--lmk-on-dark-1); }
.lmk-section.dark h1, .lmk-section.dark h2, .lmk-section.dark h3 { color: #fff; }
.lmk-section.dark p, .lmk-section.dark li { color: var(--lmk-on-dark-2); }
.lmk-section.soft { background: var(--lmk-paper-soft); }

/* ---- 5. Buttons ------------------------------------------------- */
.lmk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--lmk-font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    letter-spacing: 0;
    border: 1px solid transparent;
    border-radius: var(--lmk-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
    white-space: nowrap;
}
.lmk-btn:hover { transform: translateY(-1px); }
/* Default size for inline button icons. Sized to match the label's
   cap-height for visual balance. Variant overrides (e.g. .lmk-btn--cta)
   can adjust below. */
.lmk-btn .lmk-btn-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    display: inline-block;
}
.lmk-btn--primary {
    background: var(--lmk-ink);
    color: #fff;
    border-color: var(--lmk-ink);
}
.lmk-btn--primary:hover {
    background: var(--lmk-purple);
    border-color: var(--lmk-purple);
    color: #fff;
}
.lmk-btn--ghost {
    background: transparent;
    color: var(--lmk-ink);
    border-color: var(--lmk-line-strong);
}
.lmk-btn--ghost:hover {
    background: rgba(20, 16, 30, 0.04);
    border-color: var(--lmk-ink);
    color: var(--lmk-ink);
}
/* On dark surfaces. */
.lmk-section.dark .lmk-btn--primary,
.lmk-btn--invert {
    background: #fff; color: var(--lmk-ink); border-color: #fff;
}
.lmk-section.dark .lmk-btn--primary:hover,
.lmk-btn--invert:hover {
    background: var(--lmk-purple); color: #fff; border-color: var(--lmk-purple);
}
.lmk-section.dark .lmk-btn--ghost {
    background: transparent; color: #fff;
    border-color: var(--lmk-line-dark-strong);
}
.lmk-section.dark .lmk-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ---- 6. Header & nav -------------------------------------------- */
.lmk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(20, 16, 30, 0.94);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    color: var(--lmk-on-dark-1);
    border-bottom: 1px solid var(--lmk-line-dark);
    height: var(--lmk-header-h);
}
.lmk-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.lmk-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-family: var(--lmk-font-display);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.005em;
    /* "LM-Kit" must never break across lines when the header narrows.
       Forces the brand row to stay on one line; the hamburger
       breakpoint catches narrower viewports. */
    white-space: nowrap;
    flex-shrink: 0;
}
.lmk-brand:hover { color: #fff; }
/* Brand mark, accepts either an <img> (real logo) or a styled <span>
   placeholder. The actual lm-kit-logo.png is a 512×512 circular badge,
   so we cap dimensions explicitly so it never bleeds out. */
.lmk-brand-mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: block;
    object-fit: contain;
}
img.lmk-brand-mark {
    background: transparent;
    border-radius: 0;
}
/* Footer variant slightly larger for visual balance against the tagline. */
.lmk-footer-brand-mark .lmk-brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}
.lmk-nav {
    display: flex;
    align-items: center;
    /* Tightened spacing so the six top-level labels plus brand plus CTA
       fit comfortably in the 1240-1400px range. Below 1240 we drop to
       the hamburger drawer instead of trying to squeeze. */
    margin-left: 1.25rem;
    gap: 0.05rem;
    /* Defensive: never let the nav force the header to grow taller
       than var(--lmk-header-h). If the row truly cannot fit, the
       breakpoint below catches it. */
    flex-wrap: nowrap;
    min-width: 0;
}
.lmk-nav-item {
    position: relative;
}
.lmk-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.7rem;
    color: var(--lmk-on-dark-2);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: var(--lmk-radius-sm);
    transition: color 140ms ease, background-color 140ms ease;
    /* Top-level nav labels must stay on one line. "Why Local AI"
       wrapping to three rows was the most visible symptom of the
       breakpoint being too low. The hamburger now catches anything
       narrower; here we just guarantee no within-link wrapping. */
    white-space: nowrap;
}
/* Hover state. We trigger on EITHER native :hover OR a JS-applied
   data-hovered attribute. The JS path is what makes the highlight
   persist on flat menu items (Pricing, Company) that have no
   dropdown panel; without it, transitioning from a dropdown item
   to a flat item could briefly drop the hover styling. */
.lmk-nav-item:hover .lmk-nav-link,
.lmk-nav-item[data-hovered] .lmk-nav-link,
.lmk-nav-item:focus-within .lmk-nav-link,
.lmk-nav-link:hover,
.lmk-nav-link:focus-visible,
.lmk-nav-link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}
.lmk-nav-link svg { width: 10px; height: 10px; opacity: 0.7; transition: transform 140ms ease; }
.lmk-nav-item:hover .lmk-nav-link svg { transform: rotate(180deg); }

/* Mega-menu panel. Wider than a simple list, supports columns and
   item descriptions. Pure CSS show/hide via :hover / :focus-within.

   IMPORTANT: there is no `margin-top` here. A real margin would create
   a dead gap between the trigger and the panel, the moment the cursor
   crossed it, :hover would drop and the panel would close before the
   user reached it. Instead we use a `::before` pseudo-bridge to keep
   the hoverable area continuous, and `padding-top` on the panel to
   produce the visual offset. */
.lmk-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 1.1rem 1.15rem;
    background: var(--lmk-ink);
    border: 1px solid var(--lmk-line-dark-strong);
    border-radius: var(--lmk-radius-lg);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 1001;
}
/* Hover-bridge: an invisible rectangle that extends UPWARD from the
   panel by 12px, covering the small gap between the trigger bottom
   and the panel top. Without it, the cursor briefly exits both the
   trigger and the panel during the trigger-to-panel transit, the
   close timer fires, and the panel disappears mid-hover. The bridge
   inherits the panel's pointer-events: when the panel is closed
   (pointer-events: none) the bridge is inert; when the panel opens
   (pointer-events: auto) the bridge catches the cursor and the
   panel's mouseenter handler keeps it open. */
.lmk-nav-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    /* No background or border; this is a pure hover target. */
}
/* JS-driven open state. The previous pure-CSS :hover approach was
   fragile around the trigger-to-panel gap and caused flicker, plus
   it kept the panel open while the mouse was anywhere inside the
   nav-item DOM tree (including unintended areas below the trigger).
   Now the controller adds [data-open] when the menu should show,
   with proper open-delay (80 ms) and close-delay (180 ms) timers. */
.lmk-nav-item[data-open] > .lmk-nav-panel,
.lmk-nav-item:focus-within > .lmk-nav-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Single-column simple variant (for short lists like Company). */
.lmk-nav-panel--simple {
    min-width: 220px;
    padding: 0.4rem;
}
.lmk-nav-panel--simple a {
    display: block;
    padding: 0.5rem 0.7rem;
    color: var(--lmk-on-dark-2);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    border-radius: var(--lmk-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 120ms ease, color 120ms ease;
}
.lmk-nav-panel--simple a:hover,
.lmk-nav-panel--simple a:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

/* Mega variant: columns of richer items. */
.lmk-nav-panel--mega {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(220px, 1fr));
    gap: 0.5rem 1.65rem;
    min-width: calc(220px * var(--cols, 2) + 32px);
}
/* Wide-panel viewport clamping is handled by lmk-nav.js
   (clampPanelToViewport). The previous pure-CSS right-anchor rule
   shifted the panel off the LEFT edge whenever the trigger sat near
   the left of the navbar, which was the root cause of the catastrophic
   resize behavior. JS now measures both trigger and panel against the
   viewport and sets an explicit inline `left` value to keep the panel
   onscreen with a 16 px margin, regardless of trigger position or
   viewport width. */
.lmk-nav-panel--mega .lmk-nav-col {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.lmk-nav-panel-h {
    margin: 0.55rem 0.7rem 0.4rem;
    font-family: var(--lmk-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--lmk-on-dark-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.lmk-nav-item-rich {
    /*
       Subtle left bullet so a vertical stack of rich nav items reads
       as a scannable list, not a wall of text. Pseudo dot in the
       brand-purple tone at low opacity; brightens on hover when the
       row lights up. Position absolute so the dot doesn't affect the
       column flow if multiple items wrap.
    */
    position: relative;
    display: block;
    padding: 0.55rem 0.7rem 0.55rem 1.3rem;
    border-radius: var(--lmk-radius-sm);
    color: var(--lmk-on-dark-1);
    transition: background 120ms ease;
}
.lmk-nav-item-rich::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    /* Anchor the bullet to the visual center of the FIRST line of the
       title rather than the geometric center of the wrapper. This keeps
       the bullet aligned with the text even when the link contains a
       multi-line description, an injected external-link icon, or wraps
       across lines on narrow viewports. The offset = padding-top (0.55rem)
       + half the title line-height (~0.585rem). */
    top: 1.1rem;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lmk-purple);
    opacity: 0.35;
    transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
}
.lmk-nav-item-rich:hover,
.lmk-nav-item-rich:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.lmk-nav-item-rich:hover::before,
.lmk-nav-item-rich:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.25);
    background: var(--lmk-purple);
}
.lmk-nav-item-rich-title {
    display: block;
    font-family: var(--lmk-font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}
.lmk-nav-item-rich-desc {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--lmk-on-dark-3);
}
.lmk-nav-item-rich:hover .lmk-nav-item-rich-desc { color: var(--lmk-on-dark-2); }

/* Footer strip inside a mega panel, for "View all", "Get the free
   license" style links. */
.lmk-nav-panel-foot {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--lmk-line-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lmk-nav-panel-foot-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lmk-on-dark-2);
    padding: 0.4rem 0.6rem;
    border-radius: var(--lmk-radius-sm);
    transition: color 120ms ease, background 120ms ease;
}
.lmk-nav-panel-foot-link:hover,
.lmk-nav-panel-foot-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
/* The original "Get free license" CTA inside each mega-panel
   footer duplicated the header's top-right button. Hiding it
   leaves only "View all solutions →" on the left, which is the
   real value-add. The class is kept for backward-compat and so
   that callers can still mark a CTA in markup; it's just visually
   suppressed in the menu chrome. */
.lmk-nav-panel-foot-cta {
    display: none;
}

/* ============================================================
   Master/detail mega panel
   ============================================================
   Used by the Solutions menu when the catalog grows beyond what a
   single-pane mega panel can show without becoming a wall of links.
   Structure:
     .lmk-megapanel
       .lmk-megarail        (left rail: list of categories)
         .lmk-megarail-item (one per category, button or anchor)
         .lmk-megarail-foot ("View all" link)
       .lmk-megapanes       (right side: one .lmk-megapane visible)
         .lmk-megapane[data-pane=...]
           .lmk-megapane-grid         (inner items, 1 or 2 cols)
           .lmk-megapane-featured     (promoted page card, optional)
   Behavior is in /js/lmk-nav.js (initMegapanel). */
.lmk-megapanel {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 0;
    min-width: 920px;
    max-width: 1100px;
    padding: 1rem 1.15rem 1rem 1rem;
}
/* Narrow variant for menus with less content (Documentation, Why Local AI).
   Smaller rail, smaller min-width, single-column panes don't waste space. */
.lmk-megapanel--narrow {
    grid-template-columns: 188px minmax(0, 1fr);
    min-width: 720px;
    max-width: 880px;
}
/* Horizontal positioning of .lmk-megapanel is managed by
   lmk-nav.js (clampPanelToViewport). See the comment on the matching
   rule for .lmk-nav-panel--mega above. */
.lmk-megarail {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.1rem 0.6rem 0.1rem 0.5rem;
    border-right: 1px solid var(--lmk-line-dark);
    position: relative;
}
.lmk-megarail-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 0.85rem;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--lmk-radius-sm);
    color: var(--lmk-on-dark-2);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: background 80ms ease, color 80ms ease;
}
.lmk-megarail-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.lmk-megarail-item:focus-visible { outline: 2px solid var(--lmk-purple); outline-offset: -2px; }
.lmk-megarail-item[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 600;
}
/* Subtle left-edge accent on the active item: 2px purple bar. No
   background flood, no chevron. The bar sits inside the rail padding. */
.lmk-megarail-item[aria-selected="true"]::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 1.1rem;
    background: var(--lmk-purple);
    border-radius: 1px;
}
.lmk-megarail-item-name { display: block; color: inherit; }

.lmk-megarail-foot {
    margin-top: 0.6rem;
    padding: 0.55rem 0.7rem 0.2rem;
    border-top: 1px solid var(--lmk-line-dark);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--lmk-on-dark-3);
    text-decoration: none;
    border-radius: 0;
    transition: color 100ms ease;
}
.lmk-megarail-foot:hover { color: #fff; }

.lmk-megapanes {
    position: relative;
    padding: 0.1rem 0.25rem 0.1rem 1.85rem;
    min-height: 300px;
}
.lmk-megapane[hidden] { display: none !important; }
.lmk-megapane {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.4rem;
}
/* Pane H is shown only on mobile (the rail label provides it on desktop). */
.lmk-megapane-h { display: none; }

/* Pillar root entry: the dedicated page that represents the whole pillar.
   Sits at the top of every pane, visually isolated from the sub-feature
   groups below it. Reads as "this is THE page; everything else is a
   capability inside it." Below this block, the .lmk-megapane-grid lists
   only the sub-features, never the pillar root itself. */
.lmk-megapane-root {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    margin: 0 0 0.45rem;
    border: 1px solid var(--lmk-line-dark);
    border-radius: var(--lmk-radius-md);
    background: rgba(124, 58, 237, 0.06);
    color: inherit;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}
.lmk-megapane-root:hover {
    background: rgba(124, 58, 237, 0.14);
    border-color: var(--lmk-purple-line);
}
.lmk-megapane-root-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.lmk-megapane-root-eyebrow {
    font-family: var(--lmk-font-display);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--lmk-purple);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.lmk-megapane-root-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--lmk-on-dark-1);
    line-height: 1.25;
}
.lmk-megapane-root-desc {
    font-size: 0.78rem;
    color: var(--lmk-on-dark-3);
    line-height: 1.4;
}
.lmk-megapane-root-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--lmk-on-dark-3);
    flex-shrink: 0;
    transition: color 120ms ease, transform 120ms ease;
}
.lmk-megapane-root:hover .lmk-megapane-root-title { color: #fff; }
.lmk-megapane-root:hover .lmk-megapane-root-arrow { color: var(--lmk-purple); transform: translateX(2px); }
/* Separator between the isolated pillar root and the sub-feature grid. */
.lmk-megapane-root + .lmk-megapane-grid {
    padding-top: 0.55rem;
    border-top: 1px solid var(--lmk-line-dark);
    margin-top: 0.25rem;
}

.lmk-megapane-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    column-gap: 2rem;
    /* Comfortable row spacing so vertically-stacked group lists read as
       discrete sections rather than a wall of links. */
    row-gap: 0.35rem;
    align-content: start;
}
.lmk-megapane-grid--single {
    grid-template-columns: minmax(220px, 360px);
    column-gap: 0;
}
.lmk-megapane-grid .lmk-nav-group { padding: 0; }
/* Group header: architectural label with weight bump, slightly wider
   tracking, and a near-invisible hairline that visually separates the
   label from the items beneath. Reads as a category divider, not a
   variant of the body text. */
.lmk-megapane-grid .lmk-nav-group-h {
    margin: 0.1rem 0.7rem 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--lmk-font-display);
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--lmk-on-dark-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.2;
}
.lmk-megapane-grid .lmk-nav-item-rich {
    /* Critical: lay the row out as a flex container so the injected
       external-link icon (lmk-nav.js prepends an SVG to docs.* links)
       sits INLINE with the title on the same baseline. Without this,
       the row falls back to the base `display: block` rule, the icon
       lands on its own line, the title wraps below it, and the bullet
       ends up vertically aligned with the icon instead of the text.
       Flex + align-items:center keeps every glyph on one row, which
       in turn keeps the bullet (positioned at 1.3rem from the top of
       the row) aligned with the title across all menu variants. */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Larger vertical padding gives a ~44px target size, comfortably
       above the WCAG 24px minimum, and creates breathing room between
       stacked rows so the list reads as discrete clickable items. */
    padding: 0.65rem 0.7rem 0.65rem 1.4rem;
}
/* Small inter-row gap so the hover wash doesn't visually merge two
   sibling rows together. */
.lmk-megapane-grid .lmk-nav-item-rich + .lmk-nav-item-rich {
    margin-top: 2px;
}
.lmk-megapane-grid .lmk-nav-item-rich-title {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--lmk-on-dark-1);
    /* Stop the title from being forced to a new line by a wide
       flex-basis. Min-width:0 lets it shrink if the column is
       narrow; the flex parent ellipsizes via white-space if needed. */
    min-width: 0;
}
.lmk-megapane-grid .lmk-nav-item-rich:hover .lmk-nav-item-rich-title,
.lmk-megapane-grid .lmk-nav-item-rich:focus-visible .lmk-nav-item-rich-title { color: #fff; }
/* Bullet alignment override for the megapane-grid context: with the
   new 0.65rem top padding plus ~0.6rem half-line-height, the bullet
   needs to sit at ~1.25rem to land on the title's vertical center. */
.lmk-megapane-grid .lmk-nav-item-rich::before {
    top: 1.25rem;
}
/* Suppress the redundant ::before bullet on any rich-item row whose
   anchor has been decorated with the external-link arrow (the
   `lmk-has-ext-ico` class is applied by lmk-nav.js when it injects
   the SVG arrow). One marker per row reads clearly; two markers on
   the same row reads as visual noise. The external arrow already
   carries the "this is a link, and it leaves the site" affordance
   so it wins. Internal rows keep the bullet. */
.lmk-nav-item-rich.lmk-has-ext-ico::before,
.lmk-nav-item-rich:has(.lmk-has-ext-ico)::before {
    display: none;
}

/* Featured: NO card chrome. Just a thin top divider, an eyebrow, a title,
   a description, and a quiet arrow that animates on hover. */
.lmk-megapane-featured {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1.5rem;
    margin-top: 0.85rem;
    padding: 0.95rem 0.85rem 0.55rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--lmk-line-dark);
    border-radius: var(--lmk-radius-md);
    color: inherit;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}
/* Clear hover affordance: the entire featured card is clickable, so
   it must visibly respond to hover/focus. Soft purple wash + lift of
   the title and arrow tells the user this is a single link target,
   not decorative chrome. */
.lmk-megapane-featured:hover,
.lmk-megapane-featured:focus-visible {
    background: rgba(124, 58, 237, 0.08);
    outline: none;
}
.lmk-megapane-featured:focus-visible {
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
}
.lmk-megapane-featured-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.lmk-megapane-featured-tag {
    font-family: var(--lmk-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lmk-purple);
    background: none;
    padding: 0;
    border-radius: 0;
    align-self: flex-start;
}
.lmk-megapane-featured-title {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--lmk-on-dark-1);
    line-height: 1.3;
    transition: color 120ms ease;
}
.lmk-megapane-featured-desc {
    font-size: 0.8rem;
    color: var(--lmk-on-dark-3);
    line-height: 1.45;
    max-width: 50ch;
}
.lmk-megapane-featured-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--lmk-on-dark-3);
    flex-shrink: 0;
    transition: color 120ms ease, transform 120ms ease;
}
.lmk-megapane-featured:hover .lmk-megapane-featured-title { color: #fff; }
.lmk-megapane-featured:hover .lmk-megapane-featured-arrow {
    color: var(--lmk-purple);
    transform: translateX(2px);
}

/* Mobile: collapse to drill-in. The rail and the panes stack; only
   one pane is visible at a time and a back button returns to the
   rail list. JS toggles data-mobile-active on .lmk-megapanes. */
@media (max-width: 940px) {
    .lmk-megapanel {
        grid-template-columns: 1fr;
        min-width: 0;
        padding: 0.5rem;
    }
    .lmk-megarail {
        border-right: 0;
        border-bottom: 1px solid var(--lmk-line-dark);
        padding: 0.25rem 0;
    }
    .lmk-megapanes {
        padding: 0.5rem 0;
    }
    /* Mobile drill-in: by default the rail is visible and the panes are
       hidden. When a rail item is tapped, JS sets data-mobile-pane-open
       on the .lmk-megapanel container, which flips the visibility. The
       in-pane back button removes the attribute. */
    .lmk-megapanel:not([data-mobile-pane-open]) .lmk-megapanes { display: none; }
    .lmk-megapanel[data-mobile-pane-open] .lmk-megarail { display: none; }
    .lmk-megapane-back {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.7rem;
        margin-bottom: 0.6rem;
        background: transparent;
        border: 0;
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--lmk-on-dark-2);
        cursor: pointer;
        border-radius: var(--lmk-radius-sm);
    }
    .lmk-megapane-back:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
    .lmk-megapane-grid,
    .lmk-megapane-grid--single {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 941px) {
    .lmk-megapane-back { display: none; }
}
/* Mobile: re-show the pane header for orientation after drill-in. */
@media (max-width: 940px) {
    .lmk-megapane-h {
        display: block;
        margin: 0.4rem 0.7rem 0.6rem;
        font-family: var(--lmk-font-display);
        font-size: 0.66rem;
        font-weight: 700;
        color: var(--lmk-on-dark-3);
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }
}

/* ============================================================
   Mobile tap-target enlargements (≤700px)
   ============================================================
   Touch UI guidelines call for ~44×44px minimum tap targets.
   Desktop padding values produce ~32-42px which is borderline on
   handheld devices. These overrides bump padding on the small set
   of clickable elements that matter most on mobile, without
   affecting desktop ergonomics. */
@media (max-width: 700px) {
    .lmk-btn {
        padding: 0.85rem 1.2rem;
        font-size: 0.95rem;
    }
    .lmk-megarail-item {
        padding: 0.85rem 1rem 0.85rem 1.05rem;
        font-size: 0.95rem;
    }
    .lmk-megapane-grid .lmk-nav-item-rich {
        padding: 0.7rem 0.85rem;
    }
    .lmk-megapane-grid .lmk-nav-item-rich-title {
        font-size: 0.95rem;
    }
    .lmk-megapane-back {
        padding: 0.65rem 0.95rem !important;
        font-size: 0.95rem !important;
    }
    .lmk-megarail-foot {
        padding: 0.85rem 1rem !important;
        font-size: 0.9rem !important;
    }
    /* Linkrow primitive (used in many capability pages) */
    .lmk-linkrow {
        padding: 0.95rem 1rem;
    }
    /* Featured callout in megapane: more vertical room on mobile */
    .lmk-megapane-featured {
        padding: 1rem 1rem !important;
        gap: 0.85rem !important;
    }
    .lmk-megapane-featured-title {
        font-size: 1rem !important;
    }
}

/* ============================================================
   .lmk-statstrip: horizontal numeric strip
   ============================================================
   Used to surface a row of headline metrics on flagship pages.
   Each cell is one big number plus a one-line label. Wraps to
   2-up on tablet, 1-up on phone. Use sparingly: at most one strip
   per page, preferably below the hero.

   Markup:
     <div class="lmk-statstrip">
       <div class="lmk-statstrip-cell">
         <strong class="lmk-statstrip-num">94.5%</strong>
         <span class="lmk-statstrip-label">benchmark accuracy</span>
       </div>
       ...
     </div>
*/
.lmk-statstrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--lmk-line);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
    overflow: hidden;
    margin: 1.5rem 0;
}
.lmk-statstrip-cell {
    background: var(--lmk-paper-card);
    padding: 1.4rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}
.lmk-statstrip-num {
    font-family: var(--lmk-font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--lmk-ink-1);
}
.lmk-statstrip-num em {
    font-style: normal;
    color: var(--lmk-purple);
}
.lmk-statstrip-label {
    font-size: 0.82rem;
    color: var(--lmk-ink-3);
    line-height: 1.35;
}
@media (max-width: 760px) {
    .lmk-statstrip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .lmk-statstrip { grid-template-columns: 1fr; }
}

/* ============================================================
   .lmk-pipeline: inline pipeline / process diagram
   ============================================================
   Horizontal arrow-connected stages for "input -> stage -> stage
   -> output" visualisations. Use to show data flow through a
   multi-step pipeline (layout pipeline, document conversion,
   RAG ingestion, etc).

   Markup:
     <ol class="lmk-pipeline">
       <li class="lmk-pipeline-stage">
         <span class="lmk-pipeline-num">01</span>
         <span class="lmk-pipeline-name">Stage name</span>
         <span class="lmk-pipeline-desc">Short description</span>
       </li>
       ...
     </ol>
*/
.lmk-pipeline {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
    counter-reset: pipeline;
}
.lmk-pipeline-stage {
    position: relative;
    padding: 0.95rem 1rem 0.95rem 1.15rem;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
/* Connector arrow that appears between stages on wide layouts. */
.lmk-pipeline-stage:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--lmk-line);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    z-index: 1;
}
@media (max-width: 760px) {
    .lmk-pipeline-stage:not(:last-child)::after { display: none; }
}
.lmk-pipeline-num {
    font-family: var(--lmk-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lmk-purple);
    letter-spacing: 0.1em;
}
.lmk-pipeline-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lmk-ink-1);
}
.lmk-pipeline-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--lmk-ink-3);
}

/* ============================================================
   .lmk-split: alternating prose/code or prose/visual section
   ============================================================
   Two-column layout where one side carries explanatory prose and
   the other carries a code sample, diagram, or supporting block.
   Reverses naturally on mobile to single column. Pair with --reverse
   modifier when you want the code on the left.

   Markup:
     <section class="lmk-section">
       <div class="lmk-container">
         <div class="lmk-split">
           <div class="lmk-split-prose">...prose...</div>
           <div class="lmk-split-aside">...code or visual...</div>
         </div>
       </div>
     </section>
*/
.lmk-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2.5rem;
    align-items: start;
}
.lmk-split--reverse .lmk-split-prose { order: 2; }
.lmk-split--reverse .lmk-split-aside { order: 1; }
.lmk-split-prose h2, .lmk-split-prose h3 { letter-spacing: -0.025em; }
.lmk-split-prose p { line-height: 1.65; color: var(--lmk-ink-2); }
.lmk-split-prose p + p { margin-top: 0.85rem; }
.lmk-split-aside { display: flex; flex-direction: column; gap: 0.85rem; }
@media (max-width: 940px) {
    .lmk-split { grid-template-columns: 1fr; gap: 1.5rem; }
    .lmk-split--reverse .lmk-split-prose,
    .lmk-split--reverse .lmk-split-aside { order: unset; }
}

.lmk-header-cta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lmk-header-cta .lmk-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
}
.lmk-header-cta .lmk-btn--ghost {
    background: transparent;
    color: var(--lmk-on-dark-1);
    border-color: var(--lmk-line-dark-strong);
}
.lmk-header-cta .lmk-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}
.lmk-header-cta .lmk-btn--primary {
    background: #fff;
    color: var(--lmk-ink);
    border-color: #fff;
}
.lmk-header-cta .lmk-btn--primary:hover {
    background: var(--lmk-purple);
    color: #fff;
    border-color: var(--lmk-purple);
}

/* ---- 6b. Mobile drawer ------------------------------------------ */
/* Hamburger toggle base styles (hidden by default). The mobile-only
   visibility flip lives in the @media block below, placed AFTER the
   base so source-order resolves the cascade in our favour without
   needing !important. */
.lmk-mobile-toggle {
    display: none;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid var(--lmk-line-dark-strong);
    border-radius: var(--lmk-radius-md);
    background: transparent;
    color: var(--lmk-on-dark-1);
    cursor: pointer;
    padding: 0;
}
.lmk-mobile-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.lmk-mobile-toggle svg { width: 18px; height: 18px; display: block; }
.lmk-mobile-toggle .icon-close { display: none; }
[data-mobile-nav="open"] .lmk-mobile-toggle .icon-open { display: none; }
[data-mobile-nav="open"] .lmk-mobile-toggle .icon-close { display: block; }

/* Hamburger breakpoint. The site has six top-level nav labels plus a
   brand block plus a "Get free license" CTA. Even with the tightened
   spacing above, the minimum content width is roughly 970-1010px and
   things start visibly cramping below ~1240px. Cut over to the mobile
   drawer at that width rather than allowing a too-tight desktop row. */
@media (max-width: 1240px) {
    .lmk-nav { display: none; }
    .lmk-header-cta .lmk-btn--ghost { display: none; }
    .lmk-mobile-toggle { display: inline-flex; }
}

/* When mobile is open, render the desktop nav as a full-screen drawer
   under the sticky header. */
@media (max-width: 1240px) {
    .lmk-header-cta .lmk-btn--primary,
    .lmk-header-cta .lmk-btn--cta {
        /* Keep the primary CTA visible on mobile/tablet but compact so
           the brand + CTA + hamburger row never overflows. */
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }
    /* Compact the gradient CTA icon to match the smaller label. */
    .lmk-header-cta .lmk-btn--cta .lmk-btn-icon { width: 12px; height: 12px; }
    /* Disable backdrop-filter while the drawer is open. backdrop-filter
       creates a containing block for fixed-position descendants, which
       would otherwise anchor the drawer to the header instead of the
       viewport. The header's background already has 94 % opacity, so
       losing the blur is unnoticeable. */
    [data-mobile-nav="open"] .lmk-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-mobile-nav="open"] .lmk-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: fixed;
        top: var(--lmk-header-h);
        left: 0; right: 0;
        height: calc(100dvh - var(--lmk-header-h));
        margin: 0;
        padding: 1rem 1.25rem 2rem;
        background: var(--lmk-ink);
        border-top: 1px solid var(--lmk-line-dark);
        overflow-y: auto;
        z-index: 49;
    }
    [data-mobile-nav="open"] body { overflow: hidden; }
    [data-mobile-nav="open"] .lmk-nav-item {
        border-bottom: 1px solid var(--lmk-line-dark);
    }
    [data-mobile-nav="open"] .lmk-nav-item:last-child { border-bottom: 0; }
    [data-mobile-nav="open"] .lmk-nav-link {
        display: flex;
        justify-content: space-between;
        padding: 0.85rem 0.4rem;
        font-size: 0.95rem;
        color: #fff;
        background: transparent;
    }
    [data-mobile-nav="open"] .lmk-nav-panel {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0.85rem;
        min-width: 0;
        width: auto;
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    [data-mobile-nav="open"] .lmk-nav-panel--simple {
        padding-bottom: 0.85rem;
    }
    [data-mobile-nav="open"] .lmk-nav-panel-h {
        margin: 0.85rem 0.4rem 0.35rem;
        color: var(--lmk-on-dark-3);
    }
    [data-mobile-nav="open"] .lmk-nav-panel a {
        padding: 0.5rem 0.4rem;
        white-space: normal;
    }
    [data-mobile-nav="open"] .lmk-nav-item-rich {
        padding: 0.55rem 0.4rem;
    }
    [data-mobile-nav="open"] .lmk-nav-panel-foot {
        margin-top: 0.5rem;
        padding-top: 0.7rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    [data-mobile-nav="open"] .lmk-nav-panel-foot-cta {
        text-align: center;
    }
    [data-mobile-nav="open"] .lmk-nav-panel::before {
        display: none;   /* no hover-bridge needed on touch */
    }
}

/* ---- 7. Footer -------------------------------------------------- */
.lmk-footer {
    background: var(--lmk-ink);
    color: var(--lmk-on-dark-2);
    border-top: 1px solid var(--lmk-line-dark);
    padding-block: clamp(3rem, 5vw, 4.25rem) 1.5rem;
}
.lmk-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}
.lmk-footer-brand-mark {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: #fff;
    font-family: var(--lmk-font-display);
    font-weight: 700; font-size: 1.05rem;
}
.lmk-footer-tagline {
    margin: 1rem 0 1.4rem;
    color: var(--lmk-on-dark-2);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 38ch;
}
.lmk-footer-col-h {
    margin: 0 0 0.9rem;
    font-family: var(--lmk-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.lmk-footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.lmk-footer-col a {
    color: var(--lmk-on-dark-2);
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 140ms ease;
}
.lmk-footer-col a:hover { color: #fff; }
.lmk-footer-bottom {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--lmk-line-dark);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 1rem 1.5rem;
    color: var(--lmk-on-dark-3);
    font-size: 0.84rem;
}
.lmk-footer-bottom-legal {
    margin-left: auto;
    display: flex; flex-wrap: wrap; gap: 1.25rem;
}
.lmk-footer-bottom-legal a { color: var(--lmk-on-dark-3); }
.lmk-footer-bottom-legal a:hover { color: #fff; }
@media (max-width: 940px) {
    .lmk-footer-grid { grid-template-columns: 1fr 1fr; }
    .lmk-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    /* Keep two columns on mobile so the four link sections (Pillars,
       Foundation, Why Local AI, Developers) stay scannable. A single
       column produces a long ribbon of links that buries the bottom
       half. Brand spans both columns and sits at the top. */
    .lmk-footer-grid { grid-template-columns: 1fr 1fr; }
    .lmk-footer-bottom-legal { margin-left: 0; }
}

/* ---- 8. Card primitives ----------------------------------------- */
.lmk-card {
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    box-shadow: var(--lmk-shadow-1);
}
.lmk-card.is-link {
    display: block;
    color: inherit;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.lmk-card.is-link:hover {
    border-color: var(--lmk-line-strong);
    transform: translateY(-2px);
    box-shadow: var(--lmk-shadow-2);
}

/* ---- 8.5 Brand accents (Calico-trio inspired) ------------------- */
/*
   A small family of decorative primitives that play with the three
   accent colors (violet / cyan / magenta). They are intentionally
   tiny and used sparingly to give the page a touch of brand character
   without leaving the monochrome (ink + paper + purple) base.

   ALL primitives below are opt-in. Nothing here is applied
   automatically; pages must add the class.

       .lmk-tridot              Inline horizontal trio of dots
       .lmk-tridot--sm/--md     Size variants (default ~4px)
       .lmk-tribullet           <ul> with cycling colored bullets
       .lmk-tridivider          Section divider, tridot between hairlines
       .lmk-brandmark           Three-circle glyph (triangular, SVG-free)
       .lmk-card--branded       Card / feature modifier: 3-stop top stripe
       .lmk-eyebrow--branded    Eyebrow with leading brandmark glyph

   Color usage rules:
     - Never on body text, buttons, or large fills.
     - Width / height capped to a few pixels per dot.
     - Hover transitions allowed but must stay under 100ms motion.
*/

/* Inline horizontal trio. Markup:
     <span class="lmk-tridot"><span></span><span></span><span></span></span>
*/
.lmk-tridot {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: -0.05em;
    line-height: 1;
}
.lmk-tridot > span {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lmk-accent-violet);
}
.lmk-tridot > span:nth-child(2) { background: var(--lmk-accent-cyan); }
.lmk-tridot > span:nth-child(3) { background: var(--lmk-accent-magenta); }
.lmk-tridot--sm { gap: 0.2rem; }
.lmk-tridot--sm > span { width: 3px; height: 3px; }
.lmk-tridot--md { gap: 0.3rem; }
.lmk-tridot--md > span { width: 6px; height: 6px; }
.lmk-tridot--lg { gap: 0.35rem; }
.lmk-tridot--lg > span { width: 8px; height: 8px; }

/* List with cycling colored bullets. Markup:
     <ul class="lmk-tribullet"><li>...</li>...</ul>
   Bullet color rotates violet, cyan, magenta across the list. */
.lmk-tribullet {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}
.lmk-tribullet > li {
    display: flex;
    gap: 0.65rem;
    /* align-items: flex-start so an empty pseudo-element (no baseline)
       sits at the top of the flex line. The dot is then nudged down via
       margin-top below; this matches .lmk-tier-list's approach and stays
       correct when both classes are combined on the same <ul>. */
    align-items: flex-start;
    color: var(--lmk-ink-2);
    font-size: 0.92rem;
    line-height: 1.55;
}
/* Doubled-class selector raises specificity so the cycling colors and
   the alignment offset win even when .lmk-tribullet is combined with
   another bullet-styling class like .lmk-tier-list. We use margin-top
   (not transform) so the dot occupies real flex space and aligns with
   the visual x-height of the first text line. */
.lmk-tribullet.lmk-tribullet > li::before {
    content: '';
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lmk-accent-violet);
    margin-top: 0.55rem;
}
.lmk-tribullet.lmk-tribullet > li:nth-child(3n+2)::before { background: var(--lmk-accent-cyan); }
.lmk-tribullet.lmk-tribullet > li:nth-child(3n+3)::before { background: var(--lmk-accent-magenta); }

/* Section divider with a centered tridot between two hairlines.
   Markup:
     <div class="lmk-tridivider">
         <span class="lmk-tridot"><span></span><span></span><span></span></span>
     </div>
*/
.lmk-tridivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 2.25rem auto;
    max-width: 520px;
    width: 100%;
}
.lmk-tridivider::before,
.lmk-tridivider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lmk-line);
}

/* Three-circle brand glyph, triangular layout matching the partner
   mark (violet left, cyan top-right, magenta bottom-right). Pure CSS,
   no SVG. Default size 16x16.
   Markup:
     <span class="lmk-brandmark"><span></span></span>
   (The inner <span> is the cyan top-right dot; the other two come from
    ::before and ::after.)
*/
.lmk-brandmark {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: -0.22em;
}
.lmk-brandmark::before,
.lmk-brandmark::after,
.lmk-brandmark > span {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.lmk-brandmark::before { left: 0;  top: 4.5px;    background: var(--lmk-accent-violet); }
.lmk-brandmark > span  { left: 8px; top: 0;       background: var(--lmk-accent-cyan);
                         display: block; }
.lmk-brandmark::after  { left: 8px; bottom: 0;    background: var(--lmk-accent-magenta); }

/* Card / feature modifier. Adds a subtle three-stop top stripe at the
   top-left corner. Painted via background-image so it auto-clips to
   the card's border-radius without needing overflow:hidden (which
   would crop hover shadows).
   Pair with .lmk-card OR .lmk-feature. */
.lmk-card--branded,
.lmk-feature.lmk-card--branded {
    background-image: linear-gradient(
        to right,
        var(--lmk-accent-violet)  0%,
        var(--lmk-accent-violet)  33.333%,
        var(--lmk-accent-cyan)    33.333%,
        var(--lmk-accent-cyan)    66.666%,
        var(--lmk-accent-magenta) 66.666%,
        var(--lmk-accent-magenta) 100%
    );
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 72px 2px;
    /* Stack on top of the card's solid background. */
    background-color: var(--lmk-paper-card);
    transition: background-size 220ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.lmk-card--branded:hover,
.lmk-card--branded.is-link:hover,
a.lmk-card--branded:hover,
.lmk-feature.lmk-card--branded:hover {
    background-size: 104px 2px;
}

/* Compound override for .featured + .lmk-card--branded. The
   .lmk-feature.featured rule defined later in this stylesheet uses
   the `background:` shorthand to paint a diagonal off-white gradient.
   That shorthand resets background-image and clobbers the trio
   stripe defined above. To preserve BOTH layers, we restate the
   stripe AND the diagonal gradient as a single multi-image stack.
   Higher specificity (.lmk-feature.featured.lmk-card--branded = 3
   classes) makes this rule win against .lmk-feature.featured
   regardless of source order. */
.lmk-feature.featured.lmk-card--branded {
    background-color: var(--lmk-paper-card);
    background-image:
        linear-gradient(
            to right,
            var(--lmk-accent-violet)  0%,
            var(--lmk-accent-violet)  33.333%,
            var(--lmk-accent-cyan)    33.333%,
            var(--lmk-accent-cyan)    66.666%,
            var(--lmk-accent-magenta) 66.666%,
            var(--lmk-accent-magenta) 100%
        ),
        linear-gradient(135deg, #ffffff 0%, #faf7ff 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top left;
    background-size: 72px 2px, 100% 100%;
}
.lmk-feature.featured.lmk-card--branded:hover {
    background-size: 104px 2px, 100% 100%;
}

/* Same override pattern for the .wide + branded combination, used by
   the 7th pillar card in _SevenPillars.cshtml when the visitor is on
   the Local Inference page. */
.lmk-feature.wide.lmk-card--branded {
    background-color: var(--lmk-paper-card);
    background-image:
        linear-gradient(
            to right,
            var(--lmk-accent-violet)  0%,
            var(--lmk-accent-violet)  33.333%,
            var(--lmk-accent-cyan)    33.333%,
            var(--lmk-accent-cyan)    66.666%,
            var(--lmk-accent-magenta) 66.666%,
            var(--lmk-accent-magenta) 100%
        ),
        linear-gradient(120deg, #faf7ff 0%, #ffffff 60%);
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top left;
    background-size: 72px 2px, 100% 100%;
}
.lmk-feature.wide.lmk-card--branded:hover {
    background-size: 104px 2px, 100% 100%;
}

/* Eyebrow variant: leading brandmark glyph + 0.5rem gap before text.
   Markup:
     <span class="lmk-eyebrow lmk-eyebrow--branded">
         <span class="lmk-brandmark"><span></span></span>
         Solutions, Document Intelligence
     </span>
*/
.lmk-eyebrow--branded {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- 8.54 Dense bulleted list (in-card prose) ------------------- */
/*
   Used inside .lmk-feature / .lmk-card bodies for short bullet lists
   that summarise capabilities, parameters, or trade-offs. Provides
   actual visible bullets (the global reset strips list-style:none on
   every ul/ol), tuned for card density rather than full-section lead
   copy.

   Markup:
       <ul class="lmk-bulleted">
         <li>First point</li>
         <li>Second point</li>
       </ul>

   Replaces the pattern of inline-styled lists with no bullet markers
   that read as a "wall of text" inside feature cards.
*/
.lmk-bulleted {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 0.45rem;
    font-size: 0.92rem;
    color: var(--lmk-ink-2);
    line-height: 1.5;
    /* Bullets often live inside .lmk-feature cards or two-column grid
       cells. min-width:0 prevents long inline <code> identifiers from
       blowing out the column width and overlapping a neighbouring card. */
    min-width: 0;
}
.lmk-bulleted > li {
    /* IMPORTANT: do NOT use flex here. Flex blockifies every child,
       which turns inline <code> elements into separate full-width
       block items (one chip per row, regardless of length). Use a
       plain block <li> with an absolutely positioned ::before marker
       so the content flows as ordinary inline text and <code>
       elements stay inline. */
    position: relative;
    display: block;
    padding-left: 1.1rem;
    min-width: 0;
}
.lmk-bulleted > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lmk-purple);
    opacity: 0.85;
}
/*
   RADICAL FIX for code-in-bullets layout:

   Multiple prior attempts at a "chip" treatment (rounded purple-soft
   background with padding) collapsed in narrow flex columns:
     - white-space:normal + overflow-wrap:anywhere fragmented chips
       into per-character stacks ("tr"/"ue").
     - white-space:nowrap + inline-block + max-width:100% truncated
       chips into a tiny inline scrollbar.
   Both modes shipped, both looked broken, and the root cause is
   structural: a styled-chip background does not survive a narrow
   wrapping container regardless of which break strategy we pick.

   We stop fighting the layout and DROP the chip background entirely
   inside bulleted lists. Inline code becomes bold purple monospace
   text. It wraps as plain text (at any character if needed), there is
   no chip surface to fragment or truncate, and the visual cue still
   reads as "code" via font family + weight + color. Chip styling on
   <code> elsewhere on the site (feature cards, prose, hero descriptors)
   is unchanged: only the `.lmk-bulleted > li code` selector is affected.
*/
.lmk-bulleted > li code {
    display: inline;
    font-family: var(--lmk-font-mono, ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace);
    font-size: 0.92em;
    font-weight: 600;
    color: var(--lmk-purple);
    background: transparent;
    padding: 0;
    border-radius: 0;
    /* Wrap at natural points first, anywhere as a last resort. No chip
       background means fragmentation is invisible: it just looks like
       a long word that wrapped. */
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* On dark surfaces, lighten so the dot stays visible. */
.lmk-section.dark .lmk-bulleted {
    color: var(--lmk-on-dark-2);
}
.lmk-section.dark .lmk-bulleted > li::before {
    background: #a78bfa;
    opacity: 0.9;
}
.lmk-section.dark .lmk-bulleted > li code {
    background: transparent;
    color: #d6bcfa;
}

/* ---- 8.55 Resources grid (demos + guides cross-link) ------------ */
/*
   Pattern used by every solution page to link out to GitHub console
   demos, docs how-to guides, samples-overview pages, API reference,
   articles, or videos. Renders 3-4 small cards in a responsive grid.
   The eyebrow icon distinguishes the resource kind:

       <a class="lmk-resource" href="...">
         <span class="lmk-resource-head">
           <svg class="lmk-resource-ico" ...></svg>
           Demo
         </span>
         <h3 class="lmk-resource-title">Multi-turn chat with vision</h3>
         <p class="lmk-resource-desc">Console demo: drop an image into a chat.</p>
         <span class="lmk-resource-cta">Open on GitHub →</span>
       </a>

   The partial _Resources.cshtml takes a SolutionResource[] from
   ViewData and renders this markup; the icon and CTA text vary by
   resource Kind.
*/
.lmk-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.lmk-resource {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: clamp(1rem, 1.6vw, 1.4rem);
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    color: inherit;
    /* Cards live in narrow grid columns; long API identifiers in titles
       (e.g. "Configuration.EnableDynamicSampling") must stay inside the
       card width. min-width:0 lets flex/grid shrink the card; the title
       and description below carry the actual wrapping rules. */
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.lmk-resource:hover {
    border-color: var(--lmk-line-strong);
    transform: translateY(-2px);
    box-shadow: var(--lmk-shadow-2);
}
.lmk-resource-head {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--lmk-purple);
}
.lmk-resource-ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.lmk-resource-title {
    font-family: var(--lmk-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--lmk-ink);
    /* Long unbreakable identifiers must wrap inside the card. Prefer
       natural break points (dots, dashes); fall back to anywhere only
       if a single segment is wider than the column. */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    min-width: 0;
}
.lmk-resource-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--lmk-ink-2);
    flex: 1;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    min-width: 0;
}
.lmk-resource-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--lmk-purple);
    font-weight: 600;
    font-size: 0.85rem;
}
.lmk-resource:hover .lmk-resource-cta {
    text-decoration: underline;
    text-decoration-color: rgba(124, 58, 237, 0.45);
    text-underline-offset: 3px;
}

/* ---- 8.6 Foundation card (Local Inference pillar) ---------------- */
/*
   A visually distinct dark card used by _SevenPillars.cshtml to set
   Local Inference apart from the six capability pillars. It is the
   runtime substrate, not a peer, so it gets its own row, its own
   eyebrow ("The foundation"), and its own treatment.

   Layout:
     - Wide row below the 6-card capability grid.
     - Dark background, brand-stripe top-left, single CTA on the right.
     - Mobile: stacks vertically.
*/
.lmk-foundation-head {
    text-align: center;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.lmk-foundation-head .lmk-tridot {
    margin-bottom: 0.35rem;
}
.lmk-foundation-eyebrow {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lmk-purple);
}
.lmk-foundation-sub {
    margin: 0;
    font-size: 0.92rem;
    color: var(--lmk-ink-3);
}

.lmk-foundation-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: center;
    padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
    background-color: var(--lmk-ink);
    color: var(--lmk-on-dark-1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--lmk-radius-lg);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, border-color 200ms ease, background-size 220ms ease;
    /* Brand-stripe top-left + dark base. */
    background-image: linear-gradient(
        to right,
        var(--lmk-accent-violet)  0%,
        var(--lmk-accent-violet)  33.333%,
        var(--lmk-accent-cyan)    33.333%,
        var(--lmk-accent-cyan)    66.666%,
        var(--lmk-accent-magenta) 66.666%,
        var(--lmk-accent-magenta) 100%
    );
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 96px 2px;
}
.lmk-foundation-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    background-size: 128px 2px;
}
.lmk-foundation-card.is-here {
    border-color: var(--lmk-accent-violet);
}

.lmk-foundation-card-body { display: block; }
.lmk-foundation-card-num {
    margin: 0 0 0.45rem;
    font-family: var(--lmk-font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lmk-accent-violet);
}
.lmk-foundation-card-title {
    margin: 0;
    font-family: var(--lmk-font-display);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #ffffff;
}
.lmk-foundation-card-desc {
    margin-top: 0.65rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--lmk-on-dark-2);
    max-width: 60ch;
}

.lmk-foundation-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}
.lmk-foundation-card-cta svg {
    width: 22px;
    height: 22px;
    color: var(--lmk-accent-violet);
    transition: transform 200ms ease;
}
.lmk-foundation-card:hover .lmk-foundation-card-cta svg {
    transform: translateX(3px);
}

@media (max-width: 720px) {
    .lmk-foundation-card {
        grid-template-columns: 1fr;
    }
    .lmk-foundation-card-cta {
        justify-content: flex-start;
    }
}

/* ---- 9. Hero (home) --------------------------------------------- */
.lmk-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(3.5rem, 6vw, 5.5rem);
    border-bottom: 1px solid var(--lmk-line);
}
.lmk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 80% 0%, rgba(109, 40, 217, 0.10), transparent 70%),
        radial-gradient(ellipse 35% 30% at 5% 100%, rgba(192, 38, 211, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.lmk-hero > .lmk-container { position: relative; z-index: 1; }
.lmk-hero-grid {
    display: grid;
    /* Symmetric 50/50 split; the left column carries text and the
       right column the code preview. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* A little more breathing room between the two columns so they
       read as cooperating, not crammed. */
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
/*
   Hero code preview with seven pillar tabs above a codecard.

   - Tabs sit on the light hero surface so they read as "tabs", not
     IDE chrome. The codecard below keeps its dark window-chrome look.
   - The tabs nav allows wrapping (7 labels do not always fit a single
     row on narrow widths). Use a compact font size and tight padding
     so 7 labels fit on one line in a typical desktop hero column.
   - .lmk-hero-code is just the wrapper. Inner .lmk-tabs primitives
     (.lmk-tab, .lmk-tabs-panel) are inherited unchanged.
*/
.lmk-hero-code { width: 100%; min-width: 0; }
.lmk-hero-tabs .lmk-tabs-nav {
    /* Stretch the tab strip to fill the column so its right edge
       aligns with the codecard right edge. Each tab gets equal flex
       basis (flex: 1 1 0 below) which makes the strip read as one
       unified component rather than two separate elements. */
    gap: 0.1rem;
    margin-bottom: 0.4rem;
    border-bottom-color: var(--lmk-line);
}
.lmk-hero-tabs .lmk-tab {
    /* flex-basis: auto so each cell is at least as wide as its
       label. Cells then share remaining space equally via flex-grow.
       This keeps the visual rhythm (mostly equal widths) while
       guaranteeing longer labels like "Generation" never overflow
       their cell. Combined with white-space: nowrap, multi-word
       labels like "PDF Chat" stay on one line. */
    flex: 1 1 auto;
    text-align: center;
    white-space: nowrap;
    padding: 0.45rem 0.4rem;
    font-size: 0.82rem;
    letter-spacing: 0;
}
@media (max-width: 1100px) {
    .lmk-hero-tabs .lmk-tab { padding: 0.4rem 0.3rem; font-size: 0.74rem; }
}
@media (max-width: 720px) {
    .lmk-hero-tabs .lmk-tab { padding: 0.4rem 0.35rem; font-size: 0.78rem; }
}
/*
   Zero-CLS panel switch.

   The seven hero snippets are 14 to 19 lines each. The default
   `.lmk-tabs-panel[hidden] { display: none }` rule makes the panel
   disappear from layout, so the codecard collapses to the active
   panel's height and the rest of the page jumps up/down on every
   tab click. Cumulative Layout Shift is bad for both UX and Core
   Web Vitals.

   Fix: stack all panels in the SAME grid cell. The container sizes
   itself to the tallest panel once (worst case ~19 lines), then we
   only toggle visibility on click. Inactive panels keep their space
   in the layout but are invisible and untargetable. The active panel
   draws on top. Switching tabs becomes a pure visibility change with
   zero geometry recomputation.
*/
.lmk-hero-tabs .lmk-tabs-panels {
    display: grid;
    /* minmax(0, 1fr) prevents the track from growing past the column
       width to fit the widest panel content. Without it, a long code
       line in any panel blows out the hero column. */
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}
.lmk-hero-tabs .lmk-tabs-panel {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    /*
       Balanced layout: cap every panel at the same height so the right
       column never exceeds the visual weight of the left column text.
       Combined with .lmk-hero-code .lmk-codecard { height: 100% } and
       a scrollable <pre>, panels stay uniform regardless of which
       snippet is the tallest. Tuned so the hero fits a typical laptop
       fold without scrolling the page.
    */
    height: 460px;
    max-height: 460px;
}
.lmk-hero-tabs .lmk-tabs-panel[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
}
/*
   Codecard fills the panel cell so the dark surface and tab strip
   align across every active tab. The <pre> takes the remaining space
   below the title bar and scrolls vertically when content overflows.
   Text wraps at any character so identifiers like
   LoadFromStoreAsync break cleanly instead of forcing horizontal
   scroll. Scoped to the hero only; other codecards keep their
   natural-height behaviour.
*/
.lmk-hero-code .lmk-codecard {
    /*
       Size to the snippet's natural content, but never exceed the
       panel cell. Short snippets show a codecard exactly as tall as
       their code (no dark empty space at the bottom). The long RAG
       snippet caps at 100% of the cell and its inner <pre> scrolls.
       Combined with the grid stacking on .lmk-tabs-panels, the cell
       still occupies a constant 460px reserved height so the page
       below the hero never shifts.
    */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lmk-hero-code .lmk-codecard pre {
    flex: 1 1 auto;
    min-height: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Compress the code surface so most hero snippets (~15 to 20
       lines) fit within the panel cell without triggering vertical
       scroll. Only the RAG snippet (deliberately denser to convey
       scale) still overflows and uses the scrollbar. */
    padding: 0.85rem 1rem;
    line-height: 1.45;
    font-size: 0.83rem;
}
.lmk-hero-code .lmk-codecard pre::-webkit-scrollbar { width: 6px; }
.lmk-hero-code .lmk-codecard pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
.lmk-hero-code .lmk-codecard pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 940px) {
    .lmk-hero-grid { grid-template-columns: 1fr; }
}
.lmk-hero-title {
    font-size: clamp(2.4rem, 5.4vw, 4.2rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 17ch;
}
.lmk-hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, #6d28d9 0%, #c026d3 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* When the gradient em wraps across multiple lines, the browser
       computes one shared clip box for the whole inline element, which
       shaves the right-edge subpixels off the last glyph of each line
       (most visible on bold + negative tracking). `box-decoration-break:
       clone` repaints the gradient per line-box so each line's clip
       rectangle matches that line's actual glyphs. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* Hair of right-side padding so subpixel rendering of the last
       glyph never sits exactly on the clip-box edge. */
    padding-inline-end: 0.04em;
}
.lmk-hero-lead {
    margin-top: 1.4rem;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    max-width: 56ch;
}
.lmk-hero-cta {
    margin-top: 1.85rem;
    display: flex; flex-wrap: wrap; gap: 0.65rem;
}
.lmk-hero-meta {
    margin-top: 1.4rem;
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--lmk-ink-3);
}
.lmk-hero-meta strong { color: var(--lmk-ink); font-weight: 600; }

/* Code preview card. */
.lmk-codecard {
    background: #1e1b2e;
    color: #e6e1f7;
    border-radius: var(--lmk-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    font-family: var(--lmk-font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    box-shadow: 0 24px 48px -24px rgba(20, 16, 30, 0.45);
}
.lmk-codecard-bar {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.7rem 0.95rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lmk-codecard-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.lmk-codecard-bar .dot.r { background: #ff5f57; }
.lmk-codecard-bar .dot.y { background: #febc2e; }
.lmk-codecard-bar .dot.g { background: #28c840; }
.lmk-codecard-bar .file {
    margin-left: 0.6rem; font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

/*
   Terminal variant: visually distinct from a source-file codecard.

   Source-file codecards use the macOS-window metaphor (three traffic
   light dots + filename) and convey "this is a piece of code you can
   copy into your editor". Terminal samples convey something different:
   "this is what to type into a shell". They get:

     - True-black background (slightly darker than the code surface)
     - Green status indicator (the prompt is alive) in place of the
       three window dots
     - Green-tinted label color (e.g. "$ terminal" or "bash")
     - Visible `$` shell prompts before each command inside <pre>, so
       readers can mentally separate commands from inline comments

   Markup contract:
       <div class="lmk-codecard lmk-codecard--terminal">
           <div class="lmk-codecard-bar">
               <span class="lmk-terminal-indicator" aria-hidden="true"></span>
               <span class="file">terminal</span>
           </div>
           <pre><code>...</code></pre>
       </div>

   Commands inside <pre> are prefixed with `<span class="tk-p">$</span> `
   to render the prompt in the same green as the indicator.
*/
.lmk-codecard--terminal {
    background: #0a0b0d;
    border-color: rgba(74, 222, 128, 0.18);
}
.lmk-codecard--terminal .lmk-codecard-bar {
    background: rgba(74, 222, 128, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    gap: 0.55rem;
}
.lmk-codecard--terminal .lmk-codecard-bar .dot { display: none; }
.lmk-codecard--terminal .lmk-terminal-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
    flex-shrink: 0;
}
.lmk-codecard--terminal .file {
    margin-left: 0;
    color: rgba(134, 239, 172, 0.85);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.lmk-codecard--terminal pre { color: #cbd5e1; }
/* Shell prompt token: green, slightly faded, never selected when the
   user copies the command (user-select:none keeps the copied text
   clean for paste into a real terminal). */
.lmk-codecard--terminal .tk-p {
    color: #4ade80;
    user-select: none;
    margin-right: 0.15em;
}
.lmk-codecard pre {
    margin: 0; padding: 1.1rem 1.25rem;
    background: transparent; color: inherit;
    font-family: inherit; font-size: inherit; line-height: inherit;
    /* Wrap long lines instead of overflowing horizontally so the
       card never grows a horizontal scrollbar inside dense layouts
       (e.g. tabs, side-by-side grids). Identifiers and strings can
       break at any character if they're too long for the column. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    tab-size: 4;
}
.lmk-codecard .tk-keyword,
.lmk-codecard .tk-k       { color: #c586c0; }
.lmk-codecard .tk-type,
.lmk-codecard .tk-t       { color: #4ec9b0; }
.lmk-codecard .tk-string,
.lmk-codecard .tk-s       { color: #ce9178; }
.lmk-codecard .tk-comment,
.lmk-codecard .tk-c       { color: #6a9955; font-style: italic; }
.lmk-codecard .tk-call    { color: #dcdcaa; }
.lmk-codecard .tk-prop    { color: #9cdcfe; }
.lmk-codecard .tk-num,
.lmk-codecard .tk-n       { color: #b5cea8; }

/* ---- Codecard head bar (file label) -----------------------------
   Used by the [migration] pages instead of the traffic-light bar. */
.lmk-codecard-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.95rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--lmk-font-mono);
}
.lmk-codecard-head .lmk-codecard-file { font-weight: 500; }

/* ---- Copy-to-clipboard button injected by lmk-nav.js -----------
   Quiet icon-only utility. Sits in the corner of the codecard at low
   opacity; brightens on codecard hover, button hover, or keyboard
   focus. The "Copy" / "Copied" text label is hidden by default and
   only appears briefly after a successful copy as a confirmation
   pulse. Goal: present and discoverable, never loud. */
.lmk-codecard { position: relative; }
.lmk-codecard-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    border: 0;
    border-radius: 0.4rem;
    font-family: var(--lmk-font-sans, inherit);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 2;
    opacity: 0.5;
    transition: opacity 150ms ease, background 150ms ease, color 150ms ease, width 200ms ease;
}
/* Hide the inline label by default — icon carries the meaning. */
.lmk-codecard-copy > span {
    display: none;
}
/* Strengthen on codecard hover, button hover, and keyboard focus. */
.lmk-codecard:hover .lmk-codecard-copy,
.lmk-codecard-copy:hover,
.lmk-codecard-copy:focus-visible {
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
}
.lmk-codecard-copy:focus-visible {
    outline: 2px solid var(--lmk-purple);
    outline-offset: 2px;
}
/* On successful copy: brief confirmation pulse with visible label.
   Selector boosted to win against `.lmk-codecard:hover .lmk-codecard-copy`
   so the purple confirmation always shows, even while the codecard is
   being hovered. */
.lmk-codecard .lmk-codecard-copy[data-state="copied"],
.lmk-codecard:hover .lmk-codecard-copy[data-state="copied"] {
    opacity: 1;
    width: auto;
    padding: 0 0.55rem;
    background: rgba(124, 58, 237, 0.22);
    color: #ffffff;
}
.lmk-codecard-copy[data-state="copied"] > span {
    display: inline;
}
.lmk-codecard-copy svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
}
/* If a head bar is present, the copy button sits inline with the file label */
.lmk-codecard-head + .lmk-codecard-copy,
.lmk-codecard-bar + .lmk-codecard-copy {
    top: 0.4rem;
}

/* ---- External link icon (injected by lmk-nav.js) -----------------
   Premium-feel stroke-only mark: thin lines, round caps, low opacity.
   Sits BEFORE the link text. Color follows currentColor; reduced
   opacity keeps it a quiet modifier next to the label. */
.lmk-ext-ico {
    display: inline-block;
    vertical-align: -0.04em;
    margin-right: 0.28em;
    opacity: 0.45;
    flex-shrink: 0;
    transition: opacity 150ms ease;
    /* Crisper rendering on small icons */
    shape-rendering: geometricPrecision;
}
a:hover > .lmk-ext-ico,
a:focus-visible > .lmk-ext-ico { opacity: 0.85; }

/* Slightly brighter on dark surfaces so the thin strokes stay legible. */
.lmk-nav .lmk-ext-ico,
.lmk-section.dark .lmk-ext-ico {
    opacity: 0.55;
}
.lmk-nav a:hover > .lmk-ext-ico,
.lmk-section.dark a:hover > .lmk-ext-ico { opacity: 0.95; }

/* ---- Bullets + Code pair layout --------------------------------
   When a .lmk-features grid contains a .lmk-codecard, the code
   block needs more horizontal room than the bullet list next to
   it. Without this rule the code wraps awkwardly inside a 1fr
   column while the bullets card has empty space. */
.lmk-features:has(.lmk-codecard) {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
}
.lmk-features:has(.lmk-codecard) > .lmk-feature {
    grid-column: auto;
}
@media (max-width: 940px) {
    .lmk-features:has(.lmk-codecard) {
        grid-template-columns: 1fr;
    }
    .lmk-features:has(.lmk-codecard) > .lmk-feature { grid-column: 1; }
}

/* ---- 10. Section heads ------------------------------------------ */
.lmk-section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lmk-section-title {
    font-size: clamp(1.85rem, 3.4vw, 2.65rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-top: 0.85rem;
}
.lmk-section-title em,
.lmk-prose .lmk-section-title em {
    /* font-style:normal must repeat in the .lmk-prose scope. Inside a
       .lmk-prose block, `.lmk-prose em` (defined later in this file)
       wins by source order and re-enables italics. Italic glyphs lean
       right and have descenders that fall outside the gradient
       text-clip box, which clips the bottom of question marks and 'p'
       letters. Always render the section-title accent in upright
       gradient form regardless of where the heading lives. */
    font-style: normal;
    background: linear-gradient(135deg, #6d28d9 0%, #c026d3 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* Multi-line gradient text clipping fix: paint per line-box rather
       than one shared box, so the last glyph of each line never gets
       subpixel-shaved by a too-tight clip rectangle. See the matching
       comment on .lmk-hero-title em above. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline-end: 0.04em;
}
.lmk-section-lead {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.55;
    max-width: 68ch;
    color: var(--lmk-ink-2);
}

/* ---- 11. Feature grid (six surfaces) ---------------------------- */
.lmk-features {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}
.lmk-feature {
    grid-column: span 2;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    padding: clamp(1.5rem, 2vw, 2rem);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.7rem;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.lmk-feature::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lmk-purple) 0%, #c026d3 100%);
    opacity: 0;
    transition: opacity 200ms ease;
}
.lmk-feature:hover {
    border-color: var(--lmk-line-strong);
    transform: translateY(-3px);
    box-shadow: var(--lmk-shadow-2);
}
.lmk-feature:hover::before { opacity: 1; }
.lmk-feature.featured {
    grid-column: span 4;
    background: linear-gradient(135deg, #ffffff 0%, #faf7ff 100%);
}
.lmk-feature.wide {
    grid-column: span 6;
    background: linear-gradient(120deg, #faf7ff 0%, #ffffff 60%);
}
.lmk-feature-num {
    font-family: var(--lmk-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lmk-purple);
    letter-spacing: 0.04em;
}
.lmk-feature-title {
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
}
.lmk-feature.featured .lmk-feature-title,
.lmk-feature.wide .lmk-feature-title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.lmk-feature-body { font-size: 0.95rem; line-height: 1.55; color: var(--lmk-ink-2); }
.lmk-feature-link {
    color: var(--lmk-purple);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.lmk-feature-link::after { content: '\2192'; }
@media (max-width: 940px) {
    .lmk-features { grid-template-columns: repeat(2, 1fr); }
    .lmk-feature, .lmk-feature.featured, .lmk-feature.wide { grid-column: span 2; }
}
@media (max-width: 580px) {
    .lmk-features { grid-template-columns: 1fr; }
    .lmk-feature, .lmk-feature.featured, .lmk-feature.wide { grid-column: span 1; }
}

/* ---- 11b. Link grid (dense, title-only cards: glossary / guides) ----
   Use when each item is a single link with just a label + optional
   eyebrow. Denser than .lmk-features (no body text), so cards do not
   inflate to fill empty vertical space. */
.lmk-linkgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.lmk-linkgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lmk-linkgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.lmk-linkrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.lmk-linkrow:hover {
    border-color: var(--lmk-purple-line);
    background: var(--lmk-paper);
    transform: translateY(-1px);
}
.lmk-linkrow-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.lmk-linkrow-eyebrow {
    font-family: var(--lmk-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--lmk-ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lmk-linkrow-title {
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--lmk-ink-1);
}
.lmk-linkrow-arrow {
    flex-shrink: 0;
    color: var(--lmk-ink-3);
    font-size: 0.95rem;
    transition: color 120ms ease, transform 120ms ease;
}
.lmk-linkrow:hover .lmk-linkrow-arrow {
    color: var(--lmk-purple);
    transform: translateX(2px);
}
@media (max-width: 940px) {
    .lmk-linkgrid,
    .lmk-linkgrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .lmk-linkgrid,
    .lmk-linkgrid--3,
    .lmk-linkgrid--2 { grid-template-columns: 1fr; }
}

/* ---- 11c. Brand lockup (logo + wordmark as one unit) ----
   Pairs a logo image with its plaintext wordmark so the logo
   never appears orphaned. Used for partner / parent-company
   attributions. */
.lmk-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.lmk-lockup img,
.lmk-lockup svg { display: block; height: 1.5rem; width: auto; flex-shrink: 0; }
.lmk-lockup--lg img,
.lmk-lockup--lg svg { height: 2.1rem; }
.lmk-lockup-name { font-size: 0.95rem; color: var(--lmk-ink-1); white-space: nowrap; }
.lmk-lockup--lg .lmk-lockup-name { font-size: 1.1rem; }

.lmk-partof {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.95rem 0.55rem 0.75rem;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease;
}
.lmk-partof:hover { border-color: var(--lmk-purple-line); }
.lmk-partof-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lmk-ink-3);
}
.lmk-partof-divider {
    width: 1px;
    height: 1.2rem;
    background: var(--lmk-line);
}

/* ---- 12. Spec grid (runtime / platforms) ------------------------ */
.lmk-spec {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--lmk-line);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
}
.lmk-spec > div { background: var(--lmk-paper-card); padding: 1.2rem 1.35rem; }
.lmk-spec dt {
    font-size: 0.72rem; font-weight: 700;
    color: var(--lmk-purple);
    letter-spacing: 0.16em; text-transform: uppercase;
    margin-bottom: 0.4rem;
}
.lmk-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--lmk-ink); font-weight: 500; }
@media (max-width: 720px) { .lmk-spec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .lmk-spec { grid-template-columns: 1fr; } }

/* ---- 13. Pricing tiers ------------------------------------------ */
.lmk-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (max-width: 720px) { .lmk-tiers { grid-template-columns: 1fr; } }
.lmk-tier {
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    padding: clamp(1.5rem, 2vw, 2rem);
    display: flex; flex-direction: column; gap: 0.85rem;
}
.lmk-tier-name {
    font-family: var(--lmk-font-display);
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.015em;
}
.lmk-tier-price {
    font-family: var(--lmk-font-display);
    font-size: 2.1rem; line-height: 1;
    font-weight: 800; letter-spacing: -0.025em;
    color: var(--lmk-ink);
}
.lmk-tier-price small {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--lmk-font-sans);
    font-size: 0.78rem; font-weight: 600;
    color: var(--lmk-ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lmk-tier-body { color: var(--lmk-ink-2); font-size: 0.95rem; line-height: 1.55; }
.lmk-tier-list { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.5rem; }
.lmk-tier-list li {
    display: flex; gap: 0.55rem; align-items: flex-start;
    color: var(--lmk-ink); font-size: 0.94rem; line-height: 1.45;
}
.lmk-tier-list li::before {
    content: '';
    flex: 0 0 6px; width: 6px; height: 6px; margin-top: 0.55rem;
    border-radius: 50%;
    background: var(--lmk-purple);
}
.lmk-tier-cta { margin-top: auto; padding-top: 0.5rem; }

/* ---- 14. Final CTA strip ---------------------------------------- */
.lmk-final-cta { background: var(--lmk-ink); color: #fff; padding-block: clamp(4rem, 6vw, 6rem); }
.lmk-final-cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem 3rem;
    align-items: center;
}
.lmk-final-cta-title {
    font-family: var(--lmk-font-display);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
    max-width: 22ch;
}
.lmk-final-cta-eyebrow {
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--lmk-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.lmk-final-cta-buttons { display: flex; gap: 0.65rem; flex-wrap: wrap; }
@media (max-width: 760px) {
    .lmk-final-cta-inner { grid-template-columns: 1fr; }
}

/* ---- 15. Reviews block ------------------------------------------ */
.lmk-reviews-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.lmk-reviews-score {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--lmk-font-display);
    font-weight: 600;
    color: var(--lmk-ink);
    font-size: 0.9rem;
}
.lmk-reviews-score .stars { color: #f59e0b; letter-spacing: -1px; }
/* SourceForge embed has a JS that auto-resizes the iframe inline based
   on its own content (uses postMessage). That beats any height rule we
   set on the iframe itself. The fix: lock height on the PARENT, set
   overflow:hidden, and let the iframe overflow into a clipped region.
   We pick 460 px because their carousel only shows one review per slide
   and the navigation/footer fits inside that height comfortably. */
.lmk-reviews-frame {
    position: relative;
    height: 640px;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    box-shadow: var(--lmk-shadow-1);
}
.lmk-reviews-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 640px) {
    .lmk-reviews-frame { height: 740px; }
}

/* "See all reviews" CTA below the SourceForge frame. */
.lmk-reviews-foot {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

/* ---- 16. Social-button row (contact page, light surface) --------
   A row of pill-free buttons where each one carries a brand icon
   plus a label ("LinkedIn", "GitHub", "Hugging Face", "NuGet"). The
   icon's official brand color comes through via inline `fill`. The
   external-link decorator (lmk-nav.js) is skipped so the arrow doesn't
   double up with the brand mark. */
.lmk-social-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}
.lmk-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.lmk-social-btn svg { flex-shrink: 0; }
.lmk-social-btn-emoji {
    font-size: 18px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', system-ui, sans-serif;
}

/* File input styling: blend with the rest of the form. Native file
   inputs vary by OS; we tame the picker label color and spacing so it
   reads as part of the design system. */
.lmk-file-input {
    cursor: pointer;
    padding: 0.55rem 0.85rem;
    background: var(--lmk-paper-card);
}
.lmk-file-input::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
    background: var(--lmk-paper-soft);
    color: var(--lmk-ink-1);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.lmk-file-input::file-selector-button:hover {
    background: var(--lmk-purple-soft);
    border-color: var(--lmk-purple-line);
    color: var(--lmk-purple);
}

/* ---- 16. Social-link tile (footer row) -------------------------- */
.lmk-social-link {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--lmk-radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--lmk-line-dark);
    color: var(--lmk-on-dark-2);
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.lmk-social-link:hover,
.lmk-social-link:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: translateY(-1px);
}
/* Emoji-as-icon variant: used for Hugging Face, which is rendered
   as the U+1F917 emoji (matches the live lm-kit.com footer). Sizes
   the glyph and removes the inherited text color so the OS-provided
   color emoji shows through. */
.lmk-social-link--emoji {
    font-size: 20px;
    line-height: 1;
}
.lmk-social-link--emoji > span {
    color: initial;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', system-ui, sans-serif;
}
.lmk-social-link--emoji:hover {
    background: rgba(255, 210, 30, 0.15);
    border-color: rgba(255, 210, 30, 0.30);
}
.lmk-footer-social {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- 17. CTA button polish (header "Get free license" hero CTA) -- */
/* Builds on .lmk-btn--primary. The CTA in the header sits on the dark
   sticky header, so we invert it (white tile, ink text) and add a
   purple-to-fuchsia gradient on hover plus a soft glow ring. */
/* Hardened against per-page Elementor overrides via stacked specificity. */
.lmk-btn.lmk-btn--cta,
a.lmk-btn.lmk-btn--cta,
button.lmk-btn.lmk-btn--cta,
.lmk-header .lmk-btn--cta {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%) !important;
    background-image: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 6px 20px -8px rgba(124, 58, 237, 0.45),
                0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}
.lmk-btn.lmk-btn--cta:hover,
.lmk-btn.lmk-btn--cta:focus-visible,
a.lmk-btn.lmk-btn--cta:hover,
.lmk-header .lmk-btn--cta:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%) !important;
    background-image: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px -10px rgba(124, 58, 237, 0.65),
                0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}
.lmk-btn--cta .lmk-btn-icon {
    width: 14px; height: 14px;
    display: inline-block;
    transform: translateY(0);
    transition: transform 200ms ease;
}
.lmk-btn--cta:hover .lmk-btn-icon { transform: translateY(2px); }

/* Compact CTA used in the header bar. Slightly smaller than the body
   CTA because the header is dense. */
.lmk-header-cta .lmk-btn--cta {
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.005em;
}


/* ============================================================
   Mega-menu section cards. Each .lmk-nav-section inside a
   .lmk-nav-col is a self-contained, colour-coded block. The
   section colour is injected via the --section-color custom
   property set inline on the section element. Every category
   has its OWN unique colour, no repeats. New sections can be
   added later by picking a colour from the palette below.
   ============================================================ */
.lmk-nav-section {
    --section-color: #a855f7;
    position: relative;
    padding: 0.95rem 0.5rem 0.7rem;
    border-radius: var(--lmk-radius-md);
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 200ms ease, border-color 200ms ease;
}
.lmk-nav-section + .lmk-nav-section { margin-top: 0.7rem; }

/* Top accent strip in the section colour. */
.lmk-nav-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.6rem;
    right: 0.6rem;
    height: 2px;
    border-radius: 2px;
    background: var(--section-color);
    opacity: 0.65;
    transition: opacity 200ms ease, height 200ms ease;
}
.lmk-nav-section:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.10);
}
.lmk-nav-section:hover::before {
    opacity: 1;
    height: 3px;
}

.lmk-nav-section-h {
    margin: 0.15rem 0.5rem 0.55rem;
    font-family: var(--lmk-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--section-color);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Inside a section, items get a left-edge accent strip in the
   section colour on hover. */
.lmk-nav-section .lmk-nav-item-rich {
    position: relative;
    padding: 0.42rem 0.75rem;
    border-radius: var(--lmk-radius-sm);
    transition: background 140ms ease, transform 140ms ease, color 140ms ease;
}
/* Section-scoped variant uses the section's accent color in the dot. */
.lmk-nav-section .lmk-nav-item-rich::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--section-color, #a78bfa);
    transform: translateY(-50%);
    opacity: 0.85;
    transition: opacity 140ms ease, transform 140ms ease;
}
.lmk-nav-section .lmk-nav-item-rich:hover,
.lmk-nav-section .lmk-nav-item-rich:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
    color: #fff;
}
.lmk-nav-section .lmk-nav-item-rich:hover::before,
.lmk-nav-section .lmk-nav-item-rich:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
}
.lmk-nav-section .lmk-nav-item-rich-title {
    display: block;
    font-family: var(--lmk-font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    letter-spacing: 0;
}
.lmk-nav-section .lmk-nav-item-rich-desc {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--lmk-on-dark-3);
}

/* Premium scrollbar for column overflow on tall menus. */
.lmk-nav-col {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.lmk-nav-col::-webkit-scrollbar { width: 6px; }
.lmk-nav-col::-webkit-scrollbar-track { background: transparent; }
.lmk-nav-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}
.lmk-nav-col::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* ---- 18. (legacy) Mega-menu radical redesign ----------------- */
/* Goals:
   * Categories visually distinct (numbered icon tile per column header).
   * More breathing room, denser typography hierarchy.
   * Hover state with strong purple accent strip.
   * Generous panel chrome that signals "this is the navigation",
     not "this is a list of links". */

/* Override the boxy feel of the panel container. */
.lmk-nav-panel--mega {
    padding: 1.1rem 1.1rem 0.85rem;
    gap: 0.4rem 1.6rem;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(124, 58, 237, 0.10), transparent 70%),
        var(--lmk-ink);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Each column is a card on its own. The nav-col gets a subtle background
   tint that picks the column out from its siblings, plus a thin top
   accent that turns purple when the column is hovered. */
.lmk-nav-col {
    position: relative;
    padding: 0.9rem 0.5rem 0.5rem;
    border-radius: 0.5rem;
}
.lmk-nav-col + .lmk-nav-col {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding-left: 1rem;
}
@media (max-width: 760px) {
    .lmk-nav-col + .lmk-nav-col { border-left: 0; padding-left: 0.5rem; }
}

/* Column header: small icon tile + label. */
.lmk-nav-panel-h {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.6rem 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-family: var(--lmk-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.lmk-nav-panel-h::before {
    content: '';
    width: 18px; height: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    flex: 0 0 18px;
    box-shadow: 0 2px 6px -2px rgba(124, 58, 237, 0.55);
}
/* Vary the badge color per column so each category reads as its own. */
.lmk-nav-col:nth-child(2) .lmk-nav-panel-h::before {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    box-shadow: 0 2px 6px -2px rgba(37, 99, 235, 0.5);
}
.lmk-nav-col:nth-child(3) .lmk-nav-panel-h::before {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.5);
}
.lmk-nav-col:nth-child(4) .lmk-nav-panel-h::before {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    box-shadow: 0 2px 6px -2px rgba(16, 185, 129, 0.5);
}
.lmk-nav-col:nth-child(5) .lmk-nav-panel-h::before {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
}

/* Items get more breathing room and an active-row accent. */
.lmk-nav-item-rich {
    position: relative;
    display: block;
    padding: 0.6rem 0.7rem;
    border-radius: 0.4rem;
    color: #fff;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
/*
   Subtle purple dot bullet before each rich nav link. Sized so the
   list reads as clearly bulleted on dark surfaces (megapane), then
   brightens and scales on hover. Uses the lighter on-dark purple
   (#a78bfa) at high opacity rather than the brand purple at low
   opacity, which on a dark background reads as almost invisible.
*/
.lmk-nav-item-rich {
    padding-left: 1.4rem;
}
.lmk-nav-item-rich::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    /* Anchored to the first line of title text (padding-top 0.6rem +
       half the title line-height ~0.6rem) so the bullet stays aligned
       with the label whether the item has a description, an injected
       external-link icon, or wraps across lines. */
    top: 1.2rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a78bfa;
    transform: translateY(-50%);
    opacity: 0.85;
    transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
}
.lmk-nav-item-rich:hover,
.lmk-nav-item-rich:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.lmk-nav-item-rich:hover::before,
.lmk-nav-item-rich:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
}
.lmk-nav-item-rich-title {
    display: block;
    font-family: var(--lmk-font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}
.lmk-nav-item-rich-desc {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--lmk-on-dark-3);
}

/* Footer strip: same surface as panel, stronger CTA. */
.lmk-nav-panel-foot {
    grid-column: 1 / -1;
    margin: 0.6rem -0.4rem -0.2rem;
    padding: 0.85rem 0.4rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lmk-nav-panel-foot-cta {
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.6);
}
.lmk-nav-panel-foot-cta:hover,
.lmk-nav-panel-foot-cta:focus-visible {
    background: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%);
    color: #fff;
    transform: translateY(-1px);
}

/* ============================================================
   Z. Unified-style normalisers for imported content.
   Scoped under .lmk-imported-content so they don't touch our
   Razor pages. The goal: make every imported page LOOK like it
   was designed inside our system, regardless of what Elementor
   markup the source HTML carries.
   ============================================================ */

/* ---- Typography ----
   Force our display/sans/mono families and our colour palette on
   every text element inside imported content. Per-page Elementor
   <style> blocks set arbitrary fonts and colours; these rules win. */
.lmk-imported-content h1,
.lmk-imported-content h2,
.lmk-imported-content h3,
.lmk-imported-content h4,
.lmk-imported-content h5,
.lmk-imported-content h6 {
    font-family: var(--lmk-font-display) !important;
    color: var(--lmk-ink) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}
.lmk-imported-content h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important; }
.lmk-imported-content h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important; }
.lmk-imported-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem) !important; }
.lmk-imported-content h4 { font-size: 1.05rem !important; }
.lmk-imported-content h5 { font-size: 0.95rem !important; }
.lmk-imported-content h6 { font-size: 0.85rem !important; }

.lmk-imported-content p,
.lmk-imported-content li,
.lmk-imported-content blockquote {
    font-family: var(--lmk-font-sans) !important;
    color: var(--lmk-ink-2) !important;
    line-height: 1.6 !important;
}
.lmk-imported-content strong { color: var(--lmk-ink) !important; font-weight: 600 !important; }
.lmk-imported-content em { font-style: italic; }
.lmk-imported-content code,
.lmk-imported-content pre,
.lmk-imported-content kbd {
    font-family: var(--lmk-font-mono) !important;
}

/* Inline links inside body copy: subtle purple, underlined on hover. */
.lmk-imported-content a:not([class*="btn"]):not([class*="elementor-button"]):not(.lmk-cat-link):not(.lmk-nav-link):not(.lmk-brand):not(.lmk-footer-brand-mark):not(.lmk-social-link) {
    color: var(--lmk-purple) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: color 140ms ease, border-color 140ms ease;
}
.lmk-imported-content a:not([class*="btn"]):not([class*="elementor-button"]):not(.lmk-cat-link):not(.lmk-nav-link):not(.lmk-brand):hover {
    color: var(--lmk-purple-2) !important;
    border-bottom-color: var(--lmk-purple-line) !important;
}

/* ---- Buttons ----
   Map Elementor button classes onto our lmk-btn appearance. These
   override the per-page Elementor styles that would otherwise paint
   bright pill candy buttons. */
.lmk-imported-content .elementor-button,
.lmk-imported-content a.elementor-button-link,
.lmk-imported-content .wp-block-button__link,
.lmk-imported-content a.btn,
.lmk-imported-content button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-family: var(--lmk-font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    border-radius: var(--lmk-radius-md) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease !important;
    text-transform: none !important;
}
/* Primary-ish (filled) variants. Elementor frequently emits a class
   like "elementor-button-primary" or just relies on a background
   colour. We default-paint as ink-filled; explicit secondary classes
   below switch to outlined. */
.lmk-imported-content .elementor-button:not(.is-secondary):not(.btn-secondary):not([class*="ghost"]):not([class*="outline"]),
.lmk-imported-content .wp-block-button__link {
    background: var(--lmk-ink) !important;
    color: #fff !important;
    border-color: var(--lmk-ink) !important;
}
.lmk-imported-content .elementor-button:hover {
    background: var(--lmk-purple) !important;
    border-color: var(--lmk-purple) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.lmk-imported-content .elementor-button.is-secondary,
.lmk-imported-content .elementor-button.btn-secondary,
.lmk-imported-content .elementor-button[class*="ghost"],
.lmk-imported-content .elementor-button[class*="outline"] {
    background: transparent !important;
    color: var(--lmk-ink) !important;
    border-color: var(--lmk-line-strong) !important;
}

/* ---- Section backgrounds ----
   The WordPress export is full of arbitrary section colours. Snap
   them to our palette: anything resembling "purple", "lavender",
   "soft" gets paper-soft; anything dark gets ink. */
.lmk-imported-content .elementor-section[data-element_type="section"],
.lmk-imported-content .elementor-element[data-element_type="container"] {
    box-shadow: none !important;
}

/* ---- Cards / boxes ----
   Common imported card patterns. We cap their corner radius (anti-
   pill is already caught above) and harmonise borders. */
.lmk-imported-content .elementor-widget-wrap > .elementor-widget,
.lmk-imported-content [class*="-card"],
.lmk-imported-content [class*="card-"]:not(.lmk-cat-children):not(.lmk-card) {
    background: var(--lmk-paper-card) !important;
    border-radius: var(--lmk-radius-lg) !important;
}

/* ---- Lists ----
   Disc / arrow / check bullets cleaned up. */
.lmk-imported-content ul:not(.lmk-tier-list):not(.lmk-cat-list):not([class*="footer-social"]) {
    padding-left: 1.2rem;
}
.lmk-imported-content ul:not(.lmk-tier-list):not(.lmk-cat-list):not([class*="footer-social"]) > li {
    padding-left: 0.25rem;
}

/* ---- Forms (contact page) ----
   Input fields: subtle border, 6 px radius, focus = purple. */
.lmk-imported-content input[type="text"],
.lmk-imported-content input[type="email"],
.lmk-imported-content input[type="url"],
.lmk-imported-content input[type="tel"],
.lmk-imported-content input[type="number"],
.lmk-imported-content textarea,
.lmk-imported-content select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #fff !important;
    color: var(--lmk-ink) !important;
    border: 1px solid var(--lmk-line-strong) !important;
    border-radius: var(--lmk-radius-md) !important;
    padding: 0.7rem 0.9rem !important;
    font-family: var(--lmk-font-sans) !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.lmk-imported-content input:focus,
.lmk-imported-content textarea:focus,
.lmk-imported-content select:focus {
    outline: none !important;
    border-color: var(--lmk-purple) !important;
    box-shadow: 0 0 0 3px var(--lmk-purple-soft) !important;
}
.lmk-imported-content label {
    display: block;
    font-family: var(--lmk-font-sans);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--lmk-ink);
    margin-bottom: 0.4rem;
    letter-spacing: 0.01em;
}

/* ---- Stats / number blocks ----
   "100% Privacy" / "70+ Models" / "16 Local Memory" tiles that show
   on solution pages. Force consistent typography. */
.lmk-imported-content [class*="stat-"] [class*="-num"],
.lmk-imported-content [class*="stat-"] [class*="-number"],
.lmk-imported-content [class*="-stat"] [class*="-num"] {
    font-family: var(--lmk-font-display) !important;
    font-weight: 800 !important;
    color: var(--lmk-ink) !important;
    letter-spacing: -0.02em !important;
}
.lmk-imported-content [class*="stat-"] [class*="-label"],
.lmk-imported-content [class*="-stat"] [class*="-label"] {
    font-family: var(--lmk-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: var(--lmk-ink-3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* ---- Tables ----
   Common in comparison pages and pricing. Flatten them. */
.lmk-imported-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    font-family: var(--lmk-font-sans) !important;
}
.lmk-imported-content th,
.lmk-imported-content td {
    padding: 0.85rem 1rem !important;
    text-align: left;
    border-bottom: 1px solid var(--lmk-line);
    color: var(--lmk-ink) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}
.lmk-imported-content thead th {
    background: var(--lmk-paper-soft);
    font-family: var(--lmk-font-display) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lmk-ink-2) !important;
}
.lmk-imported-content tr:last-child td { border-bottom: 0; }

/* ---- HR rules ---- */
.lmk-imported-content hr {
    border: 0;
    border-top: 1px solid var(--lmk-line);
    margin: 2rem 0;
}

/* ---- Image polish ---- */
.lmk-imported-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* ---- Body padding ----
   Imported pages often start their hero immediately under the
   sticky header. Give every imported page a baseline top padding
   so the header doesn't bump the first heading. */
.lmk-imported-content {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   MEGA-MENU UNIFICATION (v10)
   ------------------------------------------------------------
   ONE pattern for every panel. Drops the rainbow per-section
   colors, the gradient-square heading badges, the per-column
   nth-child colour variants. Everything reads as a single,
   premium, dark-glass mega-menu. Inspired by Stripe, Linear,
   DevExpress: clean typography, generous whitespace, one brand
   accent (purple) for hover and headers.

   Panel pattern:
     .lmk-nav-panel--mega
       .lmk-nav-col           (fixed-width column, no internal scroll)
         .lmk-nav-group       (flat group, no card chrome)
           .lmk-nav-group-h   (small uppercase header)
           .lmk-nav-item-rich (row item, hover = bg + purple bar)
   ============================================================ */

/* Panel container: dark surface, generous padding, subtle border.
   The panel stays its restrained dark color; visual separation
   from any content underneath comes from the page-wide backdrop
   blur applied when the menu is open (see the body::after rule
   at the end of the file). */
.lmk-nav .lmk-nav-panel--mega {
    padding: 1.5rem 1.5rem 1.1rem;
    gap: 0;
    grid-template-columns: repeat(var(--cols, 2), minmax(240px, 1fr));
    background: linear-gradient(180deg, #1a1428 0%, #14101e 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 28px 60px -12px rgba(0, 0, 0, 0.65);
    z-index: 1001;
}

/* Column: simple flex stack, generous padding, NO card border,
   NO nth-child colour stripes. The vertical divider between
   columns is the only separator. */
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: 0.15rem 1.1rem;
    border-radius: 0;
    background: transparent;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col:first-child { padding-left: 0.35rem; }
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col:last-child { padding-right: 0.35rem; }
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col + .lmk-nav-col {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col::-webkit-scrollbar { width: 6px; }
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col::-webkit-scrollbar-track { background: transparent; }
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}
.lmk-nav .lmk-nav-panel--mega > .lmk-nav-col::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
}

/* Group: NO border, NO background card, just a stack. Multiple
   groups inside one column are separated by margin only. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-group + .lmk-nav-group {
    margin-top: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Group header: muted uppercase eyebrow. The link items are the
   primary content; headers are quiet labels above them. Reversing
   this (loud purple labels, quiet items) breaks the natural reading
   hierarchy. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-group-h {
    position: relative;
    display: block;
    margin: 0 0 0.65rem;
    padding: 0 0.7rem;
    border: 0;
    font-family: var(--lmk-font-display, 'Inter Tight', sans-serif);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--lmk-on-dark-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.15;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-group-h::before,
.lmk-nav .lmk-nav-panel--mega .lmk-nav-group-h::after {
    content: none;
}

/* Item: single unified style for every panel. Borderless row,
   subtle hover background, purple left-edge bar accent on
   hover. NO per-section colour, NO rainbow. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich {
    position: relative;
    display: flex;
    align-items: center;
    /* Larger vertical padding gives a ~44px target size, comfortably
       above the WCAG 24px minimum, and creates visible spacing between
       stacked rows so the list reads as discrete clickable items
       rather than a wall of underlined links. */
    padding: 0.7rem 0.9rem 0.7rem 0.9rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.86);
    background: transparent;
    transform: none;
    transition: background 140ms ease, color 140ms ease;
}
/* Small gap between sibling items so the hover wash doesn't visually
   merge two rows together. Keeps the rhythm even when the user is
   moving the cursor down a list. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich + .lmk-nav-item-rich {
    margin-top: 2px;
}
/*
   Megapane nav rows: subtle purple dot bullet before each row so a
   vertical stack reads as a scannable list. Brightens and scales up
   on hover. Replaces the prior left-edge vertical-bar accent which
   produced a wall-of-text feel when 8+ links stacked in a column.
*/
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    /* Aligned to the first line of title text (padding-top 0.7rem +
       half line-height ~0.58rem). Robust against external-link icon
       injection (lmk-nav.js) and against multi-line wrapping. */
    top: 1.28rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a78bfa;
    transform: translateY(-50%);
    opacity: 0.85;
    transition: opacity 140ms ease, background 140ms ease, transform 140ms ease;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich {
    padding-left: 1.4rem;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich:hover,
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich:focus-visible {
    background: rgba(124, 58, 237, 0.10);
    color: #fff;
    transform: none;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich:hover::before,
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich-title {
    display: block;
    font-family: var(--lmk-font-sans, 'Inter', sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: inherit;
    letter-spacing: 0;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich:hover .lmk-nav-item-rich-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Legacy .lmk-nav-panel-h: render in the new high-contrast title
   style with a short purple bar underneath. NO dot, NO halo. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-h {
    position: relative;
    display: block;
    margin: 0 0 0.85rem;
    padding: 0 0 0.55rem 0;
    border: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.15;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-h::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
    box-shadow: none;
}

/* Neutralize legacy .lmk-nav-section card chrome. The new HTML
   uses .lmk-nav-group; if any older markup still uses
   .lmk-nav-section, render it as a flat group too. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section {
    --section-color: #7c3aed;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section::before { content: none; }
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section + .lmk-nav-section {
    margin-top: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section-h {
    position: relative;
    display: block;
    margin: 0 0 0.85rem;
    padding: 0 0 0.55rem 0;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.15;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section-h::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
    box-shadow: none;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section .lmk-nav-item-rich::before {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section:hover {
    background: transparent;
    border-color: transparent;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-section:hover::before {
    opacity: 0;
    height: 0;
}

/* Panel footer (View all + CTA): unified styling. */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-foot {
    grid-column: 1 / -1;
    margin: 0.85rem -0.5rem -0.25rem;
    padding: 0.95rem 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-foot-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    padding: 0.45rem 0.65rem;
    border-radius: 6px;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-foot-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-foot-cta {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.95rem;
    border-radius: var(--lmk-radius-md, 6px);
    box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.6);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-foot-cta:hover,
.lmk-nav .lmk-nav-panel--mega .lmk-nav-panel-foot-cta:focus-visible {
    background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(124, 58, 237, 0.75);
}

/* ============================================================
   ACTIVE PAGE STATE
   ------------------------------------------------------------
   The menu HTML is shared across the whole site, so the active
   page is marked at runtime by /js/lmk-nav.js by setting:
     * aria-current="page"   on the matching .lmk-nav-link or
                              .lmk-nav-item-rich anchor
     * data-current-section  on the enclosing top-level
                              .lmk-nav-item (so the parent
                              trigger highlights too)
   ============================================================ */

/* Top-level menu trigger when the user is on a child page.
   Kept SUBTLE: just full-white text plus a thin soft-purple
   underline. No background tint, no bold-weight bump. The
   hover state still layers on top when pointing at the trigger,
   so the user gets feedback without the active link looking
   loud at rest. */
.lmk-nav .lmk-nav-item[data-current-section] > .lmk-nav-link,
.lmk-nav .lmk-nav-link[aria-current="page"] {
    color: #ffffff;
    box-shadow: inset 0 -2px 0 0 rgba(167, 139, 250, 0.85);
}

/* Inner panel item that matches the current page. Refined and
   premium: a thin 2px purple left bar plus a soft 4% white-tint
   background. Distinctly different from hover (which is purple-
   tinted) but no longer dominates the entire panel. Title bumps
   to pure white at semibold (600), not full bold (700). */
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich[aria-current="page"] {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich[aria-current="page"]::before {
    opacity: 1;
    transform: translateY(-50%) scale(1.5);
    background: #a78bfa;
}
.lmk-nav .lmk-nav-panel--mega .lmk-nav-item-rich[aria-current="page"] .lmk-nav-item-rich-title {
    color: #ffffff;
    font-weight: 600;
}

/* ============================================================
   FORM PRIMITIVES
   ------------------------------------------------------------
   Site-wide form controls. Use on any page that needs a form
   (community-license request, contact page, etc.). Do NOT
   write per-page form CSS.
   ============================================================ */
.lmk-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
    max-width: 760px;
}
.lmk-form > .lmk-field--full { grid-column: 1 / -1; }
.lmk-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.lmk-field-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--lmk-ink);
    letter-spacing: 0.01em;
}
.lmk-field-label .lmk-required {
    color: var(--lmk-purple);
    margin-left: 0.15rem;
}
.lmk-input,
.lmk-textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--lmk-font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--lmk-ink);
    background: #ffffff;
    border: 1px solid var(--lmk-line-strong);
    border-radius: var(--lmk-radius-md);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.lmk-textarea {
    min-height: 7rem;
    resize: vertical;
}
.lmk-input:hover,
.lmk-textarea:hover {
    border-color: var(--lmk-purple-line);
}
.lmk-input:focus,
.lmk-textarea:focus {
    outline: none;
    border-color: var(--lmk-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    background: #ffffff;
}
.lmk-input::placeholder,
.lmk-textarea::placeholder {
    color: var(--lmk-ink-3);
}
.lmk-form-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.4rem;
}
.lmk-field-help {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--lmk-ink-3);
}
/* Server-side validation message rendered by asp-validation-for. Empty
   when the field is valid, so it does not visually take space. */
.lmk-field-error {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #b91c1c;
    min-height: 0;
}
.lmk-field-error:empty { display: none; }
.lmk-input.input-validation-error,
.lmk-textarea.input-validation-error {
    border-color: #b91c1c;
    background: rgba(185, 28, 28, 0.04);
}
@media (max-width: 640px) {
    .lmk-form { grid-template-columns: 1fr; }
}

/* Form on dark sections: invert the surface so inputs stay
   readable when used inside .lmk-section.dark. */
.lmk-section.dark .lmk-field-label { color: rgba(255, 255, 255, 0.92); }
.lmk-section.dark .lmk-input,
.lmk-section.dark .lmk-textarea {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
}
.lmk-section.dark .lmk-input::placeholder,
.lmk-section.dark .lmk-textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
.lmk-section.dark .lmk-input:focus,
.lmk-section.dark .lmk-textarea:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
    background: rgba(255, 255, 255, 0.06);
}
.lmk-section.dark .lmk-field-help { color: rgba(255, 255, 255, 0.55); }

/* ============================================================
   COMPARISON MATRIX
   ------------------------------------------------------------
   Site-wide compare table primitive used on every LM-Kit-vs-X
   comparison page and on pricing/tier pages.

   Design intent: scannable. The prior styling painted every
   "yes" cell purple+bold, so a 40-row table read as a wall of
   purple noise with no contrast between supported, partial,
   and unsupported features. The new styling:

     - All cells left-aligned (easier to scan than centered)
     - Value text is normal weight in default ink color
     - LM-Kit column gets a faint purple tint to identify it
       as the product side
     - Supported features (.lmk-yes) get a small green check
       prefix instead of bold purple text — a glanceable
       affordance, not a styled value
     - Partial / community-supported features (.lmk-partial)
       get an amber prefix; unsupported (.lmk-no) get a muted
       dash
     - Section header rows are a soft band with a left-aligned
       eyebrow style; no longer centered loud-purple
     - Subtle zebra striping on tbody rows for scanability
     - Sticky header row inside scrollable tables
   ============================================================ */
.lmk-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.45;
    table-layout: fixed;
}
.lmk-compare thead th {
    text-align: left;
    padding: 1rem 1.15rem;
    font-family: var(--lmk-font-display);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lmk-ink);
    background: var(--lmk-paper-soft);
    border-bottom: 1px solid var(--lmk-line);
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Feature column gets ~44% of width; each value column ~28%. */
.lmk-compare thead th:first-child { width: 44%; }
.lmk-compare thead th + th        { width: 28%; }
/* Highlight the LM-Kit (product) column. By convention LM-Kit
   sits in the second column of every comparison page. */
.lmk-compare thead th:nth-child(2),
.lmk-compare tbody td:nth-child(2) {
    background: rgba(124, 58, 237, 0.04);
}
.lmk-compare thead th:nth-child(2) {
    color: var(--lmk-purple);
    background: rgba(124, 58, 237, 0.08);
}
.lmk-compare tbody td {
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--lmk-line);
    color: var(--lmk-ink-1);
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
}
/* Zebra striping on data rows, skipping section header rows. */
.lmk-compare tbody tr:nth-of-type(odd):not(.lmk-compare-section) td {
    background: rgba(0, 0, 0, 0.015);
}
.lmk-compare tbody tr:nth-of-type(odd):not(.lmk-compare-section) td:nth-child(2) {
    background: rgba(124, 58, 237, 0.06);
}
/* First column reads as a label; muted ink, normal weight. */
.lmk-compare tbody td:first-child {
    color: var(--lmk-ink-1);
    font-weight: 600;
}
/* Section header row: soft band, left-aligned eyebrow. */
.lmk-compare tbody tr.lmk-compare-section td {
    background: var(--lmk-paper-soft);
    font-family: var(--lmk-font-display);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lmk-ink-3);
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--lmk-line);
    text-align: left;
}
/*
   State indicators rendered as small glyphs prefixed to the cell
   text. The glyph is a ::before pseudo on the <td> itself; the
   <td> keeps display: table-cell so the table layout is not
   broken (a previous attempt with display: inline-block on
   .lmk-yes caused tbody cells to stack vertically). The pseudo
   is positioned inline at the left padding edge using the cell's
   intrinsic padding-left, not via absolute positioning, so it
   stays in the text flow.
*/
.lmk-compare tbody td.lmk-yes,
.lmk-compare tbody td.lmk-no,
.lmk-compare tbody td.lmk-partial {
    padding-left: 2.4em;
    position: relative;
    font-weight: 500;
    color: var(--lmk-ink-1);
}
.lmk-compare tbody td.lmk-yes::before,
.lmk-compare tbody td.lmk-no::before,
.lmk-compare tbody td.lmk-partial::before {
    position: absolute;
    left: 1.15rem;
    top: 0.85rem;
    font-weight: 800;
    line-height: 1.45;
}
.lmk-compare tbody td.lmk-yes::before     { content: '\2713'; color: #16a34a; }
.lmk-compare tbody td.lmk-partial::before { content: '\007E'; color: #d97706; }
.lmk-compare tbody td.lmk-no::before      { content: '\00D7'; color: var(--lmk-ink-3); }
.lmk-compare tbody td.lmk-no { color: var(--lmk-ink-3); font-weight: 500; }
/* On the highlighted (LM-Kit) column, check marks render in a
   slightly deeper green to read as confident product support. */
.lmk-compare tbody td:nth-child(2).lmk-yes::before { color: #15803d; }
/*
   .lmk-note is used in two contexts:
     - As a <span class="lmk-note"> inside a cell to add a small
       secondary note under the main value (e.g. "Yes" + "from 2026.1").
     - As a class on a <td class="lmk-note"> to render a whole cell
       as a quiet note (e.g. "Bug reports only", platform lists).
   We MUST NOT set display: block here because applying it to a <td>
   blockifies the cell and the table layout collapses into a vertical
   stack. Use color + size only; let block/inline come from the host
   element type. The span variant is naturally inline; the td variant
   stays table-cell.
*/
.lmk-compare .lmk-note {
    color: var(--lmk-ink-3);
    font-size: 0.86rem;
}
.lmk-compare tbody td.lmk-note {
    color: var(--lmk-ink-3);
}
/* If a note span needs to sit below a value, the consumer can wrap
   it in a block-level element or use a <br> directly in the markup. */
@media (max-width: 720px) {
    .lmk-compare { font-size: 0.85rem; }
    .lmk-compare thead th,
    .lmk-compare tbody td { padding: 0.7rem 0.8rem; }
    .lmk-compare thead th:first-child { width: 40%; }
    .lmk-compare thead th + th        { width: 30%; }
}

/* ============================================================
   TABS
   ------------------------------------------------------------
   Site-wide tabbed-content primitive. Use anywhere we need to
   show one of N alternative views (code examples by language,
   matrix tabs, etc.) instead of stacking. Behavior is wired up
   by lmkInitTabs() in /js/lmk-nav.js: clicking a button toggles
   aria-selected on the buttons and `hidden` on the panels.
   Markup contract:
     <div class="lmk-tabs">
       <div class="lmk-tabs-nav" role="tablist">
         <button class="lmk-tab" role="tab" aria-selected="true">A</button>
         <button class="lmk-tab" role="tab">B</button>
       </div>
       <div class="lmk-tabs-panels">
         <div class="lmk-tabs-panel" role="tabpanel">...</div>
         <div class="lmk-tabs-panel" role="tabpanel" hidden>...</div>
       </div>
     </div>
   ============================================================ */
.lmk-tabs {
    width: 100%;
    min-width: 0;
}
.lmk-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--lmk-line);
    margin-bottom: 1.1rem;
}
.lmk-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0.65rem 1rem;
    margin: 0;
    margin-bottom: -1px;
    color: var(--lmk-ink-3);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
    border-radius: var(--lmk-radius-sm) var(--lmk-radius-sm) 0 0;
}
.lmk-tab:hover {
    color: var(--lmk-ink);
    background: var(--lmk-paper-soft);
}
.lmk-tab[aria-selected="true"] {
    color: var(--lmk-purple);
    border-bottom-color: var(--lmk-purple);
    background: transparent;
}
.lmk-tab:focus-visible {
    outline: 2px solid var(--lmk-purple);
    outline-offset: 2px;
}
.lmk-tabs-panels {
    width: 100%;
    min-width: 0;
}
.lmk-tabs-panel {
    width: 100%;
    min-width: 0;
}
.lmk-tabs-panel[hidden] { display: none; }

/* Intro paragraph inside a tab panel (used by the OCR-style pattern
   where each tab has a short prose lead above the codecard). The
   default .lmk-section-lead font is sized for a section hero; inside
   a tab panel it reads too big and floats too close to the tab bar.
   Tighten the size, soften the color, give it a left brand-stripe
   accent so it visually anchors to the tab above and feels like an
   intentional caption rather than orphan text. */
.lmk-tabs-panel > .lmk-section-lead:first-child {
    position: relative;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--lmk-ink-2);
    margin: 1.1rem 0 1.1rem;
    padding: 0.15rem 0 0.15rem 0.9rem;
    border-left: 2px solid var(--lmk-purple-line);
    max-width: 78ch;
}
.lmk-tabs-panel > .lmk-section-lead:first-child code {
    font-size: 0.88em;
    padding: 0.08em 0.35em;
    background: var(--lmk-purple-soft);
    border-radius: var(--lmk-radius-xs);
    color: var(--lmk-purple);
}
/* On dark sections, lighten the accent so it reads on the dark
   background. */
.lmk-section.dark .lmk-tabs-panel > .lmk-section-lead:first-child {
    color: var(--lmk-on-dark-2);
    border-left-color: rgba(167, 139, 250, 0.45);
}
.lmk-section.dark .lmk-tabs-panel > .lmk-section-lead:first-child code {
    background: rgba(167, 139, 250, 0.16);
    color: #d6bcfa;
}

/* Dark-section variant: lighter borders + light text. */
.lmk-section.dark .lmk-tabs-nav { border-bottom-color: rgba(255, 255, 255, 0.1); }
.lmk-section.dark .lmk-tab { color: rgba(255, 255, 255, 0.55); }
.lmk-section.dark .lmk-tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.04); }
.lmk-section.dark .lmk-tab[aria-selected="true"] {
    color: #ffffff;
    border-bottom-color: #a78bfa;
}

/* ============================================================
   BLOG  (index, article hero, prose, cards)
   ============================================================ */

/* ---- Blog index hero ---- */
.lmk-blog-index-hero {
    padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
    background:
        radial-gradient(60% 80% at 80% 0%, rgba(124, 58, 237, 0.08), transparent 70%),
        radial-gradient(50% 60% at 0% 30%, rgba(192, 38, 211, 0.06), transparent 70%),
        var(--lmk-paper);
}
.lmk-blog-index-hero .lmk-container { max-width: 980px; }
.lmk-blog-index-title {
    margin: 0.6rem 0 0;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
}
.lmk-blog-index-title em {
    font-style: normal;
    background: linear-gradient(135deg, #6d28d9 0%, #c026d3 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.lmk-blog-index-lead {
    margin: 1.2rem 0 0;
    max-width: 65ch;
    font-size: clamp(1.05rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    color: var(--lmk-ink-2);
}

/* ---- Blog featured card (latest post) ---- */
.lmk-blog-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(1.4rem, 2.5vw, 2.6rem);
    align-items: center;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.lmk-blog-feature:hover {
    border-color: var(--lmk-line-strong);
    box-shadow: var(--lmk-shadow-2);
}
.lmk-blog-feature-media {
    display: block;
    aspect-ratio: 1.91 / 1;
    background: linear-gradient(135deg, #f5f1ff 0%, #faf7ff 100%);
    overflow: hidden;
}
.lmk-blog-feature-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 400ms ease;
}
.lmk-blog-feature:hover .lmk-blog-feature-media img { transform: scale(1.025); }
.lmk-blog-feature-body {
    padding: clamp(1.4rem, 2.4vw, 2.4rem);
    display: flex; flex-direction: column;
}
.lmk-blog-feature-title {
    margin: 0.55rem 0 0;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.lmk-blog-feature-title a { color: inherit; }
.lmk-blog-feature-title a:hover { color: var(--lmk-purple); }
.lmk-blog-feature-desc {
    margin: 0.85rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--lmk-ink-2);
}
@media (max-width: 800px) {
    .lmk-blog-feature { grid-template-columns: 1fr; }
}

/* ---- Blog meta line (date, reading time) ---- */
.lmk-blog-meta {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--lmk-ink-3);
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
}
.lmk-blog-meta time { color: var(--lmk-ink-3); }
.lmk-blog-meta span[aria-hidden] { opacity: 0.5; }

/* ---- Blog timeline (alternating left/right cards) ----
   The article catalog used to be a flat 3-col grid. The timeline
   layout puts each post on its own line, alternating left/right
   like a visual conversation, connected by a soft purple gradient
   line that flows down the page through tiny dot connectors.
   On mobile the line shifts to the left edge and cards stack. */
.lmk-blog-timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
}
.lmk-blog-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(124, 58, 237, 0.18) 6%,
        rgba(192, 38, 211, 0.32) 50%,
        rgba(124, 58, 237, 0.18) 94%,
        transparent 100%
    );
    pointer-events: none;
}
.lmk-blog-timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.4rem, 3vw, 3.2rem);
    align-items: center;
    margin: clamp(2rem, 3vw, 3.2rem) 0;
    position: relative;
}
.lmk-blog-timeline-item:first-child { margin-top: 0; }
.lmk-blog-timeline-item:last-child  { margin-bottom: 0; }
/* Connector dot anchored on the central spine, between the columns */
.lmk-blog-timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    background: var(--lmk-purple);
    border-radius: 50%;
    box-shadow:
        0 0 0 4px var(--lmk-paper, #ffffff),
        0 0 0 5px rgba(124, 58, 237, 0.2),
        0 6px 18px -4px rgba(124, 58, 237, 0.45);
    transition: transform 200ms ease, box-shadow 200ms ease;
    z-index: 2;
}
.lmk-blog-timeline-item:hover::before {
    transform: scale(1.25);
    box-shadow:
        0 0 0 4px var(--lmk-paper, #ffffff),
        0 0 0 6px rgba(124, 58, 237, 0.35),
        0 8px 22px -4px rgba(124, 58, 237, 0.55);
}
/* Thin connector "branch" from the spine to the card edge */
.lmk-blog-timeline-item .lmk-blog-z-card { position: relative; }
.lmk-blog-timeline-item .lmk-blog-z-card::after {
    content: '';
    position: absolute;
    top: 50%;
    width: clamp(0.7rem, 1.5vw, 1.6rem);
    height: 1px;
    background: rgba(124, 58, 237, 0.32);
    pointer-events: none;
}
/* Odd item: card on LEFT, branch points to right edge of card */
.lmk-blog-timeline-item:nth-child(odd) > .lmk-blog-z-card {
    grid-column: 1;
}
.lmk-blog-timeline-item:nth-child(odd) > .lmk-blog-z-card::after {
    right: calc(-1 * clamp(0.7rem, 1.5vw, 1.6rem));
}
/* Even item: card on RIGHT, branch points to left edge */
.lmk-blog-timeline-item:nth-child(even) > .lmk-blog-z-card {
    grid-column: 2;
}
.lmk-blog-timeline-item:nth-child(even) > .lmk-blog-z-card::after {
    left: calc(-1 * clamp(0.7rem, 1.5vw, 1.6rem));
}
/* Card itself uses the same chrome as .lmk-blog-card */
.lmk-blog-z-card {
    display: flex;
    flex-direction: column;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    color: inherit;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.lmk-blog-z-card:hover {
    border-color: var(--lmk-line-strong);
    transform: translateY(-3px);
    box-shadow: var(--lmk-shadow-2);
}
.lmk-blog-z-media {
    display: block;
    aspect-ratio: 1.91 / 1;
    overflow: hidden;
    background: radial-gradient(120% 100% at 0% 0%, #1f1735 0%, #14102b 60%, #0c0820 100%);
}
.lmk-blog-z-media img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 400ms ease;
}
.lmk-blog-z-card:hover .lmk-blog-z-media img { transform: scale(1.025); }
.lmk-blog-z-body {
    padding: 1.4rem 1.5rem 1.6rem;
    display: flex; flex-direction: column;
    flex: 1;
}
.lmk-blog-z-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--lmk-ink-1);
}
.lmk-blog-z-card:hover .lmk-blog-z-title { color: var(--lmk-purple); }
.lmk-blog-z-desc {
    margin: 0.65rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--lmk-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Responsive: collapse to single column at narrow widths.
   The spine moves to the left edge and connector branches still
   point from spine to card. */
@media (max-width: 800px) {
    .lmk-blog-timeline::before {
        left: 22px;
        margin-left: 0;
    }
    .lmk-blog-timeline-item {
        grid-template-columns: 1fr;
        padding-left: 48px;
        gap: 0;
    }
    .lmk-blog-timeline-item::before {
        left: 22px;
        top: 24px;
        margin: 0 0 0 -6px;
    }
    .lmk-blog-timeline-item:nth-child(odd)  > .lmk-blog-z-card,
    .lmk-blog-timeline-item:nth-child(even) > .lmk-blog-z-card {
        grid-column: 1;
    }
    .lmk-blog-timeline-item:nth-child(odd)  > .lmk-blog-z-card::after,
    .lmk-blog-timeline-item:nth-child(even) > .lmk-blog-z-card::after {
        left: -26px;
        right: auto;
        top: 24px;
        width: 26px;
    }
}

/* ---- Blog cards grid (legacy fallback, kept for compatibility) ---- */
.lmk-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2.4rem 1.8rem;
}
.lmk-blog-card {
    display: flex; flex-direction: column;
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    color: inherit;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.lmk-blog-card:hover {
    border-color: var(--lmk-line-strong);
    transform: translateY(-3px);
    box-shadow: var(--lmk-shadow-2);
}
.lmk-blog-card-media {
    display: block;
    aspect-ratio: 1.91 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f1ff 0%, #faf7ff 100%);
}
.lmk-blog-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 400ms ease;
}
.lmk-blog-card:hover .lmk-blog-card-media img { transform: scale(1.025); }
.lmk-blog-card-body {
    padding: 1.25rem 1.3rem 1.4rem;
    display: flex; flex-direction: column;
    flex: 1;
}
.lmk-blog-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.lmk-blog-card:hover .lmk-blog-card-title { color: var(--lmk-purple); }
.lmk-blog-card-desc {
    margin: 0.65rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--lmk-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Newsletter form ---- */
.lmk-newsletter {
    display: flex; gap: 0.55rem;
    max-width: 480px; margin: 0 auto;
    flex-wrap: wrap;
}
.lmk-newsletter-input {
    flex: 1 1 240px;
    padding: 0.7rem 0.95rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--lmk-radius-sm);
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
}
.lmk-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.45); }
.lmk-newsletter-input:focus {
    outline: 2px solid var(--lmk-purple);
    outline-offset: 2px;
    border-color: rgba(255, 255, 255, 0.24);
}

/* ---- Article hero (single post) ---- */
.lmk-blog-hero {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(1.8rem, 3vw, 2.6rem);
    background:
        radial-gradient(60% 80% at 80% 0%, rgba(124, 58, 237, 0.07), transparent 70%),
        var(--lmk-paper);
}
.lmk-blog-hero-inner { max-width: 760px; }
.lmk-blog-eyebrow {
    margin: 0 0 1.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--lmk-ink-3);
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
}
.lmk-blog-eyebrow a {
    color: var(--lmk-purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.74rem;
}
.lmk-blog-eyebrow a:hover { text-decoration: underline; }
.lmk-blog-eyebrow span[aria-hidden] { opacity: 0.5; }
.lmk-blog-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}
.lmk-blog-title em {
    font-style: normal;
    background: linear-gradient(135deg, #6d28d9 0%, #c026d3 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.lmk-blog-lead {
    margin: 1.2rem 0 0;
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    line-height: 1.55;
    color: var(--lmk-ink-2);
}

/* ---- Cover image (between hero and body) ---- */
.lmk-blog-cover-wrap {
    padding: 0 0 clamp(1.8rem, 3vw, 2.6rem);
    background: var(--lmk-paper);
}
.lmk-blog-cover-wrap .lmk-container { max-width: 980px; }
.lmk-blog-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--lmk-radius-lg);
    border: 1px solid var(--lmk-line);
    box-shadow: var(--lmk-shadow-2);
}

/* ---- Article footer nav ---- */
.lmk-blog-foot {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--lmk-line);
    display: flex; gap: 0.6rem; justify-content: space-between;
    flex-wrap: wrap;
    max-width: 760px;
    margin-left: auto; margin-right: auto;
}

/* ============================================================
   PROSE  (typography-first wrapper for long-form article body)
   ============================================================ */
.lmk-prose {
    max-width: 720px;
    margin: 0 auto;
    color: var(--lmk-ink-2);
    font-size: 1.05rem;
    line-height: 1.7;
    word-wrap: break-word;
}
.lmk-prose > * + * { margin-top: 1.1em; }
.lmk-prose p { margin: 0; }
.lmk-prose h2 {
    margin-top: 2.6em;
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--lmk-ink-1);
}
.lmk-prose h3 {
    margin-top: 2em;
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--lmk-ink-1);
}
.lmk-prose h4 {
    margin-top: 1.6em;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lmk-ink-1);
}
.lmk-prose strong, .lmk-prose b { color: var(--lmk-ink-1); font-weight: 700; }
.lmk-prose em, .lmk-prose i { font-style: italic; }
.lmk-prose a {
    color: var(--lmk-purple);
    font-weight: 500;
    border-bottom: 1px solid rgba(124, 58, 237, 0.25);
    transition: border-color 140ms ease, color 140ms ease;
}
.lmk-prose a:hover {
    color: var(--lmk-purple-2, #6d28d9);
    border-bottom-color: rgba(124, 58, 237, 0.6);
}
.lmk-prose ul, .lmk-prose ol {
    padding-left: 1.4em;
    display: grid;
    gap: 0.5em;
}
.lmk-prose li { line-height: 1.6; }
.lmk-prose li::marker { color: var(--lmk-purple); }
.lmk-prose blockquote {
    margin: 1.6em 0;
    padding: 0.4em 1.2em;
    border-left: 3px solid var(--lmk-purple);
    color: var(--lmk-ink-2);
    font-style: italic;
}
.lmk-prose code {
    font-family: var(--lmk-font-mono);
    font-size: 0.92em;
    padding: 0.12em 0.4em;
    background: rgba(124, 58, 237, 0.08);
    color: var(--lmk-ink-1);
    border-radius: 4px;
}
.lmk-prose .lmk-codecard {
    margin: 1.5em 0;
}
.lmk-prose .lmk-codecard code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}
.lmk-prose-figure {
    margin: 2em 0;
}
.lmk-prose-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--lmk-radius-lg);
    border: 1px solid var(--lmk-line);
}
.lmk-prose-figure figcaption {
    margin-top: 0.7em;
    font-size: 0.88rem;
    color: var(--lmk-ink-3);
    text-align: center;
    font-style: italic;
}
.lmk-prose-hr {
    margin: 2.5em 0;
    border: 0;
    height: 1px;
    background: var(--lmk-line);
}
.lmk-prose-cta {
    margin: 1.5em 0;
}
.lmk-prose-video {
    margin: 2em 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
}
.lmk-prose-video iframe {
    width: 100%; height: 100%; border: 0;
}
.lmk-prose-links {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.4em;
}
.lmk-prose-card {
    margin: 1.6em 0;
    padding: 1.2em 1.4em;
    background: var(--lmk-paper-card, #ffffff);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    display: flex;
    align-items: flex-start;
    gap: 1.2em;
}
.lmk-prose-card-avatar {
    width: 64px; height: 64px;
    border-radius: var(--lmk-radius-sm, 6px);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--lmk-line);
}
.lmk-prose-card-body { flex: 1; min-width: 0; }
.lmk-prose-card-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lmk-ink-1);
}
.lmk-prose-card-role {
    margin: 0.2em 0 0.6em;
    font-size: 0.85rem;
    color: var(--lmk-purple);
    font-weight: 600;
}
.lmk-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 0.95em;
}
.lmk-prose th, .lmk-prose td {
    padding: 0.7em 0.9em;
    border: 1px solid var(--lmk-line);
    text-align: left;
}
.lmk-prose th {
    background: var(--lmk-paper-soft, #faf7ff);
    font-weight: 700;
    color: var(--lmk-ink-1);
}
@media (max-width: 700px) {
    .lmk-prose { font-size: 1rem; }
}

/* ============================================================
   PROSE LEGACY BRIDGE CLASSES
   ------------------------------------------------------------
   The blog articles were authored in WordPress / Elementor with a
   pile of utility classes (`.icon`, `.highlight`, `.tldr`, `.cta`,
   `.tags`, `.tag`, `.resource`, `.feature-banner`, `.comparison-*`,
   `.file-tree`, `.checklist`, ...). The original CSS was a giant
   `<style>` block we strip when extracting article body. Without
   styling, those nodes default to:
   - Inline SVGs without width/height filling the entire column
   - Callout boxes losing their bordered look
   - Code chrome (.code-header, .code-dots) showing as raw text
   This block adds tasteful, design-system-aligned styles for the
   most common legacy classes so articles render properly.
   ============================================================ */

/* --- Constrain inline SVG icons inside prose -------------- */
.lmk-prose svg:not([width]):not([height]) {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.12em;
}
.lmk-prose h2 .icon svg,
.lmk-prose h3 .icon svg,
.lmk-prose h4 .icon svg,
.lmk-prose .icon svg {
    width: 1em;
    height: 1em;
    color: var(--lmk-purple);
    vertical-align: -0.12em;
}
.lmk-prose h2 .icon,
.lmk-prose h3 .icon,
.lmk-prose h4 .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.45em;
    color: var(--lmk-purple);
}

/* --- Callout: TL;DR ------------------------------------- */
.lmk-prose .tldr {
    margin: 2em 0;
    padding: 1.25em 1.4em;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(192, 38, 211, 0.04) 100%);
    border: 1px solid var(--lmk-purple-line, rgba(124, 58, 237, 0.18));
    border-left: 4px solid var(--lmk-purple);
    border-radius: 0 var(--lmk-radius-lg) var(--lmk-radius-lg) 0;
    font-size: 0.97em;
}
.lmk-prose .tldr strong { color: var(--lmk-ink-1); }

/* --- Callout: Highlight (with leading icon) -------------- */
.lmk-prose .highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.85em;
    margin: 1.6em 0;
    padding: 1.1em 1.3em;
    background: rgba(124, 58, 237, 0.05);
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-left: 3px solid var(--lmk-purple);
    border-radius: 0 var(--lmk-radius-md) var(--lmk-radius-md) 0;
}
.lmk-prose .highlight-icon {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    color: var(--lmk-purple);
    margin-top: 0.05em;
}
.lmk-prose .highlight-content { flex: 1; min-width: 0; }
.lmk-prose .highlight-content strong { color: var(--lmk-ink-1); }

/* --- Demo link box -------------------------------------- */
.lmk-prose .demo-link {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 1.6em 0;
    padding: 0.95em 1.2em;
    background: linear-gradient(135deg, #faf7ff 0%, #f5f1ff 100%);
    border: 1px solid var(--lmk-purple-line, rgba(124, 58, 237, 0.18));
    border-left: 4px solid var(--lmk-purple);
    border-radius: 0 var(--lmk-radius-md) var(--lmk-radius-md) 0;
}
.lmk-prose .demo-link .demo-icon {
    width: 1.3em;
    height: 1.3em;
    color: var(--lmk-purple);
    flex-shrink: 0;
}
.lmk-prose .demo-link strong { color: var(--lmk-ink-1); }

/* --- Tags row ------------------------------------------- */
.lmk-prose .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45em;
    margin: 1.4em 0;
    padding: 0;
    list-style: none;
}
.lmk-prose .tag {
    display: inline-flex;
    align-items: center;
    padding: 0.32em 0.7em;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: var(--lmk-radius-sm, 4px);
    font-size: 0.78em;
    font-weight: 600;
    color: var(--lmk-purple);
    line-height: 1.2;
}

/* --- Resources grid -------------------------------------
   Clean left-aligned cards with a small leading icon, bold
   title, and a trailing arrow that emerges on hover. White
   background (NO purple tint), sharp borders, generous
   padding so each item reads as a deliberate destination. */
.lmk-prose .resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7em;
    margin: 1.8em 0;
    padding: 0;
    list-style: none;
}
.lmk-prose .resource {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.95em 1.05em;
    padding-right: 2.2em;
    background: #ffffff;
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
    font-size: 0.94em;
    font-weight: 600;
    color: var(--lmk-ink-1);
    text-align: left;
    text-decoration: none;
    border-bottom: 1px solid var(--lmk-line);
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, transform 180ms ease;
    line-height: 1.3;
}
.lmk-prose .resource::after {
    content: '\2192';
    position: absolute;
    right: 0.95em;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    color: var(--lmk-purple);
    font-size: 1em;
    font-weight: 600;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}
.lmk-prose .resource:hover,
.lmk-prose .resource:focus-visible {
    border-color: var(--lmk-purple);
    color: var(--lmk-purple);
    background: rgba(124, 58, 237, 0.025);
    transform: translateY(-1px);
}
.lmk-prose .resource:hover::after,
.lmk-prose .resource:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.lmk-prose .resource-icon {
    width: 1.05em;
    height: 1.05em;
    color: var(--lmk-purple);
    flex-shrink: 0;
    opacity: 0.8;
}
.lmk-prose .resource:hover .resource-icon { opacity: 1; }

/* --- Feature banner ------------------------------------ */
.lmk-prose .feature-banner {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin: 2em 0;
    padding: 1.6em 1.8em;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: var(--lmk-radius-lg);
    color: #ffffff;
}
.lmk-prose .feature-banner .banner-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: var(--lmk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lmk-prose .feature-banner .banner-icon svg {
    width: 28px; height: 28px;
    color: #ffffff;
}
.lmk-prose .feature-banner h3 {
    margin: 0 0 0.4em;
    color: #ffffff;
    font-size: 1.15em;
}
.lmk-prose .feature-banner p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.93em;
}

/* --- Comparison output (before / after) ------------------ */
.lmk-prose .comparison-output {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin: 1.6em 0;
}
@media (max-width: 700px) {
    .lmk-prose .comparison-output { grid-template-columns: 1fr; }
}
.lmk-prose .comparison-card {
    padding: 1.1em 1.2em;
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-md);
}
.lmk-prose .comparison-card.before {
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-color: #fecaca;
}
.lmk-prose .comparison-card.after {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: #bbf7d0;
}
.lmk-prose .comparison-label {
    margin: 0 0 0.6em;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lmk-prose .comparison-card.before .comparison-label { color: #dc2626; }
.lmk-prose .comparison-card.after  .comparison-label { color: #16a34a; }

/* --- File tree (folder / file listing in code-style box) -- */
.lmk-prose .file-tree {
    margin: 1.6em 0;
    padding: 1.1em 1.3em;
    background: #1e1b2e;
    color: #e6e1f7;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--lmk-radius-lg);
    font-family: var(--lmk-font-mono);
    font-size: 0.88em;
    line-height: 1.7;
    overflow-x: auto;
}
.lmk-prose .file-tree .folder      { color: #fbbf24; }
.lmk-prose .file-tree .file        { color: #86efac; }
.lmk-prose .file-tree .file-comment{ color: #94a3b8; font-style: italic; }

/* --- Checklist ----------------------------------------- */
.lmk-prose .checklist {
    list-style: none;
    padding: 0;
    margin: 1.4em 0;
    display: grid;
    gap: 0.5em;
}
.lmk-prose .checklist li {
    position: relative;
    padding-left: 1.7em;
    line-height: 1.55;
}
.lmk-prose .checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.1em; height: 1.1em;
    border: 1.5px solid var(--lmk-purple);
    border-radius: var(--lmk-radius-sm, 4px);
    background: rgba(124, 58, 237, 0.06);
}

/* --- Inline CTA ------------------------------------------ */
.lmk-prose .cta {
    margin: 2.5em 0;
    padding: 2em 2em;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: var(--lmk-radius-lg);
    color: #ffffff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lmk-prose .cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6d28d9 0%, #c026d3 100%);
}
.lmk-prose .cta h3 {
    margin: 0 0 0.5em;
    color: #ffffff;
    font-size: 1.25em;
}
.lmk-prose .cta p {
    margin: 0 0 1.1em;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95em;
}
.lmk-prose .cta-btn {
    display: inline-block;
    padding: 0.7em 1.4em;
    margin: 0.25em;
    background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
    color: #ffffff !important;
    font-weight: 600;
    border-radius: var(--lmk-radius-md);
    border: 0;
    border-bottom: 0;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.lmk-prose .cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -8px rgba(124, 58, 237, 0.6);
}
.lmk-prose .cta-btn.outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: none;
}
.lmk-prose .cta-btn.outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- Code chrome (legacy WordPress code block) ----------- */
.lmk-prose .code-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.95em;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--lmk-font-mono);
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.55);
}
.lmk-prose .code-dots {
    display: flex; gap: 6px;
}
.lmk-prose .code-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
}
.lmk-prose .code-dot.red    { background: #ff5f57; }
.lmk-prose .code-dot.yellow { background: #febc2e; }
.lmk-prose .code-dot.green  { background: #28c840; }
.lmk-prose .code-lang {
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* --- Inline code-token spans inside <pre><code> ---------- */
.lmk-prose pre code .keyword  { color: #c084fc; font-weight: 500; }
.lmk-prose pre code .type     { color: #38bdf8; }
.lmk-prose pre code .string   { color: #86efac; }
.lmk-prose pre code .comment  { color: #64748b; font-style: italic; }
.lmk-prose pre code .method   { color: #fbbf24; }
.lmk-prose pre code .property { color: #f472b6; }
.lmk-prose pre code .number   { color: #fb923c; }
.lmk-prose pre code .operator { color: #94a3b8; }
.lmk-prose pre {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--lmk-radius-lg);
    padding: 1.1em 1.3em;
    overflow-x: auto;
    font-family: var(--lmk-font-mono);
    font-size: 0.88em;
    line-height: 1.65;
}
.lmk-prose pre code { background: transparent; padding: 0; color: inherit; }

/* --- Misc utility (sample-sub, sub, muted) -------------- */
.lmk-prose .sample-sub,
.lmk-prose .sub,
.lmk-prose .muted {
    color: var(--lmk-ink-3);
    font-size: 0.92em;
}

/* ============================================================
   TEAM GRID  (company page premium team cards)
   ============================================================ */
.lmk-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.4rem;
}
.lmk-team-card {
    background: var(--lmk-paper-card);
    border: 1px solid var(--lmk-line);
    border-radius: var(--lmk-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 250ms ease, border-color 200ms ease, box-shadow 250ms ease;
    position: relative;
}
.lmk-team-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed 0%, #c026d3 100%);
    opacity: 0;
    transition: opacity 200ms ease;
}
.lmk-team-card:hover {
    transform: translateY(-4px);
    border-color: var(--lmk-purple-line, var(--lmk-line-strong));
    box-shadow: 0 24px 48px -16px rgba(124, 58, 237, 0.18);
}
.lmk-team-card:hover::before { opacity: 1; }
.lmk-team-card--featured {
    border-color: var(--lmk-purple-line, var(--lmk-line-strong));
    background: linear-gradient(135deg, #ffffff 0%, #faf7ff 100%);
}
.lmk-team-card--featured::before { opacity: 0.55; }
.lmk-team-card--ghost {
    background: linear-gradient(135deg, #faf7ff 0%, #f5f1ff 100%);
    border-style: dashed;
}
.lmk-team-photo {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f1ff 0%, #ede4ff 100%);
}
.lmk-team-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.lmk-team-card:hover .lmk-team-photo img {
    transform: scale(1.04);
}
.lmk-team-photo--placeholder {
    display: flex; align-items: center; justify-content: center;
    color: rgba(124, 58, 237, 0.35);
}
.lmk-team-photo--placeholder svg {
    width: 30%; height: 30%;
}
.lmk-team-body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex; flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.lmk-team-name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--lmk-ink-1);
}
.lmk-team-role {
    margin: 0;
    font-family: var(--lmk-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lmk-purple);
}
.lmk-team-bio {
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--lmk-ink-2);
    flex: 1;
}
.lmk-team-link {
    margin-top: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    color: var(--lmk-purple);
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
    padding-bottom: 1px;
    transition: color 150ms ease, border-color 150ms ease;
}
.lmk-team-link:hover,
.lmk-team-link:focus-visible {
    color: #6d28d9;
    border-bottom-color: rgba(124, 58, 237, 0.7);
}
.lmk-team-link svg { width: 14px; height: 14px; }

/* ============================================================
   RESPONSIVE OVERRIDE for inline grid-template-columns
   ------------------------------------------------------------
   Many migrated pages use inline `style="grid-template-columns:
   repeat(N, ...)"` for hero / stat / pillar grids. On narrow
   viewports those grids stayed at 3-6 columns, producing 80px
   columns where every word wrapped onto its own line. This
   block forces them to collapse to 1 column on phones and to
   2 columns on tablets, regardless of inline value.
   `!important` is required because `style=""` has higher
   specificity than any selector.
   ============================================================ */
@media (max-width: 720px) {
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(6"],
    [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 721px) and (max-width: 940px) {
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(6"],
    [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ============================================================
   PAGE BACKDROP when a top-nav menu is open.
   ------------------------------------------------------------
   When the user opens a desktop dropdown ([data-open] is set by
   lmk-nav.js, or :focus-within fires on keyboard navigation),
   we drop a translucent dark layer over the rest of the page
   with a backdrop-filter blur. This makes the menu read as a
   spotlit element on top, no matter what color the page content
   underneath happens to be (codecards, headlines, hero
   gradients). The header itself stays visible above the
   backdrop so the menu items remain clickable and the active
   trigger is clearly anchored.
   ============================================================ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 20, 0.45);
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 999;
}
body:has(.lmk-nav-item[data-open])::after,
body:has(.lmk-nav-item:focus-within)::after {
    opacity: 1;
}
/* The header (and the menu it contains) must stay above the
   backdrop. Header sits at z-index 1000, panel content at 1001
   (set on .lmk-nav-panel and .lmk-nav .lmk-nav-panel--mega). */
.lmk-header {
    position: relative;
    z-index: 1000;
}
/* Don't apply the backdrop on mobile drawer, which uses its own
   full-screen pattern (data-mobile-nav="open" on documentElement).
   Tracks the hamburger breakpoint above. */
@media (max-width: 1240px) {
    body::after { display: none; }
}