/*
 * Crackle public landing — server-rendered ("Charcoal Trading", 2026-07 rebuild).
 *
 * Faithful HTML/CSS translation of the design-system kit at
 * docs/orchestrator/assets/ui_kits/landing/ (JSX inline styles → classes,
 * keyframes + motion layer carried over verbatim). Tokens come from the DS
 * export (--lp-* dual theme, radius/duration/easing scalars).
 *
 * Theme model: dark is canonical. JS (landing.js) sets html[data-lp-theme]
 * from prefers-color-scheme and the nav toggle flips it. With JS disabled
 * (html lacks .js) the OS preference still applies via the media query below.
 *
 * Motion contract (kit rule): every element's BASE state is visible; motion
 * is transform-only and gated on prefers-reduced-motion, so nothing depends
 * on JS or a running animation to be readable.
 */

/* ============================================================ tokens */
.lp {
    /* dark — canonical */
    --lp-bg-base: #0a0a0a;
    --lp-bg-elevated: #14161a;
    --lp-bg-surface: #1a1d22;
    --lp-border: #2a2d33;
    --lp-text-primary: #eeebe7;
    --lp-text-secondary: #9b958d;
    --lp-accent: #c93a2b;
    --lp-accent-press: #97281d; /* DS --p-700, CTA hover shade */
    --lp-up: #3ab06a;
    --lp-down: #e0594c;
    --lp-warn: #d4a73a;

    /* DS scalars consumed by the kit */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    --dur-instant: 120ms;
    --dur-base: 280ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-lp-theme='light'] .lp {
    --lp-bg-base: #f9f7f5;
    --lp-bg-elevated: #ffffff;
    --lp-bg-surface: #f4f1ed;
    --lp-border: #e6dfd6;
    --lp-text-primary: #14161a;
    --lp-text-secondary: #4f4b45;
    --lp-accent: #c93a2b;
    --lp-up: #1d8a4a;
    --lp-down: #b94530;
    --lp-warn: #a07820;
}

/* No-JS fallback: honour the OS light preference when landing.js never ran. */
@media (prefers-color-scheme: light) {
    html:not(.js) .lp {
        --lp-bg-base: #f9f7f5;
        --lp-bg-elevated: #ffffff;
        --lp-bg-surface: #f4f1ed;
        --lp-border: #e6dfd6;
        --lp-text-primary: #14161a;
        --lp-text-secondary: #4f4b45;
        --lp-up: #1d8a4a;
        --lp-down: #b94530;
        --lp-warn: #a07820;
    }
}

/* ============================================================ base */
html,
body {
    margin: 0;
    background: #0a0a0a;
    font-family: var(--font-sans);
}
html {
    scroll-behavior: smooth;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

.lp {
    min-height: 100vh;
    background: var(--lp-bg-base);
    color: var(--lp-text-primary);
    font-family: var(--font-sans);
}

.lp a {
    -webkit-tap-highlight-color: transparent;
}

/* icon helper — inline lucide svgs inherit currentColor */
.lp-ic {
    display: inline-flex;
    flex-shrink: 0;
    color: inherit;
}
.lp-ic svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================ keyframes (kit index.html, verbatim) */
@keyframes lp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes lp-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lp-up) 70%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
}
@keyframes lp-drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-28px, 26px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes lp-drift2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50% { transform: translate(34px, -22px) scale(1.12); opacity: 0.8; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
}
@keyframes lp-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes lp-shimmer {
    to { background-position: 200% center; }
}
@keyframes lp-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes lp-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes lp-reveal {
    from { transform: translateY(32px); }
    to { transform: none; }
}
@keyframes lp-hero {
    from { transform: translateY(46px); }
    to { transform: none; }
}
@keyframes lp-rise {
    from { transform: translateY(28px); }
    to { transform: none; }
}
@keyframes lp-spin {
    to { transform: rotate(360deg); }
}
@keyframes lp-spin-rev {
    to { transform: rotate(-360deg); }
}
@keyframes lp-dial-glow {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.05); }
}
@keyframes lp-hiw-step {
    0%, 100% { border-color: var(--lp-border); background: transparent; }
    8%, 20% {
        border-color: color-mix(in srgb, var(--lp-accent) 55%, var(--lp-border));
        background: color-mix(in srgb, var(--lp-accent) 10%, transparent);
    }
    30% { border-color: var(--lp-border); background: transparent; }
}
@keyframes lp-hiw-check {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    9%, 22% { opacity: 1; transform: scale(1); }
    30% { opacity: 0; }
}
@keyframes lp-hiw-fill {
    0%, 8% { transform: scaleX(0); }
    22%, 100% { transform: scaleX(1); }
}
@keyframes lp-dash-flow {
    to { stroke-dashoffset: -16; }
}
@keyframes lp-hiw-node {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
@keyframes lp-hiw-bar {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

.lp-pulse-dot {
    animation: lp-pulse-dot 2.2s var(--ease-out) infinite;
}
.lp-pop {
    animation: lp-pop 0.5s var(--ease-expo) both;
}
.lp-caret {
    display: inline-block;
    width: 8px;
    background: var(--lp-accent);
    animation: lp-blink 1s steps(1) infinite;
}

/* Base state is VISIBLE everywhere. Motion is transform-only so nothing is
   ever hidden if an animation is frozen (background tab) or unsupported. */
@media (prefers-reduced-motion: no-preference) {
    .hero-line {
        animation: lp-hero 0.95s var(--ease-expo) both;
        animation-delay: var(--d, 0ms);
    }
    .hero-fade {
        animation: lp-rise 0.85s var(--ease-expo) both;
        animation-delay: var(--d, 0ms);
    }
    @supports (animation-timeline: view()) {
        .reveal {
            animation: lp-reveal both linear;
            animation-timeline: view();
            animation-range: entry 2% cover 24%;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .lp *,
    .lp *::before,
    .lp *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================ shared atoms */
.lp-dot {
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
}
.lp-dot--7 { width: 7px; height: 7px; }
.lp-dot--6 { width: 6px; height: 6px; }
.lp-dot--5 { width: 5px; height: 5px; }

.lp-section {
    max-width: 1160px;
    margin: 0 auto;
    padding: 96px 32px;
}
.lp-section--line {
    border-top: 1px solid var(--lp-border);
    /* border on a max-width block reads odd; the kit does the same — keep. */
}

.lp-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
    margin-bottom: 20px;
}
.lp-label .lp-dot--7 {
    background: var(--lp-accent);
}

.lp-h2 {
    margin: 0;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.lp-h2--xl {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
}
.lp-h2--sm {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.12;
}

/* CTA buttons */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition:
        background var(--dur-base) var(--ease-expo),
        transform var(--dur-instant) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}
.lp-btn .lp-ic {
    width: 16px;
    height: 16px;
}
.lp-btn--primary {
    background: var(--lp-accent);
    color: #fff;
    border: 1px solid var(--lp-accent);
}
.lp-btn--primary:hover {
    background: var(--lp-accent-press);
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-accent) 22%, transparent);
}
.lp-btn--on-accent {
    background: color-mix(in srgb, #fff 92%, var(--lp-accent));
    color: var(--lp-accent);
    border: 1px solid transparent;
}
.lp-btn--on-accent:hover {
    background: #fff;
    transform: translateY(-1px);
}

/* Mock window chrome */
.lp-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lp-border);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--lp-text-secondary);
}
.lp-chrome-lights {
    display: inline-flex;
    gap: 7px;
}
.lp-chrome-lights span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.lp-chrome-lights span:nth-child(1) { background: #e0594c; }
.lp-chrome-lights span:nth-child(2) { background: #d4a73a; }
.lp-chrome-lights span:nth-child(3) { background: #3ab06a; }
.lp-chrome-right {
    margin-left: auto;
}

/* Cards — hover lift (kit) */
.lp-card {
    background: var(--lp-bg-elevated);
    border: 1px solid var(--lp-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition:
        transform 0.34s var(--ease-expo),
        border-color 0.34s var(--ease-out),
        box-shadow 0.34s var(--ease-out);
}
.lp-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--lp-accent) 50%, var(--lp-border));
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--lp-accent) 55%, transparent);
}

/* Icon chip (40/44 square) */
.lp-icchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--lp-bg-surface);
    color: var(--lp-accent);
    flex-shrink: 0;
}
.lp-icchip .lp-ic {
    width: 18px;
    height: 18px;
}
.lp-icchip--lg {
    width: 44px;
    height: 44px;
}
.lp-icchip--lg .lp-ic {
    width: 19px;
    height: 19px;
}

/* ============================================================ scroll rail */
.lp-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 40;
    background: transparent;
    pointer-events: none;
}
.lp-rail-fill {
    height: 100%;
    width: 0;
    background: var(--lp-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--lp-accent) 70%, transparent);
    transform-origin: left;
    transition: width 80ms linear;
}

/* ============================================================ nav */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--lp-bg-base) 62%, transparent);
    border-bottom: 1px solid transparent;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        backdrop-filter var(--dur-base) var(--ease-out);
}
.lp-nav.is-scrolled {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--lp-bg-base) 88%, transparent);
    border-bottom-color: var(--lp-border);
}
.lp-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: 78px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 40px;
    transition: height var(--dur-base) var(--ease-expo);
}
.lp-nav.is-scrolled .lp-nav-inner {
    height: 62px;
}

.lp-wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lp-text-primary); /* beats the UA :visited purple on currentColor */
}
.lp-wordmark svg {
    display: block;
}
.lp-wordmark-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    /* Brand mark always sits on a dark tile so the white-stroke logo
       reads identically across both themes (original landing treatment). */
    background: #14161a;
    border: 1px solid #2a2d33;
    flex-shrink: 0;
}
.lp-wordmark-name {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--lp-text-primary);
}
.lp-wordmark-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--lp-text-secondary);
    border: 1px solid var(--lp-border);
    border-radius: 4px;
    padding: 2px 6px;
}

.lp-nav-links {
    display: flex;
    gap: 32px;
    margin-left: 8px;
}
.lp-nav-links a {
    position: relative;
    font-size: 14.5px;
    color: var(--lp-text-secondary);
    text-decoration: none;
    transition: color var(--dur-instant) var(--ease-out);
}
.lp-nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 1.5px;
    background: var(--lp-accent);
    transition: right var(--dur-base) var(--ease-expo);
}
.lp-nav-links a:hover {
    color: var(--lp-text-primary);
}
.lp-nav-links a:hover::after {
    right: 0;
}

.lp-nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.lp-nav-login {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lp-text-secondary);
    text-decoration: none;
    transition: color var(--dur-instant) var(--ease-out);
}
.lp-nav-login:hover {
    color: var(--lp-text-primary);
}
/* Theme switch — a real toggle (track + sliding thumb): sun/light on the
   left, moon/dark on the right. The thumb slides under the active glyph. */
.lp-theme-toggle {
    position: relative;
    display: inline-flex;
    width: 56px;
    height: 28px;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-surface);
    color: var(--lp-text-secondary);
    cursor: pointer;
}
.lp-theme-toggle .lp-ic {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    opacity: 0.55;
    transition: opacity var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}
html[data-lp-theme='dark'] .lp-theme-toggle .lp-ic--moon,
html[data-lp-theme='light'] .lp-theme-toggle .lp-ic--sun {
    opacity: 1;
    color: var(--lp-text-primary);
}
.lp-theme-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--lp-bg-elevated);
    border: 1px solid var(--lp-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform var(--dur-instant) var(--ease-out);
}
html[data-lp-theme='dark'] .lp-theme-thumb { transform: translateX(28px); }
@media (prefers-reduced-motion: reduce) {
    .lp-theme-thumb,
    .lp-theme-toggle .lp-ic { transition: none; }
}
/* the toggle is a JS control — hide it entirely without JS */
html:not(.js) .lp-theme-toggle { display: none; }

/* ============================================================ hero */
.lp-hero {
    position: relative;
    overflow: hidden;
}
.lp-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.lp-hero-glow--a {
    top: -160px;
    right: -60px;
    width: 680px;
    height: 680px;
}
.lp-hero-glow--b {
    top: 120px;
    left: -140px;
    width: 420px;
    height: 420px;
}
/* parallax (JS) moves the wrapper; the drift animation owns the inner div */
.lp-hero-glow-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.lp-hero-glow--a .lp-hero-glow-core {
    background: radial-gradient(circle, color-mix(in srgb, var(--lp-accent) 26%, transparent), transparent 62%);
    filter: blur(20px);
    animation: lp-drift 16s ease-in-out infinite;
}
.lp-hero-glow--b .lp-hero-glow-core {
    background: radial-gradient(circle, color-mix(in srgb, var(--lp-accent) 12%, transparent), transparent 65%);
    filter: blur(24px);
    animation: lp-drift2 20s ease-in-out infinite;
}

.lp-hero-inner {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 118px 32px 92px;
}
.lp-hero-h1 {
    margin: 0 0 32px;
    font-size: clamp(44px, 6.6vw, 92px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.03em;
    max-width: 1000px;
}
.hero-line {
    display: block;
    padding-bottom: 0.02em;
}
.lp-hero-h1 .t-secondary {
    color: var(--lp-text-secondary);
}
.lp-hero-h1 .t-accent {
    color: var(--lp-accent);
}
.lp-hero-sub {
    margin: 0 0 40px;
    max-width: 620px;
    font-size: 19px;
    line-height: 30px;
    color: var(--lp-text-secondary);
}
.lp-hero-sub strong {
    font-weight: 600;
    color: var(--lp-text-primary);
}
.lp-hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ============================================================ exchange strip */
.lp-strip {
    border-top: 1px solid var(--lp-border);
    border-bottom: 1px solid var(--lp-border);
    background: var(--lp-bg-elevated);
}
.lp-strip-head {
    max-width: 1160px;
    margin: 0 auto;
    padding: 26px 32px 0;
}
.lp-strip-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
.lp-strip-label .lp-dot--7 {
    background: var(--lp-up);
}
.lp-ticker {
    position: relative;
    overflow: hidden;
    padding: 20px 0 24px;
    margin-top: 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.lp-ticker-track {
    display: flex;
    width: max-content;
    animation: lp-marquee 46s linear infinite;
    will-change: transform;
}
.lp-ticker:hover .lp-ticker-track {
    animation-play-state: paused;
}
.lp-tick {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 0 28px;
    border-right: 1px solid var(--lp-border);
    white-space: nowrap;
}
.lp-tick-sym {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--lp-text-primary);
}
.lp-tick-name {
    font-size: 14px;
    color: var(--lp-text-secondary);
}
.lp-tick-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
}
.lp-tick--live .lp-tick-state {
    color: var(--lp-up);
}
.lp-tick--live .lp-tick-state .lp-dot--6 {
    background: var(--lp-up);
}
.lp-tick--queued .lp-tick-state {
    color: var(--lp-text-secondary);
    opacity: 0.55;
}
.lp-tick--queued .lp-tick-state .lp-dot--6 {
    background: var(--lp-text-secondary);
}

/* ============================================================ one decision */
.lp-dec-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}
.lp-dec-head .lp-h2--xl {
    max-width: 620px;
}
.lp-dec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.lp-dec-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lp-dec-step {
    display: flex;
    gap: 16px;
    padding: 18px 16px 18px 0;
    border-top: 1px solid var(--lp-border);
    border-radius: 8px;
    background: transparent;
    transition: background 0.4s var(--ease-out);
}
.lp-dec-step:first-child {
    border-top: none;
}
.lp-dec-step.is-computing {
    background: color-mix(in srgb, var(--lp-accent) 7%, transparent);
}
.lp-dec-step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--lp-accent);
    flex-shrink: 0;
    padding-top: 2px;
    transition: color 0.4s;
}
.lp-dec-step.is-off .lp-dec-step-num {
    color: var(--lp-text-secondary);
}
.lp-dec-step-body {
    opacity: 1;
    transition: opacity 0.4s;
}
.lp-dec-step.is-off .lp-dec-step-body {
    opacity: 0.4;
}
.lp-dec-step-t {
    font-size: 17px;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin-bottom: 6px;
}
.lp-dec-step-d {
    font-size: 14.5px;
    line-height: 22px;
    color: var(--lp-text-secondary);
}

.lp-dec-card {
    display: flex;
    flex-direction: column;
}
.lp-dec-rows {
    padding: 8px 22px 4px;
}
.lp-dec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--lp-border);
    opacity: 1;
    transition: opacity 0.4s var(--ease-out);
}
.lp-dec-row.is-pending {
    opacity: 0.25;
}
.lp-dec-row-k {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
.lp-dec-row-v {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--lp-text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.lp-dec-row--decision .lp-dec-row-v {
    color: var(--lp-up);
}
.lp-dec-row--decision.is-pending .lp-dec-row-v,
.lp-dec-row--decision.is-computing .lp-dec-row-v {
    color: var(--lp-text-primary);
}
.lp-dec-row .lp-dec-dash {
    display: none;
    color: var(--lp-text-secondary);
}
.lp-dec-row .lp-caret {
    display: none;
}
.lp-dec-row.is-pending .lp-dec-val {
    display: none;
}
.lp-dec-row.is-pending .lp-dec-dash {
    display: inline;
}
.lp-dec-row.is-computing .lp-dec-val,
.lp-dec-row.is-computing .lp-dec-dash {
    display: none;
}
.lp-dec-row.is-computing .lp-caret {
    display: inline-block;
}

.lp-dec-foot {
    margin-top: auto;
    min-height: 74px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--lp-border);
    background: color-mix(in srgb, var(--lp-up) 8%, transparent);
    transition: background 0.5s var(--ease-out);
}
.lp-dec-foot.is-computing {
    background: transparent;
}
.lp-dec-won {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--lp-up) 45%, transparent);
    color: var(--lp-up);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
}
.lp-dec-won .lp-ic {
    width: 13px;
    height: 13px;
}
.lp-dec-foot-note {
    font-size: 13.5px;
    color: var(--lp-text-secondary);
}
.lp-dec-replay {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--lp-border);
    color: var(--lp-text-secondary);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
}
.lp-dec-replay .lp-ic {
    width: 12px;
    height: 12px;
}
html:not(.js) .lp-dec-replay {
    display: none;
}
.lp-dec-resolving {
    display: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--lp-text-secondary);
    align-items: center;
    gap: 8px;
}
.lp-dec-resolving .lp-dot--6 {
    background: var(--lp-accent);
}
.lp-dec-foot.is-computing .lp-dec-won,
.lp-dec-foot.is-computing .lp-dec-foot-note,
.lp-dec-foot.is-computing .lp-dec-replay {
    display: none;
}
.lp-dec-foot.is-computing .lp-dec-resolving {
    display: inline-flex;
}

/* ============================================================ how it works */
/* Pinned horizontal-scroll story (kit HowItWorks). Base layout below is the
   stacked fallback — no JS, reduced motion, or a narrow viewport. The pinned
   variant activates in the media block underneath: the section holds for
   300vh while landing.js drives --hiw-p (0..1) and the track pans -200vw. */
.lp-hiw-h2 {
    margin: 0;
    max-width: 640px;
}
.lp-hiw-head {
    max-width: 1160px;
    margin: 0 auto;
    padding: 96px 32px 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.lp-hiw-pills {
    display: none;
    gap: 8px;
    align-items: center;
}
.lp-hiw-pill {
    width: 18px;
    height: 4px;
    border-radius: 999px;
    background: var(--lp-border);
    transition:
        width 0.3s var(--ease-expo),
        background 0.3s var(--ease-out);
}
.lp-hiw-pill.is-filled {
    background: var(--lp-accent);
}
.lp-hiw-pill.is-active {
    width: 34px;
}
.lp-hiw-track {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px 96px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.lp-hiw-panel-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: center;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 860px) {
    html.js .lp-hiw-wrap {
        height: 300vh;
    }
    html.js .lp-hiw-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    html.js .lp-hiw-head {
        width: 100%;
        padding: 96px 32px 0;
        flex-shrink: 0;
    }
    html.js .lp-hiw-h2 {
        font-size: clamp(24px, 3vw, 40px);
        max-width: 560px;
    }
    html.js .lp-hiw-pills {
        display: flex;
    }
    html.js .lp-hiw-track {
        flex: 1;
        max-width: none;
        margin: 0;
        padding: 0;
        flex-direction: row;
        gap: 0;
        width: 300vw;
        transform: translateX(calc(var(--hiw-p, 0) * -200vw));
        transition: transform 0.1s linear;
        will-change: transform;
    }
    html.js .lp-hiw-panel {
        width: 100vw;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    html.js .lp-hiw-panel-inner {
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 32px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 56px;
    }
}
.lp-hiw-text {
    max-width: 520px;
}
.lp-hiw-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
.lp-hiw-t {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.08;
}
.lp-hiw-d {
    margin: 0;
    font-size: 17px;
    line-height: 27px;
    color: var(--lp-text-secondary);
    max-width: 460px;
}

.lp-viz {
    background: var(--lp-bg-elevated);
    border: 1px solid var(--lp-border);
    border-radius: var(--radius-xl);
    padding: 26px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}
.lp-viz--center {
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.lp-viz--center svg {
    width: 100%;
    height: auto;
}
.lp-viz-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--lp-border);
    animation: lp-hiw-step 4s var(--vd, 0s) ease-in-out infinite;
}
.lp-viz-step-num {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--lp-border);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lp-viz-step-num > span:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--lp-text-secondary);
}
.lp-viz-step-check {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--lp-bg-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: var(--lp-accent);
    animation: lp-hiw-check 4s var(--vd, 0s) ease-in-out infinite;
}
.lp-viz-step-check .lp-ic {
    width: 13px;
    height: 13px;
}
.lp-viz-step-name {
    font-size: 15px;
    color: var(--lp-text-primary);
}
.lp-viz-step-bar {
    margin-left: auto;
    width: 32%;
    height: 6px;
    border-radius: 999px;
    background: var(--lp-bg-surface);
    overflow: hidden;
}
.lp-viz-step-bar span {
    display: block;
    height: 100%;
    background: var(--lp-accent);
    transform-origin: left;
    animation: lp-hiw-fill 4s var(--vd, 0s) ease-in-out infinite;
}

.lp-viz-dash {
    animation: lp-dash-flow 1s var(--vd, 0s) linear infinite;
}
.lp-viz-node {
    animation: lp-hiw-node 1.8s var(--vd, 0s) ease-in-out infinite;
}
.lp-viz-svgmono {
    font-family: var(--font-mono);
}

.lp-viz--monitor {
    gap: 22px;
}
.lp-viz-monhead {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-viz-monhead .lp-dot--7 {
    background: var(--lp-up);
}
.lp-viz-monhead span:last-child {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
.lp-viz-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 150px;
}
.lp-viz-bars span {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: color-mix(in srgb, var(--lp-text-secondary) 38%, transparent);
    transform-origin: bottom;
    animation: lp-hiw-bar 1.9s var(--vd, 0s) ease-in-out infinite;
}
.lp-viz-bars span:last-child {
    background: var(--lp-accent);
}
.lp-viz-monlegend {
    display: flex;
    gap: 26px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--lp-text-secondary);
}
.lp-viz-monlegend .accent {
    margin-left: auto;
    color: var(--lp-accent);
}

/* ============================================================ who it's for */
.lp-who-h2 {
    margin: 0 0 44px;
    /* wide enough that "Built for the buyer-of-buyers." keeps to one line */
    max-width: 720px;
}
.lp-who-tabs {
    display: flex;
}
.lp-who-tab {
    flex: 1;
    text-align: left;
    padding: 22px 26px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--lp-border);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background var(--dur-base) var(--ease-out);
}
.lp-who-tab.is-active {
    background: color-mix(in srgb, var(--lp-accent) 6%, transparent);
    border-bottom-color: var(--lp-accent);
}
.lp-who-tab-t {
    font-size: 20px;
    font-weight: 600;
    color: var(--lp-text-secondary);
    margin-bottom: 6px;
    transition: color var(--dur-base);
}
.lp-who-tab.is-active .lp-who-tab-t {
    color: var(--lp-text-primary);
}
.lp-who-tab-s {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
/* tabs are a JS control; without JS both panels render stacked */
html:not(.js) .lp-who-tabs {
    display: none;
}
html.js .lp-who-panel:not(.is-active) {
    display: none;
}
.lp-who-panel {
    padding: clamp(28px, 4vw, 48px);
}
html:not(.js) .lp-who-panel + .lp-who-panel {
    border-top: 1px solid var(--lp-border);
}
.lp-who-panel-anim {
    animation: lp-rise 0.45s var(--ease-expo);
}
.lp-who-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-accent);
    margin-bottom: 16px;
}
.lp-who-h3 {
    margin: 0 0 18px;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--lp-text-primary);
    max-width: 900px;
}
.lp-who-p {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 25px;
    color: var(--lp-text-secondary);
    max-width: 720px;
}
.lp-who-pts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px 40px;
    margin-bottom: 32px;
}
.lp-who-pt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    color: var(--lp-text-primary);
}
.lp-who-pt .lp-ic {
    width: 16px;
    height: 16px;
    color: var(--lp-accent);
    margin-top: 2px;
}

/* ============================================================ capabilities */
.lp-cap-hint {
    margin: 0 0 44px;
    font-size: 14px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--lp-text-secondary);
}
.lp-cap-h2 {
    margin: 0 0 20px;
    max-width: 620px;
}
.lp-cap-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-cap-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.lp-cap {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 200px;
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 26px;
    cursor: default;
    transition:
        flex 0.5s var(--ease-expo),
        border-color 0.34s var(--ease-out),
        box-shadow 0.34s var(--ease-out),
        transform 0.34s var(--ease-expo);
}
.lp-cap-row:hover .lp-cap:not(:hover) {
    flex: 0.6 1 0%;
}
.lp-cap-row:hover .lp-cap:hover {
    flex: 2.35 1 0%;
}
.lp-cap-main {
    width: 100%;
    flex-shrink: 0;
    min-width: 168px;
    display: flex;
    flex-direction: column;
    transition:
        width 0.5s var(--ease-expo),
        min-width 0.5s var(--ease-expo);
}
.lp-cap:hover .lp-cap-main {
    width: 48%;
}
.lp-cap-row:hover .lp-cap:not(:hover) .lp-cap-main {
    min-width: 0;
}
.lp-cap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    transition: margin 0.5s var(--ease-expo);
}
.lp-cap-row:hover .lp-cap:not(:hover) .lp-cap-head {
    margin-bottom: 18px;
}
.lp-cap-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--lp-text-secondary);
    opacity: 1;
    transition: opacity 0.3s var(--ease-out);
}
.lp-cap-row:hover .lp-cap:not(:hover) .lp-cap-num {
    opacity: 0;
}
.lp-cap-t {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--lp-text-primary);
    letter-spacing: -0.01em;
}
.lp-cap-d {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--lp-text-secondary);
    opacity: 1;
    max-height: 200px;
    overflow: hidden;
    transition:
        opacity 0.3s var(--ease-out),
        max-height 0.5s var(--ease-expo);
}
.lp-cap-row:hover .lp-cap:not(:hover) .lp-cap-d {
    opacity: 0;
    max-height: 0;
}
.lp-cap-demo {
    flex: 1;
    min-width: 0;
    padding-left: 0;
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition:
        opacity 0.42s var(--ease-out) 0.06s,
        transform 0.5s var(--ease-expo),
        padding 0.5s var(--ease-expo);
}
.lp-cap:hover .lp-cap-demo {
    opacity: 1;
    transform: none;
    padding-left: 18px;
}
/* touch / no-hover devices: keep the even 3-up, demos stay hidden */
@media (hover: none) {
    .lp-cap-row:hover .lp-cap,
    .lp-cap-row:hover .lp-cap:hover {
        flex: 1 1 0%;
    }
}

.lp-chip {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 5px 9px;
    border-radius: var(--radius-md);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-surface);
    color: var(--lp-text-secondary);
    white-space: nowrap;
}
.lp-capd {
    height: 100%;
    min-height: 148px;
    background: var(--lp-bg-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}
.lp-capd-mono {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--lp-text-secondary);
}

.lp-capd-brief {
    align-self: flex-start;
    color: var(--lp-accent);
    border-color: color-mix(in srgb, var(--lp-accent) 45%, var(--lp-border));
}
.lp-capd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}
.lp-capd-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-elevated);
}
.lp-capd-cell .lp-dot--6 {
    background: var(--lp-accent);
    animation: lp-hiw-node 1.6s var(--vd, 0s) ease-in-out infinite;
}
.lp-capd-cell .lp-ic {
    width: 12px;
    height: 12px;
    margin-left: auto;
    color: var(--lp-accent);
}

.lp-capd-split {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-capd-split .sym {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--lp-text-secondary);
    width: 40px;
}
.lp-capd-split .bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--lp-bg-elevated);
    overflow: hidden;
}
.lp-capd-split .bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--lp-accent);
    transform-origin: left;
    animation: lp-hiw-fill 3.4s var(--vd, 0s) ease-in-out infinite;
}
.lp-capd-split .pct {
    font-family: var(--font-mono);
    font-size: 10.5px;
    width: 30px;
    text-align: right;
    color: var(--lp-text-primary);
}

.lp-capd-synchead {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-capd-synchead .lp-dot--6 {
    background: var(--lp-up);
}
.lp-capd-syncrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-elevated);
}
.lp-capd-syncrow .sym {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--lp-text-primary);
    width: 42px;
}
.lp-capd-syncrow .lp-chip {
    margin-left: auto;
    padding: 3px 8px;
}
.lp-capd-syncrow .lp-chip.ok {
    color: var(--lp-up);
    border-color: color-mix(in srgb, var(--lp-up) 40%, var(--lp-border));
}
.lp-capd-syncrow .lp-chip.retry {
    color: var(--lp-accent);
    border-color: color-mix(in srgb, var(--lp-accent) 45%, var(--lp-border));
    animation: lp-hiw-node 1.1s ease-in-out infinite;
}

.lp-capd-diffrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
}
.lp-capd-diffrow.minus {
    background: color-mix(in srgb, var(--lp-down) 12%, transparent);
    color: var(--lp-text-secondary);
}
.lp-capd-diffrow.minus .sign {
    color: var(--lp-down);
}
.lp-capd-diffrow.plus {
    background: color-mix(in srgb, var(--lp-up) 14%, transparent);
    color: var(--lp-text-primary);
}
.lp-capd-diffrow.plus .sign {
    color: var(--lp-up);
}
.lp-capd-actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.lp-capd-actions .lp-chip {
    flex: 1;
    text-align: center;
    color: var(--lp-text-primary);
}
.lp-capd-actions .lp-chip.primary {
    color: #fff;
    background: var(--lp-accent);
    border-color: var(--lp-accent);
}

.lp-capd-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 96px;
    margin-top: 4px;
}
.lp-capd-bars span {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--lp-text-secondary) 34%, transparent);
    transform-origin: bottom;
    animation: lp-hiw-bar 1.9s var(--vd, 0s) ease-in-out infinite;
}
.lp-capd-bars span:last-child {
    background: var(--lp-accent);
}
.lp-capd-legend {
    display: flex;
    gap: 18px;
}
.lp-capd-legend .accent {
    margin-left: auto;
    color: var(--lp-accent);
}

.lp-capd-vaults {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.lp-capd-vault {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--lp-border);
    background: var(--lp-bg-elevated);
}
.lp-capd-vault .lp-ic {
    width: 16px;
    height: 16px;
    color: var(--lp-accent);
    animation: lp-hiw-node 2s var(--vd, 0s) ease-in-out infinite;
}
.lp-capd-vault .lp-capd-mono {
    font-size: 9.5px;
}
.lp-capd-nokeys {
    color: var(--lp-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lp-capd-nokeys .lp-ic {
    width: 12px;
    height: 12px;
    color: var(--lp-up);
}

/* ============================================================ split sections (wizard / approval) */
.lp-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 48px;
    align-items: center;
}
.lp-split-h2 {
    margin: 0 0 20px;
}
.lp-step-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-accent);
    margin-bottom: 12px;
}
.lp-split-h3 {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 600;
    color: var(--lp-text-primary);
    line-height: 1.2;
}
.lp-split-p {
    margin: 0 0 24px;
    font-size: 15.5px;
    line-height: 24px;
    color: var(--lp-text-secondary);
    max-width: 460px;
}

.lp-wiz-tabs {
    display: flex;
    gap: 28px;
    padding: 20px 24px 0;
}
.lp-wiz-tab {
    padding-bottom: 14px;
    border-bottom: 2px solid transparent;
}
.lp-wiz-tab.is-active {
    border-bottom-color: var(--lp-accent);
}
.lp-wiz-tab-n {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--lp-text-secondary);
}
.lp-wiz-tab.is-active .lp-wiz-tab-n {
    color: var(--lp-accent);
}
.lp-wiz-tab-l {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
    margin-top: 4px;
}
.lp-wiz-tab.is-active .lp-wiz-tab-l {
    color: var(--lp-text-primary);
}
.lp-wiz-rows {
    padding: 10px 24px 6px;
}
.lp-wiz-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--lp-border);
}
.lp-wiz-row-k {
    font-size: 15px;
    color: var(--lp-text-secondary);
}
.lp-wiz-row-v {
    font-size: 15px;
    color: var(--lp-text-primary);
}
.lp-wiz-row-v.accent {
    color: var(--lp-accent);
    font-family: var(--font-mono);
}
.lp-wiz-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    font-family: var(--font-mono);
    font-size: 13px;
}
.lp-wiz-foot .muted {
    color: var(--lp-text-secondary);
}
.lp-wiz-foot .accent {
    color: var(--lp-accent);
}

.lp-appr-chip {
    padding: 4px 10px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--lp-warn) 45%, transparent);
    color: var(--lp-warn);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
}
.lp-appr-body {
    padding: 22px 24px;
    font-family: var(--font-mono);
    font-size: 14px;
    min-height: 150px;
}
.lp-appr-id {
    color: var(--lp-text-secondary);
    margin-bottom: 14px;
}
.lp-appr-diff {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--lp-text-primary);
    flex-wrap: wrap;
}
.lp-appr-diff .sep {
    color: var(--lp-text-secondary);
}
.lp-appr-diff .old {
    color: var(--lp-down);
    text-decoration: line-through;
}
.lp-appr-diff .new {
    color: var(--lp-up);
}
.lp-appr-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border-top: 1px solid var(--lp-border);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--lp-text-secondary);
}
.lp-appr-approve {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--lp-up) 45%, transparent);
    color: var(--lp-up);
    background: color-mix(in srgb, var(--lp-up) 10%, transparent);
}
.lp-appr-approve .lp-dot--6 {
    background: var(--lp-up);
}
.lp-appr-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lp-appr-bullets li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15px;
    color: var(--lp-text-primary);
}
.lp-appr-bullets li .lp-dot--6 {
    background: var(--lp-accent);
    margin-top: 8px;
}
.lp-appr-p {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 25px;
    color: var(--lp-text-secondary);
    max-width: 480px;
}

/* ============================================================ unified reporting */
.lp-rep-head {
    max-width: 620px;
    margin-bottom: 44px;
}
.lp-rep-head .lp-h2 {
    margin-bottom: 18px;
}
.lp-rep-head p {
    margin: 0;
    font-size: 16px;
    line-height: 25px;
    color: var(--lp-text-secondary);
}
.lp-rep-top {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--lp-border);
}
.lp-rep-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-accent);
    margin-bottom: 10px;
}
.lp-rep-big {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.lp-rep-total {
    font-family: var(--font-mono);
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--lp-text-primary);
    font-variant-numeric: tabular-nums;
}
.lp-rep-delta {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--lp-up);
}
.lp-rep-note {
    font-size: 14px;
    color: var(--lp-text-secondary);
    margin-top: 8px;
}
.lp-rep-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.lp-rep-chip {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--lp-border);
    background: transparent;
    min-width: 96px;
}
.lp-rep-chip.is-active {
    border-color: var(--lp-accent);
    background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
}
.lp-rep-chip-n {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
.lp-rep-chip-v {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--lp-text-primary);
    margin-top: 4px;
}
.lp-rep-chart {
    padding: 32px 28px 20px;
}
.lp-rep-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 28px);
    height: 240px;
}
.lp-rep-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.lp-rep-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 200px;
}
.lp-rep-seg-b {
    background: color-mix(in srgb, var(--lp-accent) 42%, #9b958d);
    border-radius: 3px 3px 0 0;
}
.lp-rep-seg-a {
    background: var(--lp-accent);
}
.lp-rep-day {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--lp-text-secondary);
}
.lp-rep-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--lp-border);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--lp-text-secondary);
}
.lp-rep-keys {
    display: inline-flex;
    gap: 18px;
}
.lp-rep-key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.lp-rep-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.lp-rep-swatch--a {
    background: var(--lp-accent);
}
.lp-rep-swatch--b {
    background: color-mix(in srgb, var(--lp-accent) 42%, #9b958d);
}

/* ============================================================ by design */
.lp-bd-head {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 44px;
}
.lp-bd-head .lp-h2 {
    max-width: 520px;
}
.lp-bd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    border: 1px solid var(--lp-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--lp-bg-elevated);
}
.lp-bd-cell {
    border-right: 1px solid var(--lp-border);
    border-top: 1px solid var(--lp-border);
}
.lp-bd-cell-in {
    padding: 32px 28px;
}
.lp-bd-n {
    font-family: var(--font-mono);
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--lp-text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.lp-bd-rule {
    width: 40px;
    height: 2px;
    background: var(--lp-accent);
    margin: 18px 0;
}
.lp-bd-label {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin-bottom: 8px;
}
.lp-bd-d {
    font-size: 13.5px;
    line-height: 20px;
    color: var(--lp-text-secondary);
}

/* ============================================================ security */
.lp-sec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 56px;
    align-items: center;
}
.lp-sec-grid .lp-h2 {
    margin-bottom: 18px;
    max-width: 460px;
}
.lp-sec-p {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 25px;
    color: var(--lp-text-secondary);
    max-width: 460px;
}
.lp-sec-points {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 28px;
}
.lp-sec-point {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--lp-border);
}
.lp-sec-point:first-child {
    border-top: none;
}
.lp-sec-point-t {
    font-size: 17px;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin-bottom: 5px;
}
.lp-sec-point-d {
    font-size: 14.5px;
    line-height: 22px;
    color: var(--lp-text-secondary);
}
.lp-sec-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--lp-accent);
    text-decoration: none;
}
.lp-sec-link .lp-ic {
    width: 15px;
    height: 15px;
}
/* ============================================================ access form (final CTA band) */
.lp-af {
    margin-top: 26px;
}
.lp-af-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.lp-af-input {
    flex: 1 1 180px;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
}
.lp-af-input::placeholder {
    color: rgba(255, 255, 255, 0.62);
}
.lp-af-input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 1px;
}
.lp-af-select {
    appearance: none;
    -webkit-appearance: none;
}
.lp-af-select option {
    color: var(--lp-text-primary);
    background: var(--lp-bg-elevated);
}
/* honeypot — visually gone, still submittable by naive bots */
.lp-af-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.lp-af-err {
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    border-radius: var(--radius-md);
    display: inline-block;
    padding: 6px 12px;
}
.lp-af-note {
    margin-top: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}
.lp-af-note a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.lp-af-ok {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.lp-af-ok .lp-ic {
    width: 16px;
    height: 16px;
}
@media (max-width: 700px) {
    .lp-af-row {
        flex-direction: column;
    }
}

/* ============================================================ legal pages */
.lp-legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 150px 24px 90px;
}
.lp-legal .lp-label {
    margin-bottom: 14px;
}
.lp-legal-updated {
    margin: 10px 0 34px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--lp-text-secondary);
}
.lp-legal h2 {
    margin: 34px 0 10px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lp-text-primary);
}
.lp-legal p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 25px;
    color: var(--lp-text-secondary);
}
.lp-legal p strong {
    color: var(--lp-text-primary);
    font-weight: 600;
}
.lp-legal a {
    color: var(--lp-accent);
    text-decoration: none;
}
@media print {
    .lp-nav,
    .lp-footer,
    .lp-rail { display: none !important; }
    .lp-legal { padding: 24px 0; max-width: none; }
    .lp { background: #fff; }
}

/* ============================================================ comparison (vs consoles) */
.lp-vs {
    margin-top: 34px;
    padding: 10px 0 8px;
}
.lp-vs-head,
.lp-vs-row {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.35fr;
    gap: 18px;
    align-items: center;
    padding: 14px 26px;
}
.lp-vs-head {
    padding-bottom: 8px;
}
.lp-vs-col-h {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
}
.lp-vs-col-h--accent {
    color: var(--lp-accent);
}
.lp-vs-row {
    border-top: 1px solid var(--lp-border);
}
.lp-vs-dim {
    font-weight: 600;
    font-size: 15px;
    color: var(--lp-text-primary);
}
.lp-vs-hand {
    font-size: 14px;
    color: var(--lp-text-secondary);
}
.lp-vs-crackle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--lp-text-primary);
}
.lp-vs-crackle .lp-ic {
    width: 14px;
    height: 14px;
    color: var(--lp-up);
    flex: none;
}
@media (max-width: 760px) {
    .lp-vs-head { display: none; }
    .lp-vs-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 18px;
    }
}

.lp-sec-brief {
    margin: 10px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--lp-text-secondary);
}

.lp-dial-wrap {
    position: relative;
    width: min(100%, 500px);
    aspect-ratio: 1;
    margin: 0 auto;
}
.lp-dial-wrap > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.lp-dial-spin {
    transform-box: view-box;
    transform-origin: 200px 200px;
}
.lp-dial-spin--90 { animation: lp-spin 90s linear infinite; }
.lp-dial-spin--60r { animation: lp-spin-rev 60s linear infinite; }
.lp-dial-spin--20r { animation: lp-spin-rev 20s linear infinite; }
.lp-dial-spin--16 { animation: lp-spin 16s linear infinite; }
.lp-dial-glowc {
    transform-box: view-box;
    transform-origin: 200px 200px;
    animation: lp-dial-glow 4.5s ease-in-out infinite;
}
.lp-dial-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.lp-dial-core {
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--lp-bg-elevated);
    border: 1px solid var(--lp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 60px -8px color-mix(in srgb, var(--lp-accent) 45%, transparent);
}
.lp-dial-core svg {
    width: 52%;
    height: auto;
    display: block;
}
.lp-dial-hud {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--lp-text-secondary);
    opacity: 0.7;
}
.lp-dial-hud .sep {
    margin: 0 12px;
    opacity: 0.4;
}

/* ============================================================ faq */
.lp-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 48px;
    align-items: flex-start;
}
.lp-faq-grid .lp-h2--sm {
    margin-bottom: 18px;
    max-width: 380px;
}
.lp-faq-intro {
    margin: 0;
    font-size: 16px;
    line-height: 25px;
    color: var(--lp-text-secondary);
    max-width: 380px;
}
.lp-faq-intro a {
    color: var(--lp-accent);
    text-decoration: none;
}
.lp-faq-item {
    border-top: 1px solid var(--lp-border);
}
.lp-faq-list-end {
    border-top: 1px solid var(--lp-border);
}
.lp-faq-item summary {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    cursor: pointer;
    text-align: left;
    list-style: none;
}
.lp-faq-item summary::-webkit-details-marker {
    display: none;
}
.lp-faq-num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--lp-text-secondary);
    transition: color 0.3s;
}
.lp-faq-item[open] .lp-faq-num {
    color: var(--lp-accent);
}
.lp-faq-q {
    flex: 1;
    font-size: 19px;
    font-weight: 600;
    color: var(--lp-text-primary);
}
.lp-faq-plus {
    display: inline-flex;
    color: var(--lp-text-secondary);
    transform: rotate(0deg);
    transition:
        transform 0.3s var(--ease-expo),
        color 0.3s;
}
.lp-faq-plus .lp-ic {
    width: 18px;
    height: 18px;
}
.lp-faq-item[open] .lp-faq-plus {
    transform: rotate(45deg);
    color: var(--lp-accent);
}
.lp-faq-a {
    margin: 0 0 26px 41px;
    font-size: 15.5px;
    line-height: 25px;
    color: var(--lp-text-secondary);
    max-width: 640px;
    animation: lp-fade-in 0.4s var(--ease-out);
}

/* ============================================================ final cta */
.lp-final {
    position: relative;
    overflow: hidden;
    background: var(--lp-accent);
    color: #fff;
}
.lp-final-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 55%);
    pointer-events: none;
    animation: lp-drift2 18s ease-in-out infinite;
}
.lp-final-inner {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: 116px 32px 96px;
}
.lp-final-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 78%, var(--lp-accent));
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-final-eyebrow .lp-dot--7 {
    background: #fff;
}
.lp-final-h2 {
    margin: 0 0 28px;
    font-size: clamp(40px, 6vw, 84px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
}
.lp-shimmer {
    background: linear-gradient(100deg, color-mix(in srgb, #fff 55%, var(--lp-accent)) 20%, #fff 50%, color-mix(in srgb, #fff 55%, var(--lp-accent)) 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lp-shimmer 4.5s linear infinite;
}
.lp-final-p {
    margin: 0 0 40px;
    max-width: 520px;
    font-size: 18px;
    line-height: 28px;
    color: color-mix(in srgb, #fff 84%, var(--lp-accent));
}
.lp-final-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.lp-final-mail {
    font-family: var(--font-mono);
    font-size: 14px;
    color: color-mix(in srgb, #fff 82%, var(--lp-accent));
}
.lp-final-mail a {
    color: #fff;
}

/* ============================================================ footer */
.lp-footer {
    position: relative;
    overflow: hidden;
    background: var(--lp-bg-base);
    border-top: 1px solid var(--lp-border);
}
.lp-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 32px 40px;
}
.lp-footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}
.lp-footer-brand p {
    margin: 20px 0 0;
    max-width: 260px;
    font-size: 16px;
    line-height: 24px;
    color: var(--lp-text-secondary);
}
.lp-footer-colhead {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lp-text-secondary);
    margin-bottom: 22px;
}
.lp-footer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-footer-links a {
    font-size: 15px;
    text-decoration: none;
    color: var(--lp-text-secondary);
    transition: color var(--dur-instant) var(--ease-out);
    width: fit-content;
}
.lp-footer-links a:hover {
    color: var(--lp-text-primary);
}
.lp-footer-sep {
    border-top: 1px solid var(--lp-border);
}
.lp-footer-sep--gap {
    margin-top: 56px;
}
.lp-wm {
    position: relative;
    /* full-bleed breakout of the 1280px footer container so the viewport-
       proportional watermark is never clipped left/right; the footer's own
       overflow:hidden absorbs the scrollbar-width overshoot of 100vw */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(120px, 21vw, 440px);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.lp-wm span {
    position: absolute;
    left: 50%;
    bottom: -16%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.8;
    /* "crackle" at this tracking is ~3.4em wide → 27vw ≈ 92vw rendered,
       always inside the viewport at any width */
    font-size: 27vw;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--lp-text-primary) 15%, transparent) 0%, color-mix(in srgb, var(--lp-text-primary) 7%, transparent) 44%, transparent 82%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.lp-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
}
.lp-footer-mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--lp-text-secondary);
}
.lp-footer-status {
    display: flex;
    align-items: center;
    gap: 28px;
}
.lp-footer-ok {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.lp-footer-ok .lp-dot--7 {
    background: var(--lp-up);
}
.lp-footer-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lp-text-primary);
    text-decoration: none;
}
.lp-footer-login .lp-ic {
    width: 15px;
    height: 15px;
}

/* ============================================================ responsive */
@media (max-width: 860px) {
    .lp-nav-links {
        display: none;
    }
    .lp-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .lp-nav-inner,
    .lp-hero-inner,
    .lp-section,
    .lp-final-inner,
    .lp-footer-inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    .lp-nav-login {
        display: none;
    }
    .lp-footer-grid {
        grid-template-columns: 1fr;
    }
}