/* ============================================================
   Kintsugi - Light theme
   Warm paper + sumi ink + kintsugi gold.
   ============================================================ */

@font-face {
    font-family: "Kashima Brush";
    src: url("/assets/fonts/KashimaDemo.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Design tokens */
:root {
    --bg-deep: oklch(0.975 0.003 250);
    --bg-surface: oklch(1 0 0);
    --bg-elevated: oklch(0.955 0.003 250);
    --bg-inset: oklch(0.19 0.004 250);
    --border: oklch(0.905 0.004 250);
    --border-accent: oklch(0.62 0.14 70 / 0.35);
    --text: oklch(0.24 0.004 250);
    --text-bright: oklch(0.16 0.004 250);
    --text-muted: oklch(0.50 0.004 250);
    --text-on-inset: oklch(0.96 0.003 250);
    --accent: oklch(0.62 0.14 70);
    --accent-light: oklch(0.55 0.14 65);
    --accent-glow: oklch(0.62 0.14 70 / 0.10);
    --seam: oklch(0.72 0.13 75);
    --seam-bright: oklch(0.78 0.13 75);
    --danger: oklch(0.55 0.18 28);
    --nav-bg: oklch(0.975 0.003 250 / 0.85);
    --overlay-bg: oklch(0.975 0.003 250 / 0.6);
    --search-overlay: oklch(0.975 0.003 250 / 0.7);
    --code-bg: oklch(0.19 0.004 250);
    --code-text: oklch(0.92 0.003 250);
    --code-tab-header: oklch(0.235 0.004 250);
    --font-brand: "Kashima Brush", "Shippori Mincho", serif;
    --font-display: "Shippori Mincho", "Noto Serif JP", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;
    --nav-height: 4rem;
    --sidebar-width: 16rem;
    --toc-width: 14rem;
    --content-max: 48rem;
    color-scheme: light;
}

/* Resets */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 1.5rem);
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-deep);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
}

/* Subtle dot grid covering the page (faded at edges) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(oklch(0.62 0.14 70 / 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    background-position: 0 0;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: -1;
}

/* The 金 watermark anchored to the lower-right gutter */
body::after {
    content: "金";
    position: fixed;
    bottom: -3vw;
    right: -2vw;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32vw;
    line-height: 1;
    color: oklch(0.62 0.14 70 / 0.04);
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

a {
    color: var(--accent-light);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--accent); }

code, pre, kbd { font-family: var(--font-mono); }

/* Inline code outside .prose */
code:not(pre code) {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.85em;
    color: var(--text-bright);
}

/* pre/code blocks outside .prose */
pre:not(.prose pre) {
    background: var(--code-bg);
    color: var(--code-text);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0 1rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.7;
}
pre:not(.prose pre) code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
    color: var(--code-text);
}

/* Utility overrides used alongside Tailwind CDN */
.bg-deep { background-color: var(--bg-deep); }
.bg-surface { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-inset { background-color: var(--bg-inset); color: var(--text-on-inset); }
.text-body { color: var(--text); }
.text-bright { color: var(--text-bright); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-seam { color: var(--seam); }
.text-danger { color: var(--danger); }
.border-border { border-color: var(--border); }
.font-display { font-family: var(--font-display); }
.font-brand { font-family: var(--font-brand); letter-spacing: 0.01em; }
.font-mono-token { font-family: var(--font-mono); }

/* ──────── Navigation ──────────────────────────────────────── */

/* Outer header: always fixed top-edge full-width. Only animates `top`.
   The morphing happens entirely inside `.site-nav-inner`. */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    transition: top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inner container: in docs mode this is a full-width bar with backdrop blur.
   In big mode (landing) we override the bg/border to transparent at top, then
   morph into a centered pill on scroll. */
.site-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid transparent;
    border-bottom-color: var(--border);
    border-radius: 0;
    box-shadow: none;
    transition:
        max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-backdrop-filter 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Big mode (landing) at top: fully transparent — the painting shows through. */
.site-nav--big:not(.is-scrolled) .site-nav-inner {
    height: 4.5rem;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0 2rem;
}

/* Big mode → island. Outer top-offset; inner shrinks to pill. */
.site-nav--big.is-scrolled {
    top: 14px;
}
.site-nav--big.is-scrolled .site-nav-inner {
    max-width: 820px;
    height: 3.4rem;
    padding: 0 0.75rem 0 1rem;
    background: oklch(1 0 0 / 0.82);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 9999px;
    box-shadow: 0 12px 28px -16px oklch(0.20 0.003 250 / 0.30);
}

/* Sides */
.nav-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-width: 0;
}
.nav-side--right {
    gap: 1rem;
}

/* Brand block (used in nav AND in the mobile drawer; sized for the small form).
   Baseline alignment because the Kashima Brush wordmark and Shippori Mincho
   kanji have different em-box centers; baseline keeps the bottoms visually flush. */
.nav-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-brand-mark {
    display: inline-block;
    color: var(--seam);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1;
    flex-shrink: 0;
    text-shadow: 0 0 6px oklch(1 0 0 / 0.5);
    transform: translateY(0.04em);
}
.nav-brand-text {
    color: var(--text-bright);
    font-family: var(--font-brand);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* In big mode at top, the hero owns the brand. Hide the nav brand. */
.site-nav--big:not(.is-scrolled) .nav-brand {
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}
.site-nav--big.is-scrolled .nav-brand {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Centered scrollspy menu (big mode only) */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1 1 auto;
    justify-content: center;
    transition: gap 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav--big.is-scrolled .nav-menu {
    gap: 1rem;
}
.nav-menu-link {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        font-size 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
}
.nav-menu-link:hover {
    color: var(--text-bright);
}
.site-nav--big.is-scrolled .nav-menu-link {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
}
.nav-menu-link.is-active,
body[data-active-section="problem"] .nav-menu-link[data-section="problem"],
body[data-active-section="how"] .nav-menu-link[data-section="how"],
body[data-active-section="usage"] .nav-menu-link[data-section="usage"],
body[data-active-section="open"] .nav-menu-link[data-section="open"] {
    color: var(--accent);
}
.nav-menu-link[data-section]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.2s ease, left 0.2s ease;
}
body[data-active-section="problem"] .nav-menu-link[data-section="problem"]::after,
body[data-active-section="how"] .nav-menu-link[data-section="how"]::after,
body[data-active-section="usage"] .nav-menu-link[data-section="usage"]::after,
body[data-active-section="open"] .nav-menu-link[data-section="open"]::after {
    width: 60%;
    left: 20%;
}

/* Right-side links (Docs, GitHub icon) */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    transition:
        color 0.15s ease,
        font-size 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.15s ease;
    white-space: nowrap;
}
.nav-link:hover {
    color: var(--accent);
}
.site-nav--big.is-scrolled .nav-link {
    font-size: 0.85rem;
}
.nav-link-text { display: inline; }
.site-nav--big.is-scrolled .nav-link-text { display: none; }

/* Hide mobile-only toggle on desktop in big mode */
.nav-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: oklch(1 0 0 / 0.7);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text-bright);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.nav-mobile-toggle:hover { background: oklch(1 0 0 / 0.9); }

/* Mobile drawer */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.nav-drawer-overlay {
    position: absolute;
    inset: 0;
    background: oklch(0.20 0.003 250 / 0.45);
    backdrop-filter: blur(2px);
}
.nav-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 84vw;
    max-width: 22rem;
    background: var(--bg-deep);
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 40px -20px oklch(0.20 0.003 250 / 0.40);
    padding: 1.25rem 1rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.nav-drawer.is-open .nav-drawer-panel {
    transform: translateX(0);
}
.nav-drawer-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    border-radius: 0.5rem;
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.nav-drawer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    margin-top: 0.25rem;
    padding: 0.25rem 0.4rem;
}
.nav-drawer-brand .nav-brand-text { font-size: 1.75rem; }
.nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.nav-drawer-link {
    display: block;
    padding: 0.7rem 0.65rem;
    color: var(--text-bright);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-drawer-link:hover { background: var(--bg-elevated); color: var(--accent); }
body[data-active-section="problem"] .nav-drawer-link[data-section="problem"],
body[data-active-section="how"] .nav-drawer-link[data-section="how"],
body[data-active-section="usage"] .nav-drawer-link[data-section="usage"],
body[data-active-section="open"] .nav-drawer-link[data-section="open"] {
    color: var(--accent);
    background: var(--accent-glow);
}
.nav-drawer-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .site-nav, .site-nav-inner, .nav-brand, .nav-menu, .nav-menu-link,
    .nav-link, .nav-link-text, .nav-drawer, .nav-drawer-panel {
        transition-duration: 0.001s !important;
    }
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.nav-toggle:hover {
    border-color: var(--border-accent);
    color: var(--text-bright);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.nav-link:hover { color: var(--text-bright); }

.version-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--border-accent);
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: var(--overlay-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ──────────── Landing sections ──────────── */

.landing {
    /* No top padding: the hero painting starts at y=0 and the fixed nav
       floats over it transparently. The hero's own top padding clears the nav. */
    padding-top: 0;
}

.landing-section {
    padding: 5rem 1.5rem;
    max-width: 76rem;
    margin: 0 auto;
}

.landing-section-narrow {
    max-width: 56rem;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--seam);
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.5vw, 2.6rem);
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 1.25rem;
}

.section-lede {
    font-size: 1.125rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 42rem;
    margin: 0 0 2rem;
}

.divider-rule {
    height: 1px;
    max-width: 76rem;
    margin: 0 auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border) 20%,
        var(--seam) 50%,
        var(--border) 80%,
        transparent 100%
    );
    opacity: 0.5;
}

/* ──────────── Reveal + seam motifs (reused across §3–§9) ──────────── */

/* Fade-up reveal triggered by IntersectionObserver setting .is-revealed.
   --step-delay token lets siblings cascade (same idiom as .attack-step). */
.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--step-delay, 0s),
        transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--step-delay, 0s);
    will-change: opacity, transform;
}
.reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* Gold seam wrappers — share the seam-draw keyframe used by the hero bowl.
   Each variant is an <svg> whose <path> animates dashoffset 1 → 0 on reveal. */
.seam-svg path {
    fill: none;
    stroke: url(#seam-grad);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    filter: drop-shadow(0 0 4px oklch(0.78 0.13 75 / 0.35));
}
.seam-svg.is-revealed path {
    animation: seam-draw 1400ms ease-out 200ms forwards;
}

.seam-divider {
    display: block;
    width: 100%;
    height: 18px;
    max-width: 76rem;
    margin: 0 auto;
    overflow: visible;
}

.seam-rule {
    display: block;
    width: 100%;
    height: 14px;
    overflow: visible;
}

.seam-edge {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Typing-dot indicator (used in §6 agent chat) — three dots fading in / out
   in sequence. Cousin of terminal-cursor (steps(2) blink) but smoother. */
@keyframes typing-dot {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%            { opacity: 1;    transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .seam-svg path,
    .seam-svg.is-revealed path {
        stroke-dashoffset: 0;
        animation: none;
    }
}

/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    /* Flush at the top — the nav floats over the painting; small top padding so
       the brand sits high on the page (leaves room for the nav to morph into). */
    padding: 5.25rem 1.5rem 6rem;
    min-height: 100vh;
    margin: 0;
    background-image: url("/assets/images/hero-bg.webp");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* Layered overlays:
   1) Subtle dark ink wash at the very top so the nav text doesn't appear on
      flat white sky (gives the nav an atmospheric backdrop without a bg colour).
   2) Soft white wash on the LEFT side so body text always reads cleanly.
   3) Bottom-right radial vignette as belt-and-suspenders for any residual watermark.
   4) Gold radial glow upper-left for warm atmospheric depth. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            oklch(0.22 0.004 250 / 0.10) 0%,
            oklch(0.22 0.004 250 / 0.04) 5%,
            transparent 14%),
        linear-gradient(95deg,
            oklch(1 0 0 / 0.55) 0%,
            oklch(1 0 0 / 0.40) 22%,
            oklch(1 0 0 / 0.10) 45%,
            transparent 65%),
        radial-gradient(circle at 96% 94%, oklch(1 0 0 / 0.95) 0%, transparent 18%),
        radial-gradient(circle at 12% 18%, oklch(0.62 0.14 70 / 0.06) 0%, transparent 35%);
}

/* Soft fade-to-pure-white at the bottom; matches the next section's pure-white bg. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 50%,
        oklch(1 0 0 / 0.55) 78%,
        oklch(1 0 0) 100%
    );
}

.hero-grid {
    position: relative;
    z-index: 1;
    max-width: 84rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: flex-start;
}

.hero-content {
    max-width: 44rem;
}

/* Huge brand block. Kanji stands on its own (no box), stacked vertically
   above the wordmark so the brand reads as one composed mark. */
.hero-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    line-height: 1;
}
.hero-brand-mark {
    display: inline-block;
    color: var(--seam);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(5rem, 8vw, 7.5rem);
    line-height: 1;
    /* Glow that subtly lifts the kanji off the painting without a box. */
    text-shadow:
        0 0 22px oklch(1 0 0 / 0.6),
        0 0 4px oklch(1 0 0 / 0.7);
    margin-left: -0.05em;
}
.hero-brand-text {
    font-family: var(--font-brand);
    font-weight: 400;
    font-size: clamp(5.5rem, 12vw, 9.5rem);
    color: var(--text-bright);
    letter-spacing: 0.005em;
    line-height: 0.92;
    text-shadow: 0 0 14px oklch(1 0 0 / 0.4);
}

@media (max-width: 900px) {
    .hero { padding: 5.5rem 1rem 4rem; min-height: 92vh; background-position: center; }
    .hero-grid { gap: 1rem; min-height: auto; }
    .hero-brand { gap: 0.15rem; margin-bottom: 1.25rem; }
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.1;
    margin: 0 0 1rem;
    letter-spacing: -0.022em;
    text-shadow: 0 1px 12px oklch(0.98 0.003 250 / 0.5);
}

.hero-tagline .accent {
    color: var(--accent);
}

.hero-sub {
    font-size: 1.0625rem;
    color: var(--text);
    line-height: 1.65;
    max-width: 32rem;
    margin: 0 0 2rem;
    text-shadow: 0 1px 8px oklch(0.98 0.003 250 / 0.7);
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}

/* Scope: hero CTA row — match height with the install-box pill next to it */
.hero-cta-row .btn-secondary {
    align-self: stretch;
    min-height: 3.5rem;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.9375rem;
    border: 1px solid var(--accent);
    transition: background 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--accent-light);
    color: white;
    transform: translateY(-1px);
}

.btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.4rem 0.85rem;
    background: oklch(1 0 0 / 0.72);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: var(--text-bright);
    border: 1px solid oklch(0.40 0.003 250 / 0.14);
    border-radius: 0.65rem;
    font-weight: 500;
    font-size: 0.94rem;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition:
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    box-shadow: 0 6px 18px -10px oklch(0.20 0.003 250 / 0.22);
    overflow: hidden;
    isolation: isolate;
}
/* Kintsugi gold seam that draws in left-to-right on hover. */
.btn-secondary::after {
    content: "";
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 0.55rem;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--seam) 25%,
        var(--seam-bright) 50%,
        var(--seam) 75%,
        transparent 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    filter: drop-shadow(0 0 4px oklch(0.78 0.13 75 / 0.45));
    pointer-events: none;
}
.btn-secondary:hover {
    color: var(--text-bright);
    border-color: oklch(0.62 0.14 70 / 0.45);
    background: oklch(1 0 0 / 0.95);
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px -14px oklch(0.62 0.14 70 / 0.30),
        0 0 0 1px oklch(0.62 0.14 70 / 0.06);
}
.btn-secondary:hover::after {
    transform: scaleX(1);
}
.btn-secondary svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btn-secondary:hover svg {
    transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
    .btn-secondary,
    .btn-secondary:hover,
    .btn-secondary svg,
    .btn-secondary:hover svg,
    .btn-secondary::after,
    .btn-secondary:hover::after {
        transform: none;
        transition: none;
    }
    .btn-secondary:hover::after { transform: scaleX(1); }
}

/* Install command box (npm install -g ...) */
.install-box {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--bg-inset);
    color: var(--text-on-inset);
    border: 1px solid oklch(0.25 0.004 250);
    border-radius: 0.6rem;
    padding: 0.75rem 0.85rem 0.75rem 1.05rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    position: relative;
}
.install-box .prompt {
    color: var(--seam);
    font-weight: 600;
    user-select: none;
}
/* Override the global `code:not(pre code)` styling so the inline command sits
   transparent inside the dark install-box (no nested light pill). */
.install-box code,
.install-box code:not(pre code) {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-on-inset);
    font-size: inherit;
    white-space: nowrap;
}
/* Wide variant: takes full container width and pushes the copy button to the
   far right. Used in the skill sidecar where the install row stretches across
   the whole panel. */
.install-box--wide {
    display: flex;
    width: 100%;
}
.install-box--wide .copy-btn {
    margin-left: auto;
}
.install-box .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border: none;
    background: transparent;
    color: oklch(0.78 0.003 250);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    position: relative;
}
.install-box .copy-btn:hover {
    color: oklch(0.96 0.003 250);
    background: oklch(0.22 0.004 250);
}
.install-box .copy-btn .copy-check {
    display: none;
}
.install-box .copy-btn.copied {
    color: oklch(0.75 0.16 145);
    background: transparent;
}
.install-box .copy-btn.copied .copy-icon {
    display: none;
}
.install-box .copy-btn.copied .copy-check {
    display: inline-block;
}

/* Hero illustration column */
.hero-illustration {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}

/* ── Bowl SVG animation ── */
.kintsugi-bowl {
    width: min(100%, 480px);
    height: auto;
}
.kintsugi-bowl .bowl-stroke {
    stroke: oklch(0.20 0.004 250);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    animation: ink-fade-in 700ms ease-out 200ms forwards;
}
.kintsugi-bowl .bowl-belly {
    fill: oklch(0.20 0.004 250);
    opacity: 0;
    animation: ink-fade-in 700ms ease-out 100ms forwards;
}
.kintsugi-bowl .bowl-shadow {
    fill: oklch(0.78 0.04 70);
    opacity: 0;
    animation: ink-fade-in 700ms ease-out 0ms forwards;
}
.kintsugi-bowl .seam {
    fill: none;
    stroke: var(--seam-bright);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    filter: drop-shadow(0 0 6px oklch(0.78 0.13 75 / 0.45));
    animation: seam-draw 1500ms ease-out 800ms forwards;
}
.kintsugi-bowl .kanji-bg {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 240px;
    fill: oklch(0.62 0.14 70 / 0.04);
    text-anchor: middle;
}

@keyframes ink-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 0.92; transform: translateY(0); }
}
@keyframes seam-draw {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kintsugi-bowl .bowl-stroke,
    .kintsugi-bowl .bowl-belly,
    .kintsugi-bowl .bowl-shadow {
        opacity: 0.92;
        animation: none;
    }
    .kintsugi-bowl .seam {
        stroke-dashoffset: 0;
        animation: none;
    }
}

/* ── Section 2: hostage problem (heavier visual via typography + dark inset, not bg) ── */
.problem-section {
    background: oklch(1 0 0);
    border-top: none;
    border-bottom: 1px solid var(--border);
    padding: 5rem 1.5rem;
}
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 76rem;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .problem-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.problem-section .section-title { color: var(--text-bright); }

/* Soft second paragraph in the problem section: same size as the lede, slightly
   lighter colour so it reads as continuation rather than a new beat. */
.problem-aside {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0;
    opacity: 0.78;
}

/* ── The attack story (dark card) ── */
.attack-story {
    background: var(--bg-inset);
    color: var(--text-on-inset);
    border-radius: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid oklch(0.25 0.004 250);
    box-shadow: 0 12px 40px -22px oklch(0.20 0.003 250 / 0.45);
    margin: 0;
}
.attack-story-eyebrow {
    margin: 0 0 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: oklch(0.62 0.004 250);
}

.attack-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
/* Vertical connector track behind the index badges. */
.attack-steps::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 2px;
    background: linear-gradient(
        180deg,
        oklch(0.78 0.13 75 / 0.6) 0%,
        var(--danger) 60%,
        oklch(0.55 0.18 28 / 0.4) 100%
    );
    border-radius: 2px;
}

.attack-step {
    display: grid;
    grid-template-columns: 36px 28px 1fr;
    align-items: start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    position: relative;
}
/* Dashed separator only spans from the icon column rightward, so it doesn't
   visually cross the index circle or the vertical connector track. */
.attack-step + .attack-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(36px + 0.85rem);
    right: 0;
    height: 0;
    border-top: 1px dashed oklch(0.26 0.004 250);
}

.attack-step-index {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: oklch(0.22 0.004 250);
    border: 1px solid oklch(0.34 0.004 250);
    color: oklch(0.92 0.003 250);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    z-index: 1;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    animation: attack-pulse 6s var(--step-delay, 0s) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.attack-step-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: oklch(0.85 0.003 250);
    margin-top: 4px;
    transition: color 0.4s ease, transform 0.4s ease;
    animation: attack-icon-pulse 6s var(--step-delay, 0s) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.attack-step-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.attack-step-title {
    margin: 0;
    color: oklch(0.96 0.003 250);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.4s ease, transform 0.4s ease;
    animation: attack-title-nudge 6s var(--step-delay, 0s) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.attack-step-sub {
    margin: 0;
    color: oklch(0.66 0.003 250);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Attacker beats (steps 2 and 3) — red tint everywhere visual cues land.
   The badge bg must be fully opaque so the gradient track behind doesn't
   bleed through the circle. */
.attack-step.is-attack .attack-step-index {
    border-color: oklch(0.55 0.18 28 / 0.55);
    color: oklch(0.96 0.003 250);
    background: oklch(0.24 0.05 28);
}
.attack-step.is-attack .attack-step-icon { color: oklch(0.78 0.16 28); }

/* Result row: separated, gold accent so the cost lands. */
.attack-result {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.85rem;
    align-items: start;
    margin-top: 1rem;
    padding: 1rem 0 0.25rem;
    border-top: 1px solid oklch(0.30 0.004 250);
}
.attack-result-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--seam-bright);
    margin-top: 2px;
    filter: drop-shadow(0 0 8px oklch(0.78 0.13 75 / 0.45));
}
.attack-result-title {
    margin: 0 0 0.2rem;
    color: var(--seam-bright);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.attack-result-sub {
    margin: 0;
    color: oklch(0.74 0.003 250);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Pulse animations: each step lights up in turn, 6s loop with --step-delay
   staggered (0s / 2s / 4s) per the inline style. */
@keyframes attack-pulse {
    0%   { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    4%   { box-shadow: 0 0 0 6px oklch(0.78 0.13 75 / 0.18); transform: scale(1.08); }
    10%  { box-shadow: 0 0 0 12px oklch(0.78 0.13 75 / 0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}
@keyframes attack-icon-pulse {
    0%   { transform: translateX(0); }
    4%   { transform: translateX(2px); }
    10%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}
@keyframes attack-title-nudge {
    0%   { transform: translateX(0); }
    4%   { transform: translateX(2px); }
    10%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}
.attack-step.is-attack .attack-step-index {
    animation-name: attack-pulse-attack;
}
@keyframes attack-pulse-attack {
    0%   { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    4%   { box-shadow: 0 0 0 6px oklch(0.55 0.18 28 / 0.22); transform: scale(1.08); }
    10%  { box-shadow: 0 0 0 12px oklch(0.55 0.18 28 / 0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .attack-step-index,
    .attack-step-icon,
    .attack-step-title,
    .rescue-step-index,
    .rescue-step-icon,
    .rescue-step-title {
        animation: none !important;
    }
}

/* ── The rescue story (mirror of attack-story, all-gold positive variant) ── */
.rescue-story {
    background: var(--bg-inset);
    color: var(--text-on-inset);
    border-radius: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid oklch(0.62 0.14 70 / 0.25);
    box-shadow:
        0 12px 40px -22px oklch(0.20 0.003 250 / 0.45),
        inset 0 0 0 1px oklch(0.62 0.14 70 / 0.05);
    margin: 2rem 0 0;
}
.rescue-story-eyebrow {
    margin: 0 0 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--seam);
}

.rescue-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
/* Vertical track behind the index badges — pure gold gradient (no red). */
.rescue-steps::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 1.25rem;
    bottom: 1.25rem;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--seam-bright) 0%,
        var(--seam) 50%,
        oklch(0.62 0.14 70 / 0.45) 100%
    );
    border-radius: 2px;
}

.rescue-step {
    display: grid;
    grid-template-columns: 36px 28px 1fr;
    align-items: start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    position: relative;
}
.rescue-step + .rescue-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(36px + 0.85rem);
    right: 0;
    height: 0;
    border-top: 1px dashed oklch(0.62 0.14 70 / 0.18);
}

.rescue-step-index {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: oklch(0.24 0.04 70);
    border: 1px solid oklch(0.62 0.14 70 / 0.50);
    color: var(--seam-bright);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    z-index: 1;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    animation: attack-pulse 6s var(--step-delay, 0s) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.rescue-step-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--seam-bright);
    margin-top: 4px;
    transition: color 0.4s ease, transform 0.4s ease;
    animation: attack-icon-pulse 6s var(--step-delay, 0s) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.rescue-step-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.rescue-step-title {
    margin: 0;
    color: oklch(0.96 0.003 250);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.4s ease, transform 0.4s ease;
    animation: attack-title-nudge 6s var(--step-delay, 0s) infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.rescue-step-sub {
    margin: 0;
    color: oklch(0.72 0.003 250);
    font-size: 0.82rem;
    line-height: 1.55;
}
.rescue-step-sub code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 0.04em 0.32em;
    background: oklch(0.24 0.004 250);
    border: 1px solid oklch(0.34 0.004 250);
    border-radius: 0.3rem;
    color: var(--seam-bright);
    white-space: nowrap;
}

/* Result row: gold-on-dark, "rescue complete" tone */
.rescue-result {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.85rem;
    align-items: start;
    margin-top: 1rem;
    padding: 1rem 0 0.25rem;
    border-top: 1px solid oklch(0.62 0.14 70 / 0.22);
}
.rescue-result-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--seam-bright);
    margin-top: 2px;
    filter: drop-shadow(0 0 10px oklch(0.78 0.13 75 / 0.55));
}
.rescue-result-title {
    margin: 0 0 0.2rem;
    color: var(--seam-bright);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.rescue-result-sub {
    margin: 0;
    color: oklch(0.78 0.003 250);
    font-size: 0.82rem;
    line-height: 1.55;
}
.rescue-result-sub code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 0.04em 0.32em;
    background: oklch(0.24 0.004 250);
    border: 1px solid oklch(0.34 0.004 250);
    border-radius: 0.3rem;
    color: var(--seam-bright);
    white-space: nowrap;
}

/* Horizontal rescue timeline variant — drops the inset-card chrome and
   rearranges the steps into a 4-column timeline with a terminus node. The
   horizontal seam .rescue-seam threads behind the index badges. */
.rescue-story--horizontal {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 2rem 0 0;
    position: relative;
}
.rescue-story--horizontal .rescue-story-eyebrow {
    text-align: center;
    margin-bottom: 2rem;
}
.rescue-seam {
    position: absolute;
    top: 5rem;
    left: 6%;
    right: 6%;
    width: 88%;
    height: 14px;
    pointer-events: none;
}
@media (max-width: 900px) {
    .rescue-seam { display: none; }
}
.rescue-steps--horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) {
    .rescue-steps--horizontal {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}
.rescue-steps--horizontal::before { display: none; }
.rescue-steps--horizontal .rescue-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    padding: 0.25rem 0.25rem 0;
}
.rescue-steps--horizontal .rescue-step + .rescue-step::before { display: none; }
.rescue-steps--horizontal .rescue-step-icon { display: none; }
.rescue-steps--horizontal .rescue-step-index {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
    background: var(--bg-inset);
    border: 1.5px solid oklch(0.62 0.14 70 / 0.55);
    color: var(--seam-bright);
    box-shadow: 0 0 0 6px var(--bg-inset), 0 0 16px oklch(0.78 0.13 75 / 0.25);
    animation: none;
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.rescue-steps--horizontal .rescue-step:hover .rescue-step-index {
    transform: translateY(-2px);
    box-shadow: 0 0 0 6px var(--bg-inset), 0 0 22px oklch(0.78 0.13 75 / 0.45);
}
.section-dark--b .rescue-steps--horizontal .rescue-step-index {
    box-shadow: 0 0 0 6px oklch(0.225 0.004 250), 0 0 16px oklch(0.78 0.13 75 / 0.25);
}
.section-dark--b .rescue-steps--horizontal .rescue-step:hover .rescue-step-index {
    box-shadow: 0 0 0 6px oklch(0.225 0.004 250), 0 0 22px oklch(0.78 0.13 75 / 0.45);
}
.rescue-steps--horizontal .rescue-step-body {
    align-items: center;
}
.rescue-steps--horizontal .rescue-step-title {
    font-size: 1.05rem;
    line-height: 1.3;
    animation: none;
    letter-spacing: -0.005em;
}
.rescue-steps--horizontal .rescue-step-sub {
    font-size: 0.86rem;
    max-width: 18rem;
    line-height: 1.55;
}
.rescue-step--terminus .rescue-step-index {
    background: linear-gradient(135deg, oklch(0.32 0.06 75) 0%, oklch(0.22 0.02 75) 100%) !important;
    border-color: var(--seam-bright) !important;
    color: var(--seam-bright);
}
.section-dark--b .rescue-step--terminus .rescue-step-index {
    box-shadow: 0 0 0 6px oklch(0.225 0.004 250), 0 0 26px oklch(0.78 0.13 75 / 0.55), inset 0 0 0 1px oklch(0.78 0.13 75 / 0.3) !important;
}
.rescue-step--terminus .rescue-step-title {
    color: var(--seam-bright);
}

/* ── Section 2.5: 7702 counter ("their move vs our move") ── */
.counter-section {
    padding-top: 6rem;
    padding-bottom: 5.5rem;
    border-top: 1px solid var(--border);
}

/* Diagram-style counter: three columns — their-move (left) | seam-spark (middle)
   | our-move (right). Sides are unboxed typographic diagrams; the middle is a
   vertical gold seam with a pulsing spark labelled "the overwrite moment". */
.counter-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5rem;
    align-items: stretch;
    margin-top: 2.75rem;
    position: relative;
}
@media (max-width: 900px) {
    .counter-diagram {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}
.counter-side {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.25rem 0;
}
.counter-side-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
.counter-side--attack .counter-side-eyebrow { color: var(--danger); }
.counter-side--defense .counter-side-eyebrow { color: var(--seam); }
.counter-side-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.3vw, 1.85rem);
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.55rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
}
.counter-side-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.counter-side-steps li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.85rem;
    align-items: start;
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.55;
}
.counter-side-num {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1;
}
.counter-side--attack .counter-side-num {
    border-color: oklch(0.55 0.18 28 / 0.5);
    color: var(--danger);
    background: oklch(0.55 0.18 28 / 0.05);
}
.counter-side--defense .counter-side-num {
    border-color: oklch(0.62 0.14 70 / 0.5);
    color: var(--accent);
    background: oklch(0.62 0.14 70 / 0.05);
}
.counter-side-steps code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 0.04em 0.32em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--text-bright);
    white-space: nowrap;
}
.counter-side-result {
    margin: 0.85rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid var(--border);
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.counter-side--attack .counter-side-result {
    color: var(--danger);
    border-top-color: oklch(0.55 0.18 28 / 0.25);
}
.counter-side--defense .counter-side-result {
    color: var(--accent);
    border-top-color: oklch(0.62 0.14 70 / 0.25);
}

/* Middle column: vertical seam SVG + spark + label. */
.counter-spark {
    position: relative;
    width: 6rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}
@media (max-width: 900px) {
    .counter-spark {
        width: 100%;
        min-height: 3.5rem;
        flex-direction: row;
        gap: 0.85rem;
    }
}
.counter-spark-seam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 18px;
    height: 100%;
    transform: translateX(-50%);
}
@media (max-width: 900px) {
    .counter-spark-seam {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 16px;
        transform: translateY(-50%);
    }
}
.counter-spark-pulse {
    position: relative;
    z-index: 2;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--seam-bright);
    box-shadow: 0 0 22px oklch(0.78 0.13 75 / 0.75), 0 0 8px oklch(0.78 0.13 75 / 0.95);
    animation: counter-spark-pulse 3.6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
}
@keyframes counter-spark-pulse {
    0%   { transform: scale(0.7);  opacity: 0.55; }
    12%  { transform: scale(1.25); opacity: 1; }
    32%  { transform: scale(1);    opacity: 0.9; }
    100% { transform: scale(0.7);  opacity: 0.55; }
}
.counter-spark-label {
    position: relative;
    z-index: 1;
    margin-top: 0.85rem;
    text-align: center;
    color: var(--seam);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.4;
    background: var(--bg-deep);
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
}
@media (max-width: 900px) {
    .counter-spark-label {
        margin-top: 0;
        background: var(--bg-deep);
    }
}

.counter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (max-width: 900px) {
    .counter-grid { grid-template-columns: 1fr; }
}
.counter-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 2rem 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.counter-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 1rem 1rem 0 0;
    pointer-events: none;
}
.counter-card--attack {
    border-color: oklch(0.55 0.18 28 / 0.35);
    background:
        linear-gradient(180deg, oklch(0.55 0.18 28 / 0.05) 0%, transparent 60%),
        var(--bg-surface);
    box-shadow: 0 12px 36px -22px oklch(0.55 0.18 28 / 0.25);
}
.counter-card--attack::before {
    background: linear-gradient(90deg, transparent 0%, var(--danger) 50%, transparent 100%);
}
.counter-card--defense {
    border-color: oklch(0.62 0.14 70 / 0.40);
    background:
        linear-gradient(180deg, oklch(0.62 0.14 70 / 0.06) 0%, transparent 60%),
        var(--bg-surface);
    box-shadow: 0 12px 36px -22px oklch(0.62 0.14 70 / 0.30);
}
.counter-card--defense::before {
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}
.counter-card-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
}
.counter-card--attack .counter-card-eyebrow { color: var(--danger); }
.counter-card--defense .counter-card-eyebrow { color: var(--accent); }
.counter-card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.012em;
}
.counter-steps {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.counter-steps li {
    display: grid;
    grid-template-columns: 1.85rem 1fr;
    gap: 0.85rem;
    align-items: start;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
}
.counter-step-num {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-deep);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1;
    margin-top: 0.05rem;
}
.counter-card--attack .counter-step-num {
    border-color: oklch(0.55 0.18 28 / 0.45);
    color: var(--danger);
    background: oklch(0.55 0.18 28 / 0.06);
}
.counter-card--defense .counter-step-num {
    border-color: oklch(0.62 0.14 70 / 0.45);
    color: var(--accent);
    background: oklch(0.62 0.14 70 / 0.06);
}
.counter-steps code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 0.04em 0.32em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--text-bright);
    white-space: nowrap;
}
.counter-card-result {
    margin: 0.6rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.55;
    background: var(--bg-elevated);
    color: var(--text);
    font-weight: 500;
}
.counter-card--attack .counter-card-result {
    background: oklch(0.55 0.18 28 / 0.08);
    color: var(--text-bright);
    border-left: 3px solid var(--danger);
}
.counter-card--defense .counter-card-result {
    background: oklch(0.62 0.14 70 / 0.08);
    color: var(--text-bright);
    border-left: 3px solid var(--accent);
}
.counter-footnote {
    margin: 1.75rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.counter-footnote code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 0.04em 0.32em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--text-bright);
}

/* ── Dark sections (the "how" cluster: coverage + how) ──
   The <section> wrapper spans the full viewport with the dark bg; an inner
   .landing-section caps the content width and centres it. Two alternating
   shades give the scroll some rhythm. */
.section-dark {
    color: oklch(0.92 0.003 250);
    position: relative;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}
.section-dark--a { background: oklch(0.19 0.004 250); }
.section-dark--b { background: oklch(0.225 0.004 250); }

/* The last main section before the reveal: rounded bottom corners so it floats
   like a card above the white footer reveal underneath. */
.section-dark--last {
    border-bottom-left-radius: 3rem;
    border-bottom-right-radius: 3rem;
    overflow: hidden;
    box-shadow: 0 24px 48px -32px oklch(0.16 0.004 250 / 0.45);
}

/* Subtle gold dot grid behind dark sections so they don't read as flat black. */
.section-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(oklch(0.78 0.13 75 / 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    z-index: 0;
}
.section-dark > .landing-section { position: relative; z-index: 1; }

/* Pure-white sections that span the full viewport. Used for "Open source"
   and "Get started" so the lower half of the page reads as one bright surface
   matching the problem section, all the way to the footer. */
.section-light {
    background: oklch(1 0 0);
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.section-dark .section-title {
    color: oklch(0.96 0.003 250);
}
.section-dark .section-lede {
    color: oklch(0.78 0.003 250);
}
.section-dark .section-eyebrow {
    color: var(--seam);
}

/* feature-card and step-card on dark: invert surface to dark, keep gold accents */
.section-dark .feature-card,
.section-dark .step-card {
    background: oklch(0.20 0.004 250);
    border-color: oklch(0.32 0.004 250);
    color: oklch(0.92 0.003 250);
}
.section-dark--b .feature-card,
.section-dark--b .step-card {
    background: oklch(0.24 0.004 250);
    border-color: oklch(0.36 0.004 250);
}
.section-dark .feature-card:hover,
.section-dark .step-card:hover {
    border-color: oklch(0.62 0.14 70 / 0.45);
    box-shadow: 0 8px 28px -14px oklch(0.62 0.14 70 / 0.20);
}
.section-dark .feature-card h3,
.section-dark .step-card h3 {
    color: oklch(0.96 0.003 250);
}
.section-dark .feature-card p,
.section-dark .step-card p {
    color: oklch(0.74 0.003 250);
}
.section-dark .feature-card-icon {
    background: oklch(0.62 0.14 70 / 0.18);
    color: var(--seam);
    border: 1px solid oklch(0.62 0.14 70 / 0.30);
}
.section-dark .step-num {
    background: var(--accent);
    color: oklch(0.16 0.003 250);
    box-shadow: 0 0 0 4px oklch(0.62 0.14 70 / 0.12);
}

/* Principle cards inside dark sections */
.section-dark .principle-card {
    background: oklch(0.22 0.004 250);
    border-color: oklch(0.62 0.14 70 / 0.22);
    box-shadow: 0 8px 26px -18px oklch(0 0 0 / 0.45);
}
.section-dark--b .principle-card { background: oklch(0.26 0.004 250); }
.section-dark .principle-card:hover {
    border-color: oklch(0.62 0.14 70 / 0.50);
    box-shadow: 0 12px 32px -18px oklch(0.62 0.14 70 / 0.30);
}
.section-dark .principle-card-icon {
    background: oklch(0.62 0.14 70 / 0.18);
    border-color: oklch(0.62 0.14 70 / 0.40);
    color: var(--seam-bright);
}
.section-dark .principle-card-title { color: oklch(0.96 0.003 250); }
.section-dark .principle-card-body { color: oklch(0.74 0.003 250); }

/* Deployments panel inside dark sections */
.section-dark .deployments-panel {
    background: oklch(0.22 0.004 250);
    border-color: oklch(0.32 0.004 250);
    box-shadow: 0 8px 26px -18px oklch(0 0 0 / 0.45);
}
.section-dark--b .deployments-panel { background: oklch(0.26 0.004 250); }
.section-dark .deployments-panel-head { border-bottom-color: oklch(0.34 0.004 250); }
.section-dark .deployments-panel-eyebrow { color: oklch(0.62 0.004 250); }
.section-dark .deployment-network { border-top-color: oklch(0.32 0.004 250 / 0.9); }
.section-dark .deployment-network-name { color: oklch(0.96 0.003 250); }
.section-dark .deployment-network-status--ok {
    color: oklch(0.78 0.16 145);
    background: oklch(0.78 0.16 145 / 0.14);
    border-color: oklch(0.78 0.16 145 / 0.40);
}
.section-dark .deployment-network-status--pending {
    color: oklch(0.65 0.004 250);
    background: oklch(0.30 0.004 250);
    border-color: oklch(0.36 0.004 250);
}
.section-dark .deployment-row:hover { background: oklch(0.30 0.004 250); }
.section-dark .deployment-row-label { color: oklch(0.65 0.004 250); }
.section-dark .deployment-address { color: oklch(0.92 0.003 250); }
.section-dark .deployment-copy {
    border-color: oklch(0.36 0.004 250);
    color: oklch(0.65 0.004 250);
}
.section-dark .deployment-copy:hover {
    color: var(--seam-bright);
    border-color: var(--seam);
    background: oklch(0.30 0.004 250);
}

/* Lane cards inside dark sections (per-lane accents kept) */
.section-dark .lane-card {
    background: oklch(0.22 0.004 250);
    border-color: oklch(0.32 0.004 250);
    box-shadow: 0 8px 26px -18px oklch(0 0 0 / 0.45);
}
.section-dark--b .lane-card { background: oklch(0.26 0.004 250); }
.section-dark .lane-card:hover {
    box-shadow: 0 16px 36px -20px oklch(0 0 0 / 0.55);
}
.section-dark .lane-icon {
    background: oklch(0.30 0.004 250);
    border-color: oklch(0.36 0.004 250);
}
.section-dark .lane-card--panic .lane-icon {
    background: oklch(0.55 0.18 28 / 0.16);
    border-color: oklch(0.55 0.18 28 / 0.45);
    color: oklch(0.78 0.16 28);
}
.section-dark .lane-card--learn .lane-icon {
    background: oklch(0.62 0.14 70 / 0.16);
    border-color: oklch(0.62 0.14 70 / 0.45);
    color: var(--seam-bright);
}
.section-dark .lane-card--audit .lane-icon {
    background: oklch(0.55 0.06 220 / 0.16);
    border-color: oklch(0.55 0.06 220 / 0.45);
    color: oklch(0.78 0.06 220);
}
.section-dark .lane-eyebrow { color: oklch(0.62 0.004 250); }
.section-dark .lane-card--panic .lane-eyebrow { color: oklch(0.78 0.16 28); }
.section-dark .lane-card--learn .lane-eyebrow { color: var(--seam-bright); }
.section-dark .lane-card--audit .lane-eyebrow { color: oklch(0.78 0.06 220); }
.section-dark .lane-title { color: oklch(0.96 0.003 250); }
.section-dark .lane-body { color: oklch(0.74 0.003 250); }
.section-dark .lane-cta { color: var(--seam-bright); }
.section-dark .lane-card--panic .lane-cta { color: oklch(0.78 0.16 28); }
.section-dark .lane-card--audit .lane-cta { color: oklch(0.78 0.06 220); }

/* Manifesto inside dark section */
.section-dark .manifesto-title { color: oklch(0.96 0.003 250); }
.section-dark .manifesto-title .accent { color: var(--seam-bright); }
.section-dark .manifesto-lede { color: oklch(0.78 0.003 250); }
.section-dark .callout {
    background: oklch(0.62 0.14 70 / 0.10);
    border-left-color: var(--seam);
    color: oklch(0.94 0.003 250);
    font-style: italic;
}

/* The divider rule between dark sections — softer so it reads as one cluster */
.section-dark + .section-dark > .divider-rule,
.section-dark .divider-rule {
    background: linear-gradient(
        90deg,
        transparent 0%,
        oklch(0.32 0.004 250) 30%,
        oklch(0.62 0.14 70 / 0.4) 50%,
        oklch(0.32 0.004 250) 70%,
        transparent 100%
    );
}

/* ── Section 3: what sweepers ignore (left-behind gallery) ──
   Three named asset cards tilted like collected polaroids with a single gold
   kintsugi seam drawing diagonally across all three. */
.leftbehind-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.75rem;
    position: relative;
    padding: 1rem 0.5rem 1.5rem;
}
@media (max-width: 900px) {
    .leftbehind-stack {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0;
    }
}
.leftbehind-card {
    position: relative;
    background: oklch(0.225 0.004 250);
    border: 1px solid oklch(0.32 0.004 250);
    border-radius: 0.85rem;
    padding: 1.6rem 1.4rem 1.4rem;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    isolation: isolate;
}
.leftbehind-card:nth-child(1) { transform: rotate(-1.7deg); }
.leftbehind-card:nth-child(2) { transform: rotate(0.6deg) translateY(0.6rem); }
.leftbehind-card:nth-child(3) { transform: rotate(2deg); }
@media (max-width: 900px) {
    .leftbehind-card,
    .leftbehind-card:nth-child(1),
    .leftbehind-card:nth-child(2),
    .leftbehind-card:nth-child(3) { transform: none; }
}
.leftbehind-card:hover {
    transform: translateY(-4px) rotate(0);
    border-color: oklch(0.62 0.14 70 / 0.45);
    box-shadow: 0 20px 44px -22px oklch(0.78 0.13 75 / 0.35);
    z-index: 2;
}
.leftbehind-kanji {
    position: absolute;
    top: -1.5rem;
    right: -1rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10rem;
    line-height: 1;
    color: oklch(0.78 0.13 75 / 0.09);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.leftbehind-card-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 0.9rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--seam);
}
.leftbehind-card-name {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 1.18rem;
    color: oklch(0.96 0.003 250);
    margin: 0 0 0.4rem;
    letter-spacing: -0.005em;
    line-height: 1.15;
    font-weight: 500;
    word-break: break-word;
}
.leftbehind-card-name.is-display {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
}
.leftbehind-card-tag {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: oklch(0.62 0.003 250);
    letter-spacing: 0.02em;
}
.leftbehind-card-tag .dot {
    margin: 0 0.4em;
    color: oklch(0.50 0.003 250);
}
.leftbehind-card-note {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: oklch(0.78 0.003 250);
}

/* Diagonal gold seam crossing all three cards. */
.leftbehind-seam {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}
.leftbehind-seam svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
@media (max-width: 900px) {
    .leftbehind-seam { display: none; }
}

/* Legacy cards-row (kept for any non-landing usage) */
.cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 900px) {
    .cards-row { grid-template-columns: 1fr; }
}
.feature-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
    border-color: var(--border-accent);
    box-shadow: 0 6px 24px oklch(0.62 0.14 70 / 0.08);
}
.feature-card-icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--accent-glow);
    color: var(--accent);
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
}
.feature-card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Section 4: how it works (3 steps) ── */
.steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
@media (max-width: 900px) {
    .steps-row { grid-template-columns: 1fr; }
}
.step-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    position: relative;
}
.step-num {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 0.875rem;
}
.step-card h3 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 0.5rem;
}
.step-card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}

.callout {
    background: var(--accent-glow);
    border-left: 3px solid var(--seam);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 1rem 1.25rem;
    color: var(--text);
    font-size: 1rem;
    font-style: italic;
}

/* ── Section 5: Two ways in (UI + CLI as macOS-style app windows) ── */
.usage-stage {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.25rem;
    margin-top: 2.5rem;
    perspective: 1400px;
}
@media (max-width: 900px) {
    .usage-stage { grid-template-columns: 1fr; gap: 1.5rem; }
}
.usage-stage-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.usage-stage-card--front {
    z-index: 2;
}
.usage-stage-card--back {
    z-index: 1;
    transform: translateY(1.5rem);
}
@media (max-width: 900px) {
    .usage-stage-card--back { transform: none; }
}

/* App window mock */
.window {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow:
        0 24px 48px -28px oklch(0.20 0.003 250 / 0.32),
        0 6px 16px -10px oklch(0.20 0.003 250 / 0.18);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}
.usage-stage-card--front .window {
    transform: rotate(-1.1deg);
}
.usage-stage-card--back .window {
    transform: rotate(2deg);
}
@media (max-width: 900px) {
    .usage-stage-card--front .window,
    .usage-stage-card--back .window { transform: none; }
}
.usage-stage-card:hover {
    z-index: 3;
}
.usage-stage-card:hover .window {
    transform: rotate(0) translateY(-6px) !important;
    box-shadow:
        0 36px 70px -28px oklch(0.20 0.003 250 / 0.42),
        0 12px 28px -10px oklch(0.20 0.003 250 / 0.26);
}
.window-chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.85rem;
    background: linear-gradient(180deg, oklch(0.94 0.003 250) 0%, oklch(0.92 0.003 250) 100%);
    border-bottom: 1px solid var(--border);
}
.window-chrome--terminal {
    background: linear-gradient(180deg, oklch(0.22 0.003 250) 0%, oklch(0.18 0.004 250) 100%);
    border-bottom-color: oklch(0.30 0.004 250);
}
.window-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.window-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: oklch(0.78 0.003 250);
    border: 1px solid oklch(0.62 0.003 250 / 0.4);
}
.window-dot--red { background: oklch(0.72 0.18 28); border-color: oklch(0.55 0.18 28 / 0.6); }
.window-dot--yellow { background: oklch(0.85 0.16 88); border-color: oklch(0.65 0.18 88 / 0.6); }
.window-dot--green { background: oklch(0.78 0.16 145); border-color: oklch(0.55 0.16 145 / 0.6); }
.window-title {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0.5rem;
}
.window-title--terminal {
    color: oklch(0.74 0.003 250);
}
.window-spacer {
    /* keeps title centered by mirroring dot column width */
    width: calc(11px * 3 + 0.4rem * 2);
}

.window-body {
    background: var(--bg-elevated);
    line-height: 0;
}
.window-body--ui {
    padding: 0;
}
.window-body--ui img {
    display: block;
    width: 100%;
    height: auto;
}
.window-body--terminal {
    background: var(--bg-inset);
    color: var(--text-on-inset);
    padding: 1.1rem 1.25rem 1.4rem;
    line-height: 1.85;
    min-height: 320px;
}
.window-terminal-pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-on-inset);
    white-space: pre;
}
.window-terminal-pre .prompt { color: var(--seam-bright); font-weight: 600; }
.window-terminal-pre .comment { color: oklch(0.55 0.004 250); }
.window-terminal-pre .cursor {
    color: var(--seam-bright);
    animation: terminal-cursor 1.1s steps(2) infinite;
    display: inline-block;
    margin-left: 0.1rem;
}
@keyframes terminal-cursor { to { opacity: 0; } }

.usage-card-meta {
    padding: 0 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.usage-card-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--seam);
}
.usage-card-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.012em;
}
.usage-card-bullets {
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.usage-card-bullets li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}
.usage-card-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--seam);
}
.usage-card-bullets code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 0.04em 0.32em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--text-bright);
    white-space: nowrap;
}
.usage-card-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.35rem;
    color: var(--accent);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    margin-top: 0.25rem;
    transition: color 0.15s ease, transform 0.15s ease;
}
.usage-card-cta:hover {
    color: var(--accent-light);
    transform: translateX(2px);
}

/* ── Section 5.5: Ask your agent (atmospheric bg from agent-bg.webp) ── */
.agent-section {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
    position: relative;
    isolation: isolate;
}
/* Full-bleed atmospheric backdrop layered behind the section. The image
   ghosts through a heavy cool-snow veil so the content stays legible. */
.agent-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background:
        linear-gradient(180deg,
            oklch(0.975 0.003 250 / 0.78) 0%,
            oklch(0.975 0.003 250 / 0.96) 50%,
            oklch(0.975 0.003 250 / 0.92) 100%),
        url("/assets/images/agent-bg.webp") center / cover no-repeat;
    z-index: -1;
    pointer-events: none;
}
.agent-section > * { position: relative; z-index: 1; }
.agent-section .section-title .accent {
    display: inline-block;
    font-family: var(--font-brand);
    font-weight: 400;
    color: var(--seam-bright);
    font-size: 1.18em;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 0 0.04em 0.04em;
}
.copy-btn-label { display: inline; }

.agent-conversation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 62rem;
    margin: 2.75rem auto 2.5rem;
}

/* Typing indicator: 3 dots that bounce in sequence (typing-dot keyframe). */
.chat-bubble--typing {
    padding: 0.85rem 1.2rem;
    min-width: 4.5rem;
}
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
}
.typing-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--seam);
    animation: typing-dot 1.25s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
.chat-message {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.85rem;
    align-items: flex-end;
    max-width: 80%;
}
.chat-message--user {
    margin-left: auto;
    grid-template-columns: 1fr auto;
}
.chat-message--agent {
    margin-right: auto;
    grid-template-columns: auto 1fr;
}
.chat-meta {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.4rem;
}
.chat-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}
.chat-avatar--user {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.chat-avatar--agent {
    background: oklch(0.97 0.012 70);
    color: var(--seam);
    border: 1px solid oklch(0.62 0.14 70 / 0.40);
    font-family: var(--font-display);
    font-size: 1.15rem;
    box-shadow: 0 0 0 4px oklch(0.62 0.14 70 / 0.10);
}

.chat-bubble {
    position: relative;
    background: oklch(1 0 0 / 0.92);
    border: 1px solid var(--border);
    border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
    padding: 0.95rem 3rem 0.95rem 1.1rem;
    box-shadow: 0 8px 22px -14px oklch(0.20 0.003 250 / 0.30);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.chat-bubble--agent {
    background:
        linear-gradient(180deg, oklch(0.62 0.14 70 / 0.10) 0%, oklch(0.62 0.14 70 / 0.04) 100%),
        oklch(1 0 0 / 0.94);
    border-color: oklch(0.62 0.14 70 / 0.45);
    border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
    padding-right: 1.1rem;
    box-shadow: 0 10px 26px -16px oklch(0.62 0.14 70 / 0.50);
}
.chat-bubble-text {
    margin: 0;
    color: var(--text-bright);
    font-size: 1.0625rem;
    line-height: 1.55;
}
.chat-bubble--agent .chat-bubble-text {
    font-family: var(--font-display);
    font-size: 1.0625rem;
}
.chat-bubble-meta {
    margin: 0.6rem 0 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.chat-bubble-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-grid;
    place-items: center;
    background: oklch(1 0 0 / 0.6);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.chat-bubble-copy:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: oklch(1 0 0);
}
.chat-bubble-copy .copy-check { display: none; }
.chat-bubble-copy.copied {
    color: oklch(0.62 0.16 145);
    border-color: oklch(0.62 0.16 145 / 0.55);
}
.chat-bubble-copy.copied .copy-icon { display: none; }
.chat-bubble-copy.copied .copy-check { display: inline-block; }

/* Skill sidecar: install command, then chips under, then CTA — single column */
.skill-sidecar {
    background: oklch(1 0 0 / 0.94);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 32px -18px oklch(0.20 0.003 250 / 0.30);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.skill-sidecar-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}
.skill-sidecar-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    margin: 0;
}
.agent-clients {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.agent-client-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
}
.skill-sidecar-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.skill-sidecar-row .skill-sidecar-cta {
    flex-shrink: 0;
}
.skill-sidecar-works {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
}
.skill-sidecar-works .skill-sidecar-label {
    margin: 0;
}

@media (max-width: 700px) {
    .chat-message { max-width: 100%; }
}

/* ── Outro reveal: Our Stance + footer fixed at viewport bottom, behind main ──
   When the user scrolls past <main>, the main element scrolls UP off the screen
   and uncovers the .outro-reveal layer fixed below it. JS sets <main>'s
   margin-bottom to the rendered height of .outro-reveal so the page can scroll
   far enough to fully reveal it. */
.outro-reveal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background: oklch(1 0 0);
    pointer-events: none;
}
.outro-reveal > * { pointer-events: auto; }

main.landing {
    position: relative;
    z-index: 1;
    /* Fallback solid bg so the reveal stays hidden even on sections without
       their own background. JS overrides margin-bottom to match the reveal height. */
    background: var(--bg-deep);
    margin-bottom: 600px;
}

.outro-section { padding-top: 3rem; padding-bottom: 0.5rem; }

/* ── Section 6: Open source manifesto ── */
.manifesto {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 1.5rem;
}
.manifesto-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.8vw, 2.6rem);
    font-weight: 600;
    color: var(--text-bright);
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin: 0.25rem 0 0.75rem;
}
.manifesto-title .accent { color: var(--accent); }
.manifesto-lede {
    font-size: 1.0625rem;
    color: var(--text);
    line-height: 1.7;
    margin: 0;
    max-width: 44rem;
    margin: 0 auto;
}

/* Editorial manifesto pillars — replaces the boxy principle-cards.
   Three centred typographic statements separated by gold seam-rule hairlines. */
.manifesto-pillars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    max-width: 52rem;
    margin: 0.5rem auto 2.25rem;
}
.manifesto-pillar {
    text-align: center;
    max-width: 40rem;
    margin: 0;
}
.manifesto-pillar-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.005em;
    margin: 0 0 0.55rem;
    color: oklch(0.96 0.003 250);
}
.manifesto-pillar-title .brush {
    font-family: var(--font-brand);
    font-weight: 400;
    color: var(--seam-bright);
    letter-spacing: 0.01em;
    font-size: 1.12em;
    line-height: 1;
}
.manifesto-pillar-sub {
    font-size: 1rem;
    line-height: 1.6;
    color: oklch(0.78 0.003 250);
    margin: 0;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.manifesto-pillars .seam-rule {
    max-width: 22rem;
    height: 12px;
}

/* Tasteful donation prompt — sits after the manifesto pillars. Tone matches
   the "no fees, no upsell" stance: it's a tip jar, never an ask. */
.manifesto-tip {
    max-width: 44rem;
    margin: 1rem auto 2.25rem;
    padding: 1.25rem 1.5rem 1.4rem;
    border-radius: 0.9rem;
    background: linear-gradient(180deg,
        oklch(0.62 0.14 70 / 0.07) 0%,
        oklch(0.62 0.14 70 / 0.02) 100%),
        oklch(0.22 0.004 250);
    border: 1px solid oklch(0.62 0.14 70 / 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}
.manifesto-tip-text {
    margin: 0;
    color: oklch(0.82 0.003 250);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 34rem;
}
.manifesto-tip-text .manifesto-tip-accent {
    color: var(--seam-bright);
    font-weight: 600;
    font-family: var(--font-display);
}
.manifesto-tip-address {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.55rem 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid oklch(0.62 0.14 70 / 0.3);
    border-radius: 0.55rem;
    max-width: 100%;
}
.manifesto-tip-address code {
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--seam-bright);
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
@media (max-width: 540px) {
    .manifesto-tip-address code {
        font-size: 0.72rem;
    }
}
.manifesto-tip-copy {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    border-radius: 0.4rem;
    border: none;
    background: transparent;
    color: var(--seam);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}
.manifesto-tip-copy:hover {
    color: var(--seam-bright);
    background: oklch(0.62 0.14 70 / 0.12);
}
.manifesto-tip-copy .copy-check { display: none; }
.manifesto-tip-copy.copied {
    color: oklch(0.78 0.16 145);
    background: oklch(0.62 0.16 145 / 0.10);
}
.manifesto-tip-copy.copied .copy-icon { display: none; }
.manifesto-tip-copy.copied .copy-check { display: inline-block; }
.manifesto-tip-note {
    margin: 0;
    font-size: 0.78rem;
    color: oklch(0.62 0.003 250);
    letter-spacing: 0.01em;
}

/* Deployments panel (replaces the loose contract-pills) */
.deployments-panel {
    background: oklch(1 0 0);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 26px -18px oklch(0.20 0.003 250 / 0.30);
    max-width: 56rem;
    margin: 0 auto;
}
.deployments-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
}
.deployments-panel-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
}
.deployments-panel-source {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.deployments-panel-source:hover { color: var(--accent-light); transform: translateX(2px); }
.deployments-panel-links {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.deployments-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.deployment-network {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0 0.35rem;
    margin-top: 0.35rem;
    border-top: 1px dashed oklch(0.90 0.004 250);
}
.deployment-network:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.deployment-network-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-bright);
}
.deployment-network-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}
.deployment-network-status--ok {
    color: oklch(0.42 0.12 145);
    background: oklch(0.78 0.16 145 / 0.18);
    border: 1px solid oklch(0.42 0.12 145 / 0.35);
}
.deployment-network-status--pending {
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}
.deployment-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.6fr) 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.45rem;
    transition: background-color 0.15s ease;
}
.deployment-row:hover { background: var(--bg-elevated); }
.deployment-row-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.deployment-address {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-bright);
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.deployment-copy {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.deployment-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-elevated); }
.deployment-copy .copy-check { display: none; }
.deployment-copy.copied { color: oklch(0.62 0.16 145); border-color: oklch(0.62 0.16 145 / 0.55); }
.deployment-copy.copied .copy-icon { display: none; }
.deployment-copy.copied .copy-check { display: inline-block; }

/* ── Section 7: get-started lanes (3 doors with personality) ── */
.lanes-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
@media (max-width: 900px) {
    .lanes-row { grid-template-columns: 1fr; }
}
.lane-card {
    position: relative;
    background: oklch(1 0 0 / 0.94);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1.6rem 1.5rem 1.75rem;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 6px 20px -16px oklch(0.20 0.003 250 / 0.18);
}
/* Per-lane top accent strip: transparent by default, gold-seam draws in on hover. */
.lane-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        oklch(0.78 0.13 75 / 0) 30%,
        oklch(0.78 0.13 75 / 0) 70%,
        transparent 100%);
    transition: background 280ms ease;
    pointer-events: none;
}
.lane-card:hover::before {
    background: linear-gradient(90deg,
        transparent 0%,
        oklch(0.78 0.13 75 / 0.95) 30%,
        oklch(0.78 0.13 75 / 0.95) 70%,
        transparent 100%);
    filter: drop-shadow(0 0 6px oklch(0.78 0.13 75 / 0.45));
}
.lane-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -18px oklch(0.20 0.003 250 / 0.30);
}
.lane-card--panic { border-color: oklch(0.55 0.18 28 / 0.30); }
.lane-card--panic:hover { border-color: var(--danger); box-shadow: 0 14px 32px -16px oklch(0.55 0.18 28 / 0.32); }
.lane-card--learn { border-color: oklch(0.62 0.14 70 / 0.30); }
.lane-card--learn:hover { border-color: var(--accent); box-shadow: 0 14px 32px -16px oklch(0.62 0.14 70 / 0.30); }
.lane-card--audit { border-color: oklch(0.55 0.06 220 / 0.30); }
.lane-card--audit:hover { border-color: oklch(0.55 0.06 220); box-shadow: 0 14px 32px -16px oklch(0.55 0.06 220 / 0.28); }

/* Big editorial numeral 01 / 02 / 03 floating top-right of each lane card. */
.lane-numeral {
    position: absolute;
    top: 0.65rem;
    right: 1rem;
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: oklch(0.55 0.004 250 / 0.16);
    pointer-events: none;
    user-select: none;
    transition: color 280ms ease;
}
.lane-card:hover .lane-numeral {
    color: oklch(0.72 0.13 75 / 0.45);
}

/* CTA: replace the inline "→" with an animated SVG arrow. */
.lane-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.lane-cta-arrow {
    width: 14px;
    height: 14px;
    transition: transform 220ms ease;
}
.lane-card:hover .lane-cta-arrow {
    transform: translateX(4px);
}

.lane-icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.55rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    margin-bottom: 0.4rem;
}
.lane-card--panic .lane-icon { color: var(--danger); background: oklch(0.55 0.18 28 / 0.10); border-color: oklch(0.55 0.18 28 / 0.30); }
.lane-card--learn .lane-icon { color: var(--seam); background: oklch(0.62 0.14 70 / 0.10); border-color: oklch(0.62 0.14 70 / 0.30); }
.lane-card--audit .lane-icon { color: oklch(0.45 0.06 220); background: oklch(0.55 0.06 220 / 0.08); border-color: oklch(0.55 0.06 220 / 0.30); }

.lane-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.lane-card--panic .lane-eyebrow { color: var(--danger); }
.lane-card--learn .lane-eyebrow { color: var(--seam); }
.lane-card--audit .lane-eyebrow { color: oklch(0.45 0.06 220); }

.lane-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.lane-body {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}
.lane-cta {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.35rem;
    transition: transform 0.15s ease;
}
.lane-card:hover .lane-cta { transform: translateX(2px); }
.lane-card--panic .lane-cta { color: var(--danger); }
.lane-card--audit .lane-cta { color: oklch(0.45 0.06 220); }

/* ── Footer ── */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 1.5rem 3rem;
    background: var(--bg-elevated);
}
.footer-container {
    max-width: 76rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.footer-brand .name {
    font-family: var(--font-brand);
    font-size: 1.5rem;
    color: var(--text-bright);
    line-height: 1;
}
.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.footer-meta a {
    color: var(--text-muted);
}
.footer-meta a:hover { color: var(--text-bright); }

/* ── White reveal footer (used inside the .outro-reveal block) ── */
.site-footer--reveal {
    background: oklch(1 0 0);
    border-top: none;
    padding: 0.5rem 1.5rem 1.5rem;
    position: relative;
    overflow: hidden;
}
.site-footer--reveal > .landing-section {
    position: relative;
}
.reveal-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    gap: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
    .reveal-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.reveal-footer-brand { display: flex; flex-direction: column; gap: 0.6rem; }
.reveal-footer-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    text-decoration: none;
}
.reveal-footer-mark {
    color: var(--seam);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1;
    transform: translateY(0.04em);
}
.reveal-footer-name {
    font-family: var(--font-brand);
    font-size: 2rem;
    color: var(--text-bright);
    letter-spacing: 0.01em;
    line-height: 1;
}
.reveal-footer-tag {
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text);
    line-height: 1.4;
    font-style: italic;
}
.reveal-footer-by {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.reveal-footer-by a { color: var(--accent); font-weight: 500; text-decoration: none; }
.reveal-footer-by a:hover { color: var(--accent-light); }

.reveal-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
@media (max-width: 700px) {
    .reveal-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
.reveal-footer-col h4 {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-bright);
    margin: 0 0 0.85rem;
}
.reveal-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.reveal-footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}
.reveal-footer-col a:hover { color: var(--accent); }

.reveal-footer-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.reveal-footer-bottom-spacer { flex: 1 1 auto; }

/* The kanji watermark behind the footer for atmosphere */
.reveal-footer-mark-bg {
    position: absolute;
    right: -3vw;
    bottom: -8vw;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26vw;
    color: oklch(0.62 0.14 70 / 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ──────────── Docs layout (preserve framework structure) ──────────── */
.docs-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--toc-width);
    max-width: 90rem;
    margin: 0 auto;
    padding-top: var(--nav-height);
    min-height: 100vh;
}

@media (max-width: 1280px) {
    .docs-layout { grid-template-columns: var(--sidebar-width) 1fr; }
    .docs-toc { display: none; }
}

@media (max-width: 768px) {
    .docs-layout { grid-template-columns: 1fr; }
    .docs-sidebar { display: none; }
}

.docs-sidebar {
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    padding: 1.5rem 1rem 1rem 1.5rem;
    border-right: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    display: flex;
    flex-direction: column;
}

.sidebar-group { margin-bottom: 1.5rem; }
.sidebar-group-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    padding: 0 0.5rem;
}
.sidebar-links { list-style: none; margin: 0; padding: 0; }
.sidebar-link {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text);
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
}
.sidebar-link:hover {
    color: var(--text-bright);
    background: var(--bg-elevated);
}
.sidebar-link.active {
    color: var(--accent);
    background: var(--accent-glow);
    border-left-color: var(--accent);
    font-weight: 500;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 0.75rem 0.5rem;
    border-top: 1px solid var(--border);
}
.sidebar-mobile-links { display: none; margin-bottom: 0.75rem; }
.sidebar-footer-link {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.sidebar-footer-link:hover { color: var(--text-bright); }
.sidebar-copyright { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.sidebar-powered { font-size: 0.6875rem; color: var(--text-muted); }
.sidebar-powered a { color: var(--accent); font-weight: 500; }

.docs-main {
    padding: 2rem 2.5rem 4rem;
    max-width: var(--content-max);
    min-width: 0;
}
.docs-content { width: 100%; }

.docs-toc {
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    padding: 1.5rem 1.5rem 2rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.toc-wrapper {
    border-left: 1px solid var(--border);
    padding-left: 1rem;
}
.toc-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.toc-links { list-style: none; margin: 0; padding: 0; }
.toc-item { margin-bottom: 0.25rem; }
.toc-item-sub { padding-left: 0.75rem; }
.toc-link {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color 0.15s ease;
    line-height: 1.4;
}
.toc-link:hover { color: var(--text); }
.toc-link.active { color: var(--accent); }

/* ── Prose ── */
.prose {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--text);
}
.prose h1 {
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 0 0 1rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.prose h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 2.5rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.prose h3 {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 2rem 0 0.5rem;
    line-height: 1.4;
}
.prose h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 1.5rem 0 0.5rem;
}
.prose p { margin: 0 0 1.25rem; }
.prose strong { color: var(--text-bright); font-weight: 600; }
.prose ul {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
    list-style-type: disc;
}
.prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
    list-style-type: decimal;
}
.prose li { margin-bottom: 0.375rem; }
.prose li > p { margin-bottom: 0.5rem; }
.prose blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--seam);
    background: var(--accent-glow);
    border-radius: 0 0.375rem 0.375rem 0;
    color: var(--text);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code:not(pre code) {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.85em;
    color: var(--text-bright);
    white-space: nowrap;
}
.prose pre {
    background: var(--code-bg) !important;
    color: var(--code-text);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.7;
    position: relative;
}
.prose pre code {
    background: transparent !important;
    border: none;
    padding: 0;
    font-size: inherit;
    color: var(--code-text);
    white-space: pre;
}

/* Prism overrides for dark code blocks on a light page */
pre[class*="language-"], code[class*="language-"] {
    color: var(--code-text) !important;
    background: var(--code-bg) !important;
    text-shadow: none !important;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: oklch(0.55 0.003 250); }
.token.punctuation { color: oklch(0.78 0.003 250); }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: oklch(0.78 0.13 75); }
.token.selector, .token.string, .token.char, .token.builtin { color: oklch(0.82 0.10 95); }
.token.operator, .token.entity, .token.url { color: oklch(0.72 0.13 35); }
.token.atrule, .token.attr-value, .token.keyword { color: oklch(0.74 0.13 50); }
.token.function, .token.class-name { color: oklch(0.78 0.10 200); }
.token.regex, .token.important, .token.variable { color: oklch(0.78 0.14 55); }

.code-block-wrapper { position: relative; }
.copy-code-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid oklch(0.30 0.004 250);
    background: oklch(0.22 0.004 250);
    color: oklch(0.78 0.003 250);
    border-radius: 0.375rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 1;
}
.code-block-wrapper:hover .copy-code-btn,
.copy-code-btn:hover { opacity: 1; }
.copy-code-btn:hover { color: white; }
.copy-code-btn.copied { color: oklch(0.78 0.16 145); border-color: oklch(0.78 0.16 145 / 0.4); }

.heading-permalink {
    color: var(--accent);
    font-weight: 400;
    margin-right: 0.5rem;
    opacity: 0.45;
    transition: opacity 0.15s ease, color 0.15s ease;
    font-size: 0.85em;
}
.prose h2:hover .heading-permalink,
.prose h3:hover .heading-permalink,
.prose h4:hover .heading-permalink { opacity: 0.85; }
.heading-permalink:hover { color: var(--accent-light); opacity: 1; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.25rem;
    font-size: 0.875rem;
}
.prose th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    background: var(--bg-elevated);
    border-bottom: 2px solid var(--border);
    color: var(--text-bright);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.prose td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.prose tr:last-child td { border-bottom: none; }
.prose hr {
    margin: 2rem 0;
    border: none;
    border-top: 1px solid var(--border);
}
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
}

/* Pagination */
.docs-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.pagination-link {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}
.pagination-link:hover {
    border-color: var(--border-accent);
    box-shadow: 0 4px 16px var(--accent-glow);
}
.pagination-next { text-align: right; }
.pagination-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.pagination-title { font-size: 0.875rem; font-weight: 500; color: var(--accent); }

/* Search */
.search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.search-trigger:hover { border-color: var(--accent); color: var(--text); }
.search-trigger kbd {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    font-family: var(--font-mono);
}
.search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--search-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}
.search-overlay.active { display: flex; }
.search-dialog {
    width: 100%;
    max-width: 36rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 24px 48px oklch(0.20 0.003 250 / 0.18);
    overflow: hidden;
}
.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-bright);
    font-size: 1rem;
    font-family: var(--font-body);
}
.search-input::placeholder { color: var(--text-muted); }
.search-icon { color: var(--text-muted); flex-shrink: 0; }
.search-results { max-height: 24rem; overflow-y: auto; padding: 0.5rem; }
.search-result-item {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.1s ease;
    cursor: pointer;
}
.search-result-item:hover, .search-result-item.active { background: var(--bg-elevated); }
.search-result-title { font-size: 0.875rem; font-weight: 500; color: var(--text-bright); margin-bottom: 0.125rem; }
.search-result-section { font-size: 0.75rem; color: var(--text-muted); }
.search-result-excerpt { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; }
.search-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; }
.search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* ── Mobile adjustments ── */
@media (max-width: 900px) {
    /* Big-mode nav: hide center menu and right "Docs" link, show hamburger.
       Brand stays hidden at top, fades in on scroll same as desktop. */
    .site-nav--big .nav-menu { display: none; }
    .site-nav--big .nav-link--docs { display: none; }
    .site-nav--big .nav-mobile-toggle { display: inline-flex; }
    .site-nav--big.is-scrolled .site-nav-inner {
        max-width: calc(100% - 2rem);
    }
}

@media (max-width: 768px) {
    :root { --toc-width: 0; }

    /* Docs-mode nav: original mobile sidebar drawer behaviour */
    .nav-toggle { display: flex; }

    .sidebar-mobile-links {
        display: block;
        border-top: 1px solid var(--border);
        margin-top: 1rem;
        padding-top: 0.5rem;
    }

    .docs-layout { grid-template-columns: 1fr; }
    .docs-sidebar {
        display: block;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        bottom: 0;
        width: 18rem;
        z-index: 40;
        background: var(--bg-surface);
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .docs-sidebar.active { transform: translateX(0); }

    .docs-main { padding: 1.5rem 1rem 3rem; }
    .docs-pagination { grid-template-columns: 1fr; }

    .landing-section { padding: 3.5rem 1rem; }
    .install-box {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
}