/* Metric-matched local fallbacks: keep layout stable while Google Fonts load async */
    @font-face {
        font-family: 'IBM Plex Sans Fallback';
        src: local('Arial');
        size-adjust: 99.51%;
        ascent-override: 103.01%;
        descent-override: 27.64%;
        line-gap-override: 0%;
    }

    @font-face {
        font-family: 'IBM Plex Mono Fallback';
        src: local('Roboto Mono'), local('DejaVu Sans Mono'), local('Liberation Mono'), local('Courier New');
        size-adjust: 97.67%;
        ascent-override: 104.95%;
        descent-override: 28.16%;
        line-gap-override: 0%;
    }

    .shell .main-content { padding: 0; }

    .lp-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .lp-label {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-primary-text);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .lp-label::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 1px;
        background: var(--color-primary);
    }

    /* ── Hero ── */
    .lp-hero {
        position: relative;
        padding: 1rem 0 5rem;
        overflow: hidden;
        border-bottom: 1px solid var(--color-border);
        min-height: calc(100vh - 56px);
        display: flex;
        align-items: flex-start;
    }

    .lp-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(var(--color-border) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
        background-size: 40px 40px;
        opacity: 0.3;
        pointer-events: none;
    }

    .lp-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 70% at 40% 50%, transparent 0%, var(--color-bg) 100%);
        pointer-events: none;
    }

    .lp-hero-inner {
        position: relative;
        z-index: 1;
        max-width: 720px;
    }

    .lp-hero h1 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: clamp(3.5rem, 8vw, 6.5rem);
        font-weight: 800;
        line-height: 0.95;
        letter-spacing: -0.01em;
        color: var(--color-text);
        margin-bottom: 1.5rem;
    }

    .lp-hero h1 em {
        font-style: normal;
        color: var(--color-primary-text);
    }

    /* Leads may run two paragraphs; the gap between them is smaller than the
       2rem that separates the lead block from what follows. */
    .lp-hero-sub { margin-bottom: 1.1rem; }
    p.lp-hero-sub:last-of-type { margin-bottom: 2rem; }

    .lp-hero-compliance {
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin-bottom: 2.5rem;
    }

    .compliance-badge {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.65rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        padding: 0.3rem 0.65rem;
        border-radius: 4px;
        border: 1px solid var(--color-border);
        color: var(--color-text-dim);
        background: var(--color-surface);
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem 1.75rem;
        background: var(--color-primary);
        color: #fff;
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.8rem;
        font-weight: 500;
        border: none;
        border-radius: var(--radius);
        text-decoration: none;
        cursor: pointer;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }

    .lp-scroll-hint {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        color: var(--color-text-muted);
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        animation: bounce 2s ease-in-out infinite;
    }

    .lp-scroll-hint svg { width: 16px; height: 16px; }

    @keyframes bounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50%       { transform: translateX(-50%) translateY(5px); }
    }

    /* ── Shared section head ── */
    .lp-section-head { margin-bottom: clamp(3rem, 5vw, 4rem); }

    /* ── Lead tier — the deck paragraph that opens a section ── */
    /* One visual step below the headline and one above card/body copy, so
       sections aren't a headline followed by an undifferentiated grey slab.
       Measure: ch is the width of "0" (~0.55em in Plex Sans), so running
       prose fits ~1.3 chars per ch — 58ch ≈ 75 real characters per line. */
    .lp-hero-sub,
    .lp-control-lead,
    .lp-platform-lead,
    .lp-story-lead,
    .lp-tier-tagline,
    .lp-contact-left p {
        font-size: 1.15rem;
        line-height: 1.6;
        color: var(--color-text-lead);
        max-width: 58ch;
    }

    /* House style: any paragraph over ~3 lines carries one bolded key phrase —
       the claim, not decoration — brightened to full text color so the
       emphasis still reads at squint distance. (600 resolves to the loaded
       700 face; declared as 600 to match the offer-note bolds.) */
    .lp-hero-sub strong,
    .lp-control-lead strong,
    .lp-platform-lead strong,
    .lp-story-lead strong,
    .lp-tier-tagline strong,
    .lp-contact-left p strong,
    .lp-reason p strong,
    .lp-cap p strong,
    .lp-platform-item p strong {
        color: var(--color-text);
        font-weight: 600;
    }

    .lp-section-head h2 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.05;
        margin-top: 0;
    }

    /* ── Reasons ── */
    .lp-reasons {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-reasons-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1px;
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .lp-reason {
        background: var(--color-surface);
        padding: clamp(2rem, 3vw, 2.5rem);
        transition: background 0.15s ease;
        display: flex;
        flex-direction: column;
    }

    /* Shared bottom edge: cells are already equal height, so pin each card's
       closing paragraph to the floor — the row ends on one line across all
       four cards and the slack sits mid-card instead of dangling below the
       shortest column. padding-top keeps the p+p gap when there's no slack. */
    .lp-reason p:last-of-type {
        margin-top: auto;
        padding-top: 0.9rem;
    }

    .lp-reason:hover { background: var(--color-surface-alt); }

    .lp-reason-icon {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        background: var(--color-primary-dim);
        border: 1px solid rgba(99,102,241,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.75rem;
        color: var(--color-primary-text);
    }

    .lp-reason-icon svg { width: 18px; height: 18px; }

    .lp-reason h3 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 1rem;
    }

    .lp-reason p {
        font-size: 0.95rem;
        color: var(--color-text-dim);
        line-height: 1.65;
    }

    /* Card copy split into two paragraphs needs its own gap — the global
       reset zeroes p margins. */
    .lp-reason p + p,
    .lp-platform-item p + p { margin-top: 0.9rem; }

    /* ── Capabilities ── */
    .lp-caps {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-caps-grid {
        display: grid;
        /* Two-up to match the design: at the 1100px container a 300px min let a
           third column squeeze in (8 cards went 3+3+2, ragged under the
           full-width lead). A 400px min holds it at 2 across — 8 cards = 4 clean
           rows — and still collapses to 1 column on narrow screens. */
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 1px;
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .lp-cap {
        background: var(--color-surface);
        padding: clamp(2rem, 3vw, 2.5rem);
        transition: background 0.15s ease;
        display: flex;
        flex-direction: column;
    }

    .lp-cap:hover { background: var(--color-surface-alt); }

    .lp-cap-label {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-primary-text);
        margin-bottom: 0.6rem;
    }

    .lp-cap h3 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 1rem;
        line-height: 1.1;
    }

    .lp-cap p {
        font-size: 0.95rem;
        color: var(--color-text-dim);
        line-height: 1.65;
        margin-bottom: 1.25rem;
    }

    /* Capability line — the underlying modality each showcase app demonstrates.
       Echoes the lp-label dash at smaller scale so it reads as system, not afterthought. */
    .lp-cap-tech {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-dim);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0 0 1.5rem;
    }

    .lp-cap-tech::before {
        content: '';
        display: inline-block;
        width: 12px;
        height: 1px;
        background: var(--color-primary);
        flex-shrink: 0;
    }

    .lp-cap--lead .lp-cap-tech { margin: 1.1rem 0 0; }

    /* Capability screenshot: 16:10 frame pinned to the bottom of the card so
       the images line up across a row regardless of copy length. While the
       file loads (or where no shot exists) the dashed schematic fill shows. */
    .lp-cap-shot {
        margin-top: auto;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--color-bg) repeating-linear-gradient(45deg, transparent, transparent 9px, var(--color-border) 9px, var(--color-border) 10px);
    }

    .lp-cap-shot picture { display: block; width: 100%; height: 100%; }

    .lp-cap-shot img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    /* Lead capability spans the full grid width, copy beside the shot. */
    .lp-cap--lead {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 2.75rem;
        align-items: center;
        padding: clamp(2.5rem, 3.5vw, 3rem);
    }

    .lp-cap--lead h3 { font-size: 1.7rem; line-height: 1.12; margin-bottom: 1.1rem; }
    .lp-cap--lead p  { font-size: 0.95rem; margin-bottom: 0; }

    /* The lead shot is the portrait daily-brief email — show it whole at its
       natural ratio (capped + centred) rather than cropping it into a wide box. */
    .lp-cap-shot--lead { margin-top: 0; aspect-ratio: auto; max-width: 400px; margin-inline: auto; }
    .lp-cap-shot--lead img { height: auto; object-fit: fill; }

    @media (max-width: 768px) {
        .lp-cap--lead { grid-template-columns: 1fr; gap: 1.5rem; }
    }

    /* ── Capability lightbox — click a card to view its screenshot full size ── */
    .lp-cap.is-zoomable { cursor: zoom-in; }

    .lp-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 2.5rem;
        background: rgba(8, 9, 13, 0.92);
        cursor: zoom-out;
    }
    .lp-lightbox.is-open { display: flex; }

    .lp-lightbox img {
        max-width: 95vw;
        max-height: 92vh;
        width: auto;
        height: auto;
        border-radius: 8px;
        border: 1px solid var(--color-border);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
        cursor: default;
    }

    .lp-lightbox-close {
        position: absolute;
        top: 1.25rem;
        right: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }
    .lp-lightbox-close:hover { background: rgba(255, 255, 255, 0.18); }

    /* ── Platform ── */
    .lp-platform {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-platform-lead { margin-top: 1.4rem; }

    .lp-platform-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
        margin-top: 3rem;
    }

    .lp-platform-item { background: var(--color-surface); padding: clamp(2rem, 3vw, 2.5rem); }

    .lp-platform-item h3 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 1rem;
    }

    .lp-platform-item p {
        font-size: 0.95rem;
        color: var(--color-text-dim);
        line-height: 1.65;
    }

    /* ── Data Channels + Personal Story (single-statement sections) ── */
    .lp-control,
    .lp-story {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    /* Asymmetric grid: statement sections (no card grid below) step their
       deck right of the headline axis, so the page's silhouette varies from
       section to section instead of every block hanging off one left rail.
       Headline stays on the rail; only the deck steps. Desktop only. */
    @media (min-width: 900px) {
        .lp-control-lead,
        #who-built-this .lp-story-lead { margin-left: 34%; }
    }

    .lp-control-lead,
    .lp-story-lead { margin-top: 1.4rem; }

    /* ── How I use it: in-app HITL approval queue (ported from app) ── */
    .lp-story-body {
        display: grid;
        grid-template-columns: 0.85fr 1.15fr;
        gap: 3rem;
        /* Center the short lead against the tall approval-queue card so the
           slack splits above and below instead of pooling underneath. */
        align-items: center;
        margin-top: 1rem;
    }

    .lp-story-body .lp-story-lead:first-child { margin-top: 0; }

    .hitl-section {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-left: 4px solid var(--color-warning);
        border-radius: var(--radius);
        padding: 1.25rem 1.5rem;
        box-shadow: var(--shadow-sm);
    }

    .hitl-section-header {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 0.4rem;
    }

    .hitl-section-title {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--color-warning);
    }

    .hitl-section-count {
        background: rgba(245,158,11,0.15);
        color: var(--color-warning);
        font-size: 0.72rem;
        font-weight: 700;
        padding: 0.1rem 0.55rem;
        border-radius: 20px;
    }

    .hitl-description {
        font-size: 0.82rem;
        color: var(--color-text-dim);
        margin-bottom: 1.25rem;
    }

    .hitl-tasks {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .hitl-card {
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 1rem 1.25rem;
    }

    .hitl-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.65rem;
    }

    .hitl-op-type {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .hitl-subtype {
        font-weight: 400;
        color: var(--color-text-dim);
        font-size: 0.8rem;
        margin-left: 0.35rem;
    }

    .hitl-date {
        font-size: 0.75rem;
        color: var(--color-text-dim);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .hitl-summary {
        font-size: 0.875rem;
        color: var(--color-text);
        line-height: 1.6;
        padding: 0.75rem 1rem;
        background: rgba(255,255,255,0.03);
        border-left: 3px solid var(--color-primary);
        border-radius: 0 var(--radius) var(--radius) 0;
        margin-bottom: 0.75rem;
    }

    .hitl-details summary {
        font-size: 0.78rem;
        color: var(--color-text-dim);
        cursor: pointer;
        user-select: none;
        margin-bottom: 0.5rem;
    }

    .hitl-data {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.78rem;
        background: var(--color-bg);
        color: var(--color-text-dim);
        padding: 0.75rem 1rem;
        border-radius: var(--radius);
        border: 1px solid var(--color-border);
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 260px;
        overflow-y: auto;
        margin-bottom: 0.75rem;
    }

    .hitl-actions {
        display: flex;
        gap: 0.65rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--color-border);
    }

    .hitl-approve,
    .hitl-reject {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 1rem;
        border: none;
        border-radius: 6px;
        font-size: 0.82rem;
        font-weight: 600;
        font-family: var(--font);
        cursor: pointer;
        transition: opacity 0.15s, transform 0.1s;
    }

    .hitl-approve:hover,
    .hitl-reject:hover { opacity: 0.85; }

    /* AA text contrast (WCAG 1.4.3): white text needs >=4.5:1, which the vivid
       --color-success/--color-danger fills can't reach. Darken to the brightest
       same-hue shade that passes. Overridden here (not on the shared vars, which
       are also used as text color elsewhere). */
    .hitl-approve { background: #178740; color: #fff; } /* darkened green, 4.59:1 */
    .hitl-reject  { background: #e61414; color: #fff; } /* darkened red,   4.69:1 */
    [data-theme="light"] .hitl-reject { background: #dc2626; } /* already AA, 4.83:1 */

    .hitl-caption {
        margin-top: 1rem;
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    /* ── Process ── */
    .lp-process {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        margin-top: 3.5rem;
    }

    .lp-step {
        padding-right: 2.25rem;
        position: relative;
    }

    .lp-step:not(:last-child)::after {
        content: '→';
        position: absolute;
        right: 0.25rem;
        top: 0.2rem;
        color: var(--color-text-muted);
    }

    .lp-step-num {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.65rem;
        color: var(--color-primary-text);
        margin-bottom: 1.1rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .lp-step h3 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 0.85rem;
    }

    .lp-step p {
        font-size: 0.875rem;
        color: var(--color-text-dim);
        line-height: 1.6;
    }

    /* ── Offer ── */
    /* ── Offer tiers (flagship first, then standard — each a full-viewport takeover) ── */
    .lp-tier {
        min-height: calc(100vh - 56px);
        display: flex;
        align-items: center;
        padding: clamp(4rem, 7vw, 5.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-tier .lp-container { width: 100%; }

    .lp-tier-head {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2.5rem;
        align-items: end;
        padding-bottom: 2.5rem;
        margin-bottom: 2.5rem;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-tier-headline h2 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: clamp(1.85rem, 3vw, 2.5rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.005em;
        color: var(--color-text);
        margin: 0 0 0.85rem;
    }


    .lp-price-block { text-align: right; flex-shrink: 0; }

    .lp-price-from {
        display: block;
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 0.3rem;
    }

    .lp-price {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--color-text);
        line-height: 1;
    }

    .lp-price sup {
        font-size: 1rem;
        vertical-align: super;
        color: var(--color-text-dim);
    }

    .lp-price-note {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.65rem;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 0.4rem;
    }

    .lp-tier-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .lp-offer-item { background: var(--color-surface-alt); padding: 1.75rem 2rem; }

    /* Featured lead deliverable — the tier's defining access model, full width */
    .lp-offer-item--lead {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
        gap: 0.6rem 2.5rem;
        align-items: center;
    }

    .lp-offer-item--lead .lp-offer-item-name {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .lp-offer-item--lead .lp-offer-item-desc { font-size: 0.95rem; }

    .lp-offer-item-label {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-primary-text);
        margin-bottom: 0.55rem;
    }

    .lp-offer-item-name {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 0.6rem;
    }

    .lp-offer-item-desc {
        font-size: 0.875rem;
        color: var(--color-text-dim);
        line-height: 1.5;
    }

    .lp-tier-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .lp-offer-note {
        flex: 1;
        min-width: 320px;
        font-size: 0.875rem;
        color: var(--color-text-dim);
        line-height: 1.7;
        margin: 0;
    }

    .lp-tier-foot .btn-primary { flex-shrink: 0; }

    .lp-offer-note strong { color: var(--color-text); font-weight: 600; }

    /* ── Contact ── */
    .lp-contact { padding: clamp(5rem, 8vw, 6.5rem) 0; }

    .lp-contact-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
        align-items: start;
    }

    .lp-contact-left h2 {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.05;
        margin-bottom: 1.25rem;
    }

    .lp-contact-left p { margin-bottom: 1.5rem; }

    .lp-contact-note {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.7rem;
        color: var(--color-text-muted);
        line-height: 1.6;
        border-left: 2px solid var(--color-border);
        padding-left: 1rem;
    }

    /* ── Form ── */
    .lp-form {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: 2rem;
    }

    .lp-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .lp-field { margin-bottom: 1.25rem; }

    .lp-field label {
        display: block;
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-dim);
        margin-bottom: 0.4rem;
    }

    .lp-field input,
    .lp-field textarea,
    .lp-field select {
        width: 100%;
        padding: 0.65rem 0.85rem;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 6px;
        color: var(--color-text);
        font-family: var(--font);
        font-size: 0.875rem;
        transition: border-color 0.15s ease;
        appearance: none;
    }

    .lp-field input:focus,
    .lp-field textarea:focus,
    .lp-field select:focus {
        outline: none;
        border-color: var(--color-primary-text);
        box-shadow: 0 0 0 3px var(--color-primary-dim);
    }

    .lp-field textarea { resize: vertical; min-height: 120px; }

    .lp-form-submit { width: 100%; justify-content: center; margin-top: 0.5rem; }

    .lp-form-msg {
        display: none;
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        font-size: 0.875rem;
    }

    .lp-form-msg.success {
        background: rgba(34,197,94,0.1);
        border: 1px solid rgba(34,197,94,0.3);
        color: var(--color-success);
    }

    .lp-form-msg.error {
        background: rgba(239,68,68,0.1);
        border: 1px solid rgba(239,68,68,0.3);
        color: var(--color-danger);
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
        .lp-steps { grid-template-columns: 1fr 1fr; gap: 2rem; }
        .lp-step:not(:last-child)::after { display: none; }
        .lp-story-body { grid-template-columns: 1fr; gap: 2rem; }
        .lp-platform-grid { grid-template-columns: 1fr; }
        .lp-tier { min-height: 0; padding: 4rem 0; }
        .lp-tier-head { grid-template-columns: 1fr; align-items: start; }
        .lp-price-block { text-align: left; }
        .lp-tier-items { grid-template-columns: 1fr; }
        .lp-offer-item--lead { grid-template-columns: 1fr; gap: 0.6rem; }
        .lp-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
        .lp-form-row { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
        .lp-steps { grid-template-columns: 1fr; }
    }

    /* ── Featured whitepaper ── */
    .lp-whitepaper {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-wp-card {
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 2.5rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        position: relative;
        overflow: hidden;
    }

    .lp-wp-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--color-primary);
    }

    .lp-wp-icon {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-primary-text);
    }

    .lp-wp-icon svg { width: 26px; height: 26px; }

    .lp-wp-text { flex: 1; min-width: 0; }

    .lp-wp-title {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: clamp(1.4rem, 2.5vw, 1.9rem);
        font-weight: 700;
        line-height: 1.15;
        margin: 0.5rem 0 0.75rem;
    }

    .lp-wp-title a {
        color: var(--color-text);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .lp-wp-title a:hover { color: var(--color-primary-text); }

    .lp-wp-blurb {
        font-size: 1rem;
        color: var(--color-text-dim);
        line-height: 1.65;
        max-width: 58ch;
        margin: 0;
    }

    .lp-wp-actions {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .lp-wp-pdf {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        color: var(--color-text-dim);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .lp-wp-pdf:hover { color: var(--color-primary-text); }

    @media (max-width: 760px) {
        .lp-wp-card { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.75rem; }
        .lp-wp-actions { flex-direction: row; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
    }

    /* ── Resources ── */
    .lp-resources {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-resources-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1px;
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .lp-resource-card {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        padding: clamp(1.5rem, 2.5vw, 2rem);
        background: var(--color-surface);
        text-decoration: none;
        transition: background 0.15s ease;
    }

    .lp-resource-card:hover {
        background: var(--color-surface-alt);
    }

    .lp-resource-card:hover .lp-resource-arrow {
        color: var(--color-primary-text);
        transform: translateX(3px);
    }

    .lp-resource-label {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-primary-text);
        margin-bottom: 0.35rem;
    }

    .lp-resource-title {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.3;
    }

    .lp-resource-arrow {
        font-size: 0.9rem;
        color: var(--color-text-muted);
        margin-top: auto;
        padding-top: 1.1rem;
        display: inline-block;
        transition: color 0.15s ease, transform 0.15s ease;
    }

    @media (max-width: 768px) {
        .lp-resources-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 480px) {
        .lp-resources-grid { grid-template-columns: 1fr; }
    }

    /* ── Vertical self-select band ── */
    .lp-verticals {
        padding: clamp(5rem, 8vw, 6.5rem) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .lp-verticals-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--color-border);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        overflow: hidden;
        margin-top: 3rem;
    }

    .lp-vertical-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: clamp(1.6rem, 2.5vw, 2.1rem) clamp(1.75rem, 3vw, 2.35rem);
        background: var(--color-surface);
        text-decoration: none;
        transition: background 0.15s ease;
    }

    /* Accent edge slides in on hover — reads as selecting your row. */
    .lp-vertical-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--color-primary);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.18s ease;
    }

    .lp-vertical-card:hover { background: var(--color-surface-alt); }
    .lp-vertical-card:hover::before { transform: scaleY(1); }
    .lp-vertical-card:hover .lp-vertical-name { color: var(--color-primary-text); }
    .lp-vertical-card:hover .lp-vertical-cta { color: var(--color-primary-text); }
    .lp-vertical-card:hover .lp-vertical-cta::after { transform: translateX(3px); }
    .lp-vertical-card:hover .lp-vertical-icon { color: var(--color-primary-text); }

    .lp-vertical-head {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .lp-vertical-icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        color: var(--color-text-muted);
        transition: color 0.15s ease;
    }

    .lp-vertical-name {
        font-family: 'IBM Plex Sans', 'IBM Plex Sans Fallback', sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--color-text);
        line-height: 1.25;
        transition: color 0.15s ease;
    }

    .lp-vertical-hook {
        font-size: 0.95rem;
        color: var(--color-text-dim);
        line-height: 1.45;
    }

    .lp-vertical-cta {
        margin-top: auto;
        padding-top: 1.5rem;
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        transition: color 0.15s ease;
    }

    .lp-vertical-cta::after {
        content: ' \2192';
        display: inline-block;
        transition: transform 0.15s ease;
    }

    /* Catch-all tile completes the 8-cell grid and carries the section CTA. */
    .lp-vertical-card--all { background: var(--color-primary-dim); }
    .lp-vertical-card--all .lp-vertical-name { color: var(--color-primary-text); }
    .lp-vertical-card--all .lp-vertical-cta { color: var(--color-primary-text); }
    .lp-vertical-card--all .lp-vertical-icon { color: var(--color-primary-text); }

    @media (max-width: 600px) {
        .lp-verticals-grid { grid-template-columns: 1fr; }
    }

        /* Metric-matched local fallbacks: keep layout stable while Google Fonts load async */

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        /* ── Dark theme (default) ── */
        :root,
        [data-theme="dark"] {
            --color-bg:          #0f1117;
            --color-surface:     #1a1d27;
            --color-surface-alt: #20232f;
            --color-border:      #2a2d3a;
            --color-primary:     #6164f1;
            --color-primary-text: #7a7df3;
            --color-primary-dim: rgba(99,102,241,0.15);
            --color-text:        #e2e4ed;
            --color-text-lead:   #a9aec2;
            --color-text-dim:    #85899c;
            --color-text-muted:  #8488a5;
            --color-success:     #22c55e;
            --color-warning:     #f59e0b;
            --color-danger:      #ef4444;
            --color-info:        #3b82f6;
            --shadow-sm:         0 1px 3px rgba(0,0,0,0.5);
            --font: 'IBM Plex Sans', 'IBM Plex Sans Fallback', system-ui, sans-serif;
            --radius: 8px;
        }

        /* ── Light theme ── */
        [data-theme="light"] {
            --color-bg:          #f1f3f8;
            --color-surface:     #ffffff;
            --color-surface-alt: #f8f9fc;
            --color-border:      #dde1ed;
            --color-primary:     #4f46e5;
            --color-primary-dim: rgba(79,70,229,0.08);
            --color-text:        #1a1c2e;
            --color-text-lead:   #4d5266;
            --color-text-dim:    #6b7080;
            --color-text-muted:  #b8bccf;
            --color-success:     #16a34a;
            --color-warning:     #d97706;
            --color-danger:      #dc2626;
            --color-info:        #2563eb;
            --shadow-sm:         0 1px 4px rgba(0,0,0,0.08);
        }

        /* ── Global transitions for theme switching ── */
        *, *::before, *::after {
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }
        /* Don't animate things that shouldn't transition */
        svg, svg *, .status-dot { transition: none; }

        html, body {
            height: 100%;
            background: var(--color-bg);
            color: var(--color-text);
            font-family: var(--font);
            font-size: 15px;
            line-height: 1.6;
        }

        /* ── Layout shell (full-width, no sidebar) ── */
        .shell {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 56px 1fr auto;
            min-height: 100vh;
        }

        /* ── Top bar ── */
        .topbar {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            padding: 0 1.5rem;
            background: var(--color-surface);
            border-bottom: 1px solid var(--color-border);
            gap: 0.75rem;
            box-shadow: var(--shadow-sm);
        }

        .topbar-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 700;
            font-size: 1rem;
            color: var(--color-primary-text);
            text-decoration: none;
            letter-spacing: -0.01em;
        }

        .topbar-logo svg { width: 22px; height: 22px; }

        .topbar-divider {
            width: 1px;
            height: 24px;
            background: var(--color-border);
            margin: 0 0.25rem;
        }

        .topbar-title {
            font-size: 0.9rem;
            color: var(--color-text-dim);
        }

        .topbar-spacer { flex: 1; }

        /* ── Theme toggle ── */
        .theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: 1px solid var(--color-border);
            background: transparent;
            color: var(--color-text-dim);
            cursor: pointer;
            margin-left: 0.75rem;
            flex-shrink: 0;
        }

        .theme-toggle:hover {
            background: var(--color-primary-dim);
            color: var(--color-primary-text);
            border-color: var(--color-primary-text);
        }

        .theme-toggle svg { width: 15px; height: 15px; }

        [data-theme="dark"]  .icon-sun  { display: block; }
        [data-theme="dark"]  .icon-moon { display: none;  }
        [data-theme="light"] .icon-sun  { display: none;  }
        [data-theme="light"] .icon-moon { display: block; }

        /* ── Main content (full width, no sidebar) ── */
        .main-content {
            overflow-y: auto;
            padding: 2rem;
            background: var(--color-bg);
        }

        /* ── Footer ── */
        .footer {
            grid-column: 1 / -1;
            background: var(--color-surface);
            border-top: 1px solid var(--color-border);
            color: var(--color-text-dim);
            font-size: 0.85rem;
        }

        .footer-inner {
            max-width: 1100px;
            margin: 0 auto;
            padding: 3rem 2rem 1.5rem;
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr;
            gap: 2.5rem;
        }

        .footer-brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 700;
            font-size: 1rem;
            color: var(--color-primary-text);
            text-decoration: none;
            letter-spacing: -0.01em;
        }

        .footer-brand-logo svg { width: 20px; height: 20px; }

        .footer-tagline {
            margin-top: 0.85rem;
            max-width: 300px;
            line-height: 1.65;
            color: var(--color-text-dim);
        }

        .footer-col h3 {
            font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
            font-size: 0.62rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color-text-dim);
            margin-bottom: 1.1rem;
        }

        .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
        .footer-col a { color: var(--color-text-dim); text-decoration: none; transition: color 0.15s ease; }
        .footer-col a:hover { color: var(--color-primary-text); }

        .footer-bottom {
            max-width: 1100px;
            margin: 0 auto;
            padding: 1.25rem 2rem;
            border-top: 1px solid var(--color-border);
            text-align: center;
            color: var(--color-text-muted);
            font-size: 0.8rem;
        }

        @media (max-width: 768px) {
            .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
        }

    /* ── Sticky section nav (appears after the hero scrolls off) ── */
    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }

    /* Keep anchored sections clear of the fixed nav */
    #what-it-does, #pricing, #who-built-this, #read-more, #contact {
        scroll-margin-top: 64px;
    }

    .lp-stickynav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 500; /* above page content, below the lightbox (1000) */
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }

    .lp-stickynav.is-visible {
        transform: translateY(0);
        visibility: visible;
    }

    .lp-stickynav-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 2rem;
        height: 52px;
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .lp-stickynav-logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--color-primary-text);
        text-decoration: none;
        letter-spacing: -0.01em;
        flex-shrink: 0;
    }

    .lp-stickynav-logo svg { width: 20px; height: 20px; }

    .lp-stickynav-links {
        flex: 1;
        min-width: 0;
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .lp-stickynav-links::-webkit-scrollbar { display: none; }

    .lp-stickynav-links a {
        font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-dim);
        text-decoration: none;
        padding: 0.35rem 0;
    }

    .lp-stickynav-links a:hover { color: var(--color-primary-text); }

    .lp-stickynav .btn-primary {
        padding: 0.5rem 1rem;
        font-size: 0.72rem;
        flex-shrink: 0;
    }

    .lp-stickynav-cta-short { display: none; }

    @media (max-width: 768px) {
        .lp-stickynav-inner { padding: 0 1rem; gap: 0.85rem; }
        /* left-align so the scrollable row can't clip its leading links */
        .lp-stickynav-links { justify-content: flex-start; gap: 1.1rem; }
    }

    @media (max-width: 600px) {
        .lp-stickynav-cta-full { display: none; }
        .lp-stickynav-cta-short { display: inline; }
    }