/* ============================================
   Factory.ai Layout & Components
   Engineer's spec sheet on warm vellum
   ============================================ */

.container {
    max-width: var(--page-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding-x, 24px);
    padding-right: var(--page-padding-x, 24px);
    width: 100%;
}

/* -- Navigation -- */
.navbar {
    height: var(--navbar-height, 56px);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-peach) 12%, var(--color-chrome-surface-top)) 0%,
        var(--color-chrome-surface) 100%
    );
    border-bottom: 1px solid var(--color-ash-hairline);
    box-shadow: none;
    backdrop-filter: none;
}

.navbar .container {
    height: 100%;
}

.nav-content {
    height: 100%;
    padding: 0;
    gap: var(--spacing-24, 24px);
}

.logo-text,
.footer-logo-text {
    font-family: var(--font-logo);
    font-weight: normal;
    text-transform: none;
}

.glitch {
    position: relative;
    display: inline-block;
    isolation: isolate;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #111;
}

.logo-text.glitch {
    font-size: 22px;
}

.footer-logo-text.glitch {
    font-size: 22px;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    white-space: nowrap;
}

.glitch::before {
    color: #00EFFF;
    transform: translate(-1px, 0);
    opacity: 0.85;
    z-index: -2;
}

.glitch::after {
    color: #FF0A8A;
    transform: translate(1px, 0);
    opacity: 0.85;
    z-index: -1;
}

.nav-links {
    gap: var(--spacing-24, 24px);
    margin-left: auto;
}

.nav-link {
    font-family: var(--font-geist-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-obsidian);
    padding: 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-ink) !important;
}

.nav-link.active::after {
    display: none !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-8, 8px);
    margin-left: var(--spacing-16, 16px);
}

/* -- Buttons -- */
.btn-factory {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8, 8px);
    font-family: var(--font-geist-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-buttons, 4px);
    padding: 8px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-shadow: none;
}

.btn-factory-filled {
    background: var(--color-ink);
    color: var(--color-paper-white);
    border-color: var(--color-ink);
}

.btn-factory-filled:hover {
    background: var(--color-carbon);
    border-color: var(--color-carbon);
    transform: none;
    box-shadow: none;
}

.btn-factory-outline {
    background: var(--color-paper-white);
    color: var(--color-ink);
    border-color: var(--color-ink);
}

.btn-factory-outline:hover {
    background: var(--color-frost-surface);
    transform: none;
    box-shadow: none;
}

.btn-factory-ghost {
    background: transparent;
    color: var(--color-ink);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.btn-factory-ghost:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* -- Version dot indicator -- */
.version-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8, 8px);
    margin-bottom: var(--spacing-16, 16px);
}

.version-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    flex-shrink: 0;
}

.version-dot span {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-ink);
}

/* -- Typography -- */
.display-title {
    font-family: var(--font-geist);
    font-size: clamp(2.25rem, 5.5vw, 60px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.048em;
    color: var(--color-ink);
    margin: 0 0 var(--spacing-16, 16px);
}

.section-heading {
    font-family: var(--font-geist);
    font-size: clamp(1.75rem, 4vw, 48px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.048em;
    color: var(--color-ink);
    margin: 0 0 var(--spacing-16, 16px);
}

.section-heading-sm {
    font-family: var(--font-geist);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    margin: 0 0 var(--spacing-12, 12px);
}

.lead-text {
    font-family: var(--font-geist);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--color-iron-caption);
    margin: 0;
    max-width: var(--copy-max, 520px);
}

.body-caption {
    font-family: var(--font-geist);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--color-iron-caption);
}

/* -- Sections -- */
.section-factory {
    padding: var(--section-gap, 80px) 0;
    background: var(--color-paper-white);
}

.section-factory-frost {
    padding: var(--section-gap, 80px) 0;
    background: var(--color-frost-surface);
}

.section-header-factory {
    margin-bottom: var(--spacing-40, 40px);
}

/* -- Hero -- */
.hero-factory {
    padding: calc(var(--navbar-height) + var(--spacing-48, 48px)) 0 var(--section-gap, 80px);
    background: var(--color-paper-white);
}

.hero-factory-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--spacing-48, 48px);
    align-items: center;
}

.hero-meta-line {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
    margin-top: var(--spacing-16, 16px);
}

/* -- CLI Install Box -- */
.cli-install-box {
    margin-top: var(--spacing-24, 24px);
    background: var(--color-paper-white);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-panels, 4px);
    overflow: hidden;
    max-width: var(--cli-max, 520px);
}

.cli-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-pewter-rule);
}

.cli-tab {
    flex: 1;
    font-family: var(--font-geist-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--color-pewter-rule);
    color: var(--color-iron-caption);
    cursor: pointer;
}

.cli-tab:last-child {
    border-right: none;
}

.cli-tab.active {
    background: var(--color-paper-white);
    color: var(--color-ink);
    box-shadow: inset 0 0 0 1px var(--color-ink);
}

.cli-command-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-8, 8px);
    padding: var(--spacing-16, 16px);
}

.cli-prompt {
    color: var(--color-signal-orange);
    font-family: var(--font-geist-mono);
    font-size: 14px;
    flex-shrink: 0;
}

.cli-command-text {
    flex: 1;
    font-family: var(--font-geist-mono);
    font-size: 13px;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    word-break: break-all;
}

.cli-install-copy {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-granite-mute);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cli-install-copy:hover {
    color: var(--color-ink);
}

.cli-install-copy svg {
    width: 16px;
    height: 16px;
}

/* -- Terminal Window -- */
.terminal-window {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-panels, 4px);
    overflow: hidden;
    background: var(--color-paper-white);
    box-shadow: none;
}

.terminal-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    background: var(--color-frost-surface);
    border-bottom: 1px solid var(--color-pewter-rule);
}

.terminal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.terminal-dot-ash { background: var(--color-ash-hairline); }
.terminal-dot-orange { background: var(--color-signal-orange); }
.terminal-dot-pewter { background: var(--color-pewter-rule); }

.terminal-caption {
    margin-left: auto;
    font-family: var(--font-geist-mono);
    font-size: 12px;
    letter-spacing: -0.02em;
    color: var(--color-iron-caption);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terminal-body {
    padding: var(--spacing-16, 16px);
    font-family: var(--font-geist-mono);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-graphite-body);
    margin: 0;
    overflow-x: auto;
}

.terminal-body .t-prompt { color: var(--color-signal-orange); }
.terminal-body .t-cmd { color: var(--color-ink); }
.terminal-body .t-out { color: var(--color-iron-caption); }
.terminal-body .t-dim { color: var(--color-granite-mute); }

/* -- Hero product showcase -- */
.hero-product-showcase {
    position: relative;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
}

.hero-product-ambient {
    position: absolute;
    inset: -10% -6% auto -6%;
    height: 72%;
    background:
        radial-gradient(ellipse 70% 60% at 28% 42%, rgba(255, 107, 61, 0.16) 0%, transparent 68%),
        radial-gradient(ellipse 55% 48% at 88% 18%, rgba(43, 180, 166, 0.14) 0%, transparent 62%),
        radial-gradient(ellipse 40% 40% at 60% 80%, rgba(109, 93, 252, 0.08) 0%, transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}

.hero-product-frame {
    position: relative;
    z-index: 1;
    border: 1px solid var(--color-ash-hairline);
    border-left: 4px solid var(--color-signal-orange);
    border-radius: var(--radius-panels, 4px);
    background: #060a06;
    overflow: hidden;
    box-shadow:
        0 28px 56px -20px rgba(16, 16, 16, 0.22),
        0 12px 24px -10px rgba(16, 16, 16, 0.12),
        8px 10px 0 rgba(16, 16, 16, 0.05);
}

.hero-product-version {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    font-family: var(--font-geist-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b0c4b0;
    background: rgba(6, 10, 6, 0.88);
    border: 1px solid rgba(255, 107, 61, 0.4);
    border-radius: var(--radius-badges, 4px);
    padding: 4px 8px;
    backdrop-filter: blur(6px);
}

.hero-product-media {
    aspect-ratio: auto;
    background: #060a06;
    line-height: 0;
    overflow: hidden;
}

.hero-product-shot {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

.hero-product-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8, 8px);
    margin: var(--spacing-12, 12px) 0 0;
    padding: 0;
    list-style: none;
}

.hero-product-tags li {
    font-family: var(--font-geist-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
    border: 1px solid var(--color-ash-hairline);
    border-radius: var(--radius-badges, 4px);
    padding: 4px 10px 4px 8px;
    background: var(--color-paper-white);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-product-tags li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    flex-shrink: 0;
}

.hero-product-tags li:nth-child(2)::before {
    background: var(--color-accent-2);
}

.hero-product-tags li:nth-child(3)::before {
    background: var(--color-accent-3);
}

@media (min-width: 769px) {
    .hero-product-showcase {
        top: 2px;
    }
}

@media (min-width: 1200px) {
    .hero-product-frame,
    .hero-product-media {
        max-height: min(58vh, 480px);
    }

    .hero-product-shot {
        max-height: min(58vh, 480px);
    }
}

@media (max-width: 768px) {
    .hero-product-showcase {
        margin-top: var(--spacing-24, 24px);
    }

    .hero-product-frame {
        box-shadow:
            0 16px 32px -16px rgba(16, 16, 16, 0.16),
            0 6px 12px -6px rgba(16, 16, 16, 0.08);
    }

    .hero-product-ambient {
        inset: -6% -4% auto -4%;
        height: 60%;
        filter: blur(20px);
    }
}

/* -- Hero terminal mockup (contextual, no screenshot) -- */
.hero-terminal {
    position: relative;
    width: 100%;
    justify-self: stretch;
}

.about-page .hero-terminal,
.privacy-page .hero-terminal {
    margin-top: var(--spacing-20, 20px);
}

.hero-terminal-glow {
    position: absolute;
    inset: -8% -5% auto -5%;
    height: 65%;
    background:
        radial-gradient(ellipse 65% 55% at 25% 45%, rgba(85, 255, 153, 0.1) 0%, transparent 65%),
        radial-gradient(ellipse 50% 45% at 90% 15%, rgba(255, 107, 61, 0.12) 0%, transparent 60%);
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
}

.hero-terminal-window {
    position: relative;
    z-index: 1;
    border: 1px solid #1f2a1f;
    border-left: 4px solid var(--color-signal-orange);
    border-radius: var(--radius-panels, 4px);
    background: linear-gradient(180deg, #0a0f0a 0%, #060a06 100%);
    overflow: hidden;
    box-shadow:
        0 28px 56px -20px rgba(0, 0, 0, 0.45),
        0 12px 24px -10px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-terminal-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: 36px;
    background: #121812;
    border-bottom: 1px solid #1f2a1f;
}

.hero-terminal-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hero-terminal-dot-close { background: var(--color-signal-orange); }
.hero-terminal-dot-min { background: #8a8580; }
.hero-terminal-dot-max { background: var(--color-accent-2); }

.hero-terminal-title {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    font-family: var(--font-geist-mono);
    font-size: 11px;
    letter-spacing: -0.02em;
    color: #6e7a6e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-terminal-badge {
    font-family: var(--font-geist-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #55ff99;
    background: rgba(85, 255, 153, 0.08);
    border: 1px solid rgba(85, 255, 153, 0.25);
    border-radius: var(--radius-badges, 4px);
    padding: 3px 8px;
    flex-shrink: 0;
}

.hero-terminal-body {
    padding: 16px 18px 14px;
    font-family: var(--font-geist-mono);
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: -0.02em;
    color: #a8b8a8;
}

.hero-terminal-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    margin-bottom: 2px;
}

.hero-terminal-line + .hero-terminal-line {
    margin-top: 4px;
}

.hero-terminal-body .t-user {
    color: #55ff99;
}

.hero-terminal-body .t-path {
    color: #5a6a5a;
}

.hero-terminal-body .t-prompt {
    color: var(--color-signal-orange);
    margin-right: 6px;
}

.hero-terminal-body .t-cmd {
    color: #d8e8d8;
}

.hero-terminal-body .t-out {
    color: #8a9a8a;
}

.hero-terminal-body .t-dim {
    color: #5a6a5a;
}

.hero-terminal-body .t-key {
    color: #55ff99;
}

.hero-terminal-body .t-val {
    color: #d8e8d8;
}

.hero-terminal-body .t-ok {
    color: #55ff99;
}

.hero-terminal-body .t-warn {
    color: #ffb347;
}

.hero-terminal-body .t-muted {
    color: #6e7a6e;
}

.hero-terminal-body .t-file {
    color: #7ec8e3;
}

.hero-terminal-body .t-exec {
    color: #55ff99;
}

.hero-terminal-kv {
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 2px 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 42, 31, 0.8);
}

.hero-terminal-kv dt {
    color: #55ff99;
    font-weight: 400;
}

.hero-terminal-kv dd {
    color: #d8e8d8;
    margin: 0;
}

.hero-terminal-rows {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 42, 31, 0.8);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hero-terminal-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: baseline;
}

.hero-terminal-row .t-tag {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6e7a6e;
}

.hero-terminal-row .t-path-line {
    color: #a8b8a8;
    word-break: break-all;
}

.hero-terminal-files {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(31, 42, 31, 0.8);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hero-terminal-file {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
}

.hero-terminal-file .t-perm {
    color: #5a6a5a;
    font-size: 11px;
}

.hero-terminal-file .t-name-deb {
    color: #7ec8e3;
}

.hero-terminal-file .t-name-bin {
    color: #55ff99;
}

.hero-terminal-file .t-size {
    color: #6e7a6e;
    font-size: 11px;
    text-align: right;
}

.hero-terminal-status {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    background: #0a100a;
    border-top: 1px solid #1f2a1f;
    font-family: var(--font-geist-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5a6a5a;
}

.hero-terminal-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8, 8px);
    margin: var(--spacing-12, 12px) 0 0;
    padding: 0;
    list-style: none;
}

.hero-terminal-tags li {
    font-family: var(--font-geist-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
    border: 1px solid var(--color-ash-hairline);
    border-radius: var(--radius-badges, 4px);
    padding: 4px 10px;
    background: var(--color-paper-white);
}

@media (max-width: 768px) {
    .hero-terminal {
        margin-top: var(--spacing-24, 24px);
    }

    .hero-terminal-body {
        font-size: 11px;
        padding: 14px;
    }

    .hero-terminal-kv {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .hero-terminal-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .hero-terminal-file {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .download-page .hero-terminal-file {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 4px 8px;
        align-items: center;
    }

    .download-page .hero-terminal-file .t-perm {
        font-size: 9px;
        white-space: nowrap;
    }

    .download-page .hero-terminal-file .t-name-deb,
    .download-page .hero-terminal-file .t-name-bin {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .download-page .hero-terminal-file .t-size {
        font-size: 10px;
        white-space: nowrap;
    }
}

/* -- IDE Panel Frame -- */
.ide-frame {
    border: 1px dashed var(--color-ash-hairline);
    border-radius: var(--radius-panels, 4px);
    padding: var(--spacing-16, 16px);
    background: transparent;
}

.ide-frame-label {
    font-family: var(--font-geist-mono);
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--color-iron-caption);
    margin-bottom: var(--spacing-12, 12px);
    text-transform: uppercase;
}

/* -- Dot constellation -- */
.dot-constellation {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-24, 24px);
    padding: var(--spacing-48, 48px);
    max-width: 200px;
    margin: 0 auto;
}

.dot-constellation span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    justify-self: center;
}

.dot-constellation .dot-orange { background: var(--color-signal-orange); }
.dot-constellation .dot-pewter { background: var(--color-pewter-rule); }

/* -- Category Badge -- */
.category-badge {
    display: inline-block;
    font-family: var(--font-geist-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-paper-white);
    background: var(--color-ink);
    border-radius: var(--radius-badges, 4px);
    padding: 4px 10px;
    margin-bottom: var(--spacing-12, 12px);
}

.category-badge-outline {
    background: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
}

/* -- Feature row (Z-pattern) -- */
.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-48, 48px);
    align-items: center;
    padding: var(--section-gap, 80px) 0;
    border-top: 1px solid var(--color-pewter-rule);
}

.feature-row:first-child {
    border-top: none;
    padding-top: 0;
}

.feature-row.reverse .feature-row-copy {
    order: 2;
}

.feature-row.reverse .feature-row-visual {
    order: 1;
}

.feature-row-copy {
    max-width: var(--feature-copy-max, 480px);
}

/* -- News / link cards -- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24, 24px);
}

.news-card {
    padding: var(--card-padding, 24px);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-paper-white);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.15s ease;
    box-shadow: none;
}

.news-card:hover {
    border-color: var(--color-ink);
    transform: none;
    box-shadow: none;
}

.news-card h3 {
    font-family: var(--font-geist);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    margin: 0 0 var(--spacing-12, 12px);
}

.news-card p {
    font-size: 16px;
    letter-spacing: -0.03em;
    color: var(--color-iron-caption);
    line-height: 1.5;
    margin: 0 0 var(--spacing-16, 16px);
}

.news-card .learn-more {
    font-family: var(--font-geist);
    font-size: 14px;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    text-transform: uppercase;
}

/* -- Trust bar -- */
.trust-bar {
    padding: var(--section-gap, 80px) 0;
    border-top: 1px solid var(--color-pewter-rule);
}

.trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-48, 48px);
    margin-top: var(--spacing-32, 32px);
}

.trust-logo {
    font-family: var(--font-geist-mono);
    font-size: 14px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
}

/* -- Facts table -- */
.facts-panel {
    margin-top: var(--spacing-32, 32px);
    padding: var(--card-padding, 24px);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-paper-white);
}

.facts-panel h3 {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0 0 var(--spacing-16, 16px);
}

.facts-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-8, 8px) var(--spacing-16, 16px);
}

.facts-panel li {
    font-family: var(--font-geist-mono);
    font-size: 13px;
    letter-spacing: -0.02em;
    color: var(--color-iron-caption);
}

.facts-panel strong {
    color: var(--color-ink);
    font-weight: 400;
}

/* -- Highlights grid -- */
.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-24, 24px);
}

.highlight-cell {
    padding: var(--card-padding, 24px);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-paper-white);
}

.highlight-cell h3 {
    font-family: var(--font-geist-mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    margin: 0 0 var(--spacing-8, 8px);
}

.highlight-cell p {
    font-size: 14px;
    letter-spacing: -0.03em;
    color: var(--color-iron-caption);
    line-height: 1.5;
    margin: 0;
}

.highlight-cell code,
.feature-row-copy code,
.lead-text code {
    font-family: var(--font-geist-mono);
    font-size: 13px;
    background: var(--color-frost-surface);
    border: 1px solid var(--color-pewter-rule);
    padding: 2px 6px;
    border-radius: var(--radius-inputs, 4px);
    color: var(--color-ink);
}

/* -- Responsive -- */
@media (max-width: 900px) {
    .hero-factory-grid,
    .feature-row,
    .news-grid,
    .highlights-grid {
        grid-template-columns: 1fr;
    }

    .feature-row.reverse .feature-row-copy,
    .feature-row.reverse .feature-row-visual {
        order: unset;
    }

    .nav-actions {
        display: none;
    }

    .cli-install-box {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .nav-actions {
        display: flex;
        align-items: center;
        margin-left: auto;
        flex-shrink: 0;
    }

    .nav-actions .btn-factory-outline {
        display: none;
    }

    .nav-actions .btn-factory-filled {
        padding: 7px 12px;
        font-size: 11px;
        white-space: nowrap;
    }

    .section-factory,
    .section-factory-frost,
    .hero-factory {
        padding-top: var(--spacing-48, 48px);
        padding-bottom: var(--spacing-48, 48px);
    }

    .feature-row {
        padding: var(--spacing-48, 48px) 0;
    }

    .highlights-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Docs layout (all documentation pages)
   ============================================ */

.docs-page .docs-container {
    padding-top: var(--navbar-height);
    background: transparent;
}

.docs-page .footer {
    width: 100%;
    clear: both;
    position: relative;
    background: linear-gradient(
        180deg,
        var(--color-chrome-surface) 0%,
        color-mix(in srgb, var(--color-page-bg) 88%, var(--color-mint) 12%) 100%
    );
}

@media (min-width: 769px) {
    .docs-page .footer {
        z-index: 100;
    }
}

.docs-page .navbar .container,
.docs-page .footer .container {
    max-width: var(--page-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.docs-page .docs-sidebar {
    background: var(--color-frost-surface);
    box-shadow: none;
}

.docs-page .docs-sidebar-head {
    padding: 0 var(--spacing-12, 12px) var(--spacing-16, 16px);
    margin-bottom: var(--spacing-16, 16px);
    border-bottom: 1px solid var(--color-pewter-rule);
}

.docs-page .docs-sidebar-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 var(--spacing-8, 8px);
}

.docs-page .docs-sidebar-brand-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    flex-shrink: 0;
    margin-top: 5px;
}

.docs-page .docs-sidebar-brand-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.docs-page .docs-sidebar-brand-title {
    font-family: var(--font-geist);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    line-height: 1.2;
}

.docs-page .docs-sidebar-brand-meta {
    font-family: var(--font-geist-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
    line-height: 1.3;
}

.docs-page .docs-sidebar .sidebar-section {
    margin-bottom: 0;
}

.docs-page .docs-sidebar .sidebar-section + .sidebar-section {
    margin-top: var(--spacing-20, 20px);
    padding-top: var(--spacing-20, 20px);
    border-top: 1px solid var(--color-pewter-rule);
}

.docs-page .docs-sidebar h3 {
    font-family: var(--font-geist-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
    margin: 0 0 var(--spacing-8, 8px);
    padding: 0 var(--spacing-12, 12px);
    line-height: 1.3;
    pointer-events: none;
    user-select: none;
}

.docs-page .docs-sidebar ul li {
    margin-bottom: 2px;
}

.docs-page .docs-sidebar a {
    font-family: var(--font-geist);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--color-iron-caption);
    padding: 8px var(--spacing-12, 12px);
    border-radius: var(--radius-cards, 4px);
    border-left: 2px solid transparent;
}

.docs-page .docs-sidebar a:hover {
    color: var(--color-ink);
    background: var(--color-frost-surface);
}

.docs-page .docs-sidebar a.active {
    color: var(--color-ink);
    font-weight: 400;
    background: var(--color-frost-surface);
    border-left-color: var(--color-signal-orange);
}

.docs-page .docs-sidebar a.active::before {
    content: none;
    display: none;
}

.docs-page .docs-content {
    background: transparent;
}

.docs-page .docs-content-wrapper > h1:first-child {
    font-family: var(--font-geist);
    font-size: clamp(1.75rem, 4vw, 48px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.048em;
    color: var(--color-ink);
    margin-bottom: var(--spacing-16, 16px);
    padding-bottom: var(--spacing-16, 16px);
    border-bottom: 1px solid var(--color-pewter-rule);
}

.docs-page .docs-content-wrapper > h1:first-child::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    margin-bottom: var(--spacing-12, 12px);
}

.docs-page .docs-content-wrapper > p:first-of-type {
    font-size: 16px;
    letter-spacing: -0.03em;
    color: var(--color-iron-caption);
    line-height: 1.5;
    max-width: var(--intro-max, 720px);
}

.docs-page .docs-content h2 {
    font-family: var(--font-geist);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-pewter-rule);
    padding-bottom: var(--spacing-8, 8px);
    margin-top: var(--spacing-48, 48px);
}

.docs-page .docs-content h3 {
    font-family: var(--font-geist-mono);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.docs-page .docs-content .info-box,
.docs-page .docs-content .warning-box,
.docs-page .docs-content .command-card {
    background: var(--color-paper-white);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    box-shadow: none;
    border-left: 3px solid var(--color-ink);
}

.docs-page .docs-content .warning-box {
    border-left-color: var(--color-signal-orange);
}

.docs-page .docs-content .feature-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24, 24px);
    margin: var(--spacing-24, 24px) 0;
}

.docs-page .docs-content .feature-highlight-card {
    background: var(--color-paper-white);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    padding: var(--card-padding, 24px);
    box-shadow: none;
}

.docs-page .docs-content .feature-highlight-card:hover {
    border-color: var(--color-ink);
    box-shadow: none;
    transform: none;
}

.docs-page .docs-content .feature-badge {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    background: var(--color-ink);
    color: var(--color-paper-white);
    border-radius: var(--radius-badges, 4px);
    padding: 4px 10px;
    border: none;
}

.docs-page .docs-content .feature-link {
    font-family: var(--font-geist);
    font-size: 14px;
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.docs-page .docs-content .nav-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24, 24px);
}

.docs-page .docs-content .nav-card {
    background: var(--color-paper-white);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    padding: var(--card-padding, 24px);
    box-shadow: none;
    text-decoration: none;
}

.docs-page .docs-content .nav-card:hover {
    border-color: var(--color-ink);
    box-shadow: none;
    transform: none;
}

.docs-page .docs-content .nav-card h3 {
    font-family: var(--font-geist);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--color-ink);
}

.docs-page .docs-content .feature-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    overflow: hidden;
    font-family: var(--font-geist-mono);
    font-size: 13px;
}

.docs-page .docs-content .feature-table th,
.docs-page .docs-content .feature-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-pewter-rule);
    text-align: left;
}

.docs-page .docs-content .feature-table th {
    background: var(--color-frost-surface);
    color: var(--color-granite-mute);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.docs-page .docs-content .code-block {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-frost-surface);
    box-shadow: none;
}

.docs-page .docs-content .block-highlight,
.docs-page .docs-content .feature-table code,
.docs-page .docs-content .terminal-cmd {
    color: var(--color-ink);
    background: var(--color-frost-surface);
    border-color: var(--color-pewter-rule);
    box-shadow: none;
}


.docs-page .docs-content .info-box code,
.docs-page .docs-content .warning-box code,
.docs-page .docs-content .command-card code:not(.terminal-cmd) {
    color: var(--color-ink);
    background: var(--color-frost-surface);
    border: 1px solid var(--color-pewter-rule);
    font-weight: 400;
}

/* ============================================
   Download page structure
   ============================================ */

.download-page .download-intro {
    padding: var(--card-padding, 24px);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-paper-white);
    margin-bottom: var(--spacing-32, 32px);
}

.download-page .download-arch-columns {
    gap: var(--spacing-24, 24px);
}

.download-page .download-arch-column {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-paper-white);
    border-top: none;
}

.download-page .download-arch-column-title {
    font-family: var(--font-geist-mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    background: var(--color-frost-surface);
    border-bottom: 1px solid var(--color-pewter-rule);
}

.download-page .download-block-badge {
    font-family: var(--font-geist-mono);
    font-size: 10px;
    border-radius: var(--radius-badges, 4px);
    background: var(--color-ink);
    color: var(--color-paper-white);
    border: none;
}

.download-page .download-block-btn {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    border-radius: var(--radius-buttons, 4px);
    box-shadow: none;
}

.download-page .download-compare-table {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    overflow: hidden;
    font-family: var(--font-geist-mono);
    font-size: 13px;
}

.download-page .download-compare-table th,
.download-page .download-compare-table td {
    border-bottom: 1px solid var(--color-pewter-rule);
    padding: 12px 16px;
}

.download-page .download-compare-table th {
    background: var(--color-frost-surface);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}

.download-page .download-note {
    padding: var(--card-padding, 24px);
    border: 1px dashed var(--color-ash-hairline);
    border-radius: var(--radius-cards, 4px);
    font-size: 14px;
    color: var(--color-iron-caption);
}

.download-page .highlight-cell .btn-factory {
    width: 100%;
    justify-content: center;
}

.download-page .download-compare-table {
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 768px) {
    .download-page .download-compare-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--color-pewter-rule);
        border-radius: var(--radius-cards, 4px);
        background: var(--color-paper-white);
    }

    .download-page .download-compare-table tbody {
        display: table;
        width: 100%;
        min-width: 300px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .download-page .download-compare-table th,
    .download-page .download-compare-table td {
        border: 1px solid var(--color-pewter-rule);
        padding: 10px 12px;
        vertical-align: top;
    }

    .download-page .download-compare-table th {
        background: var(--color-frost-surface);
    }

    .download-page .download-compare-table td:first-child {
        font-weight: 500;
        color: var(--color-ink);
        background: var(--color-surface-warm);
    }
}

.download-page .download-main-content h2 {
    font-family: var(--font-geist);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    border: none;
    padding: 0;
}

.download-page .download-main-content h2::after {
    display: none;
}

.download-page .download-main-content h2::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    margin-right: 8px;
    vertical-align: middle;
}

/* ============================================
   About page structure
   ============================================ */

.about-page .about-main-content h2 {
    font-family: var(--font-geist);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    border: none;
    padding: 0;
    margin-top: 0;
}

.about-page .about-main-content .version-dot + h2,
.about-page .about-main-content .version-dot + .section-heading-sm {
    margin-top: 0;
}

.about-page .about-main-content > .version-dot:not(:first-child) {
    margin-top: var(--spacing-48, 48px);
}

.about-page .about-main-content h2::after {
    display: none;
}

.about-page .about-features-signature {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-24, 24px);
}

.about-page .about-feature-card {
    background: var(--color-paper-white);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    padding: var(--card-padding, 24px);
    box-shadow: none;
}

.about-page .about-feature-card:hover {
    border-color: var(--color-ink);
    transform: none;
    box-shadow: none;
}

.about-page .about-feature-badge {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    background: var(--color-ink);
    color: var(--color-paper-white);
    border-radius: var(--radius-badges, 4px);
    border: none;
}

.about-page .about-feature-link {
    font-family: var(--font-geist);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-ink);
}

.about-page .about-specs-table {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    overflow: hidden;
    font-family: var(--font-geist-mono);
    font-size: 13px;
}

.about-page .about-specs-table th {
    background: var(--color-frost-surface);
    color: var(--color-granite-mute);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
}

.about-page .team-profile-header {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    padding: var(--card-padding, 24px);
    background: var(--color-paper-white);
}

.about-page .team-meta {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    padding: var(--card-padding, 24px);
    background: var(--color-paper-white);
}

.about-page .team-link {
    font-family: var(--font-geist-mono);
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-buttons, 4px);
    box-shadow: none;
}

.about-page .about-feature-list {
    font-size: 14px;
    color: var(--color-iron-caption);
    letter-spacing: -0.03em;
    line-height: 1.6;
    padding-left: 1.25rem;
}

.about-page .about-feature-list li {
    margin-bottom: 0.35rem;
}

.privacy-page .privacy-content {
    max-width: min(100%, var(--content-wide, 800px));
}

.privacy-page .privacy-content p,
.privacy-page .privacy-content li {
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.03em;
    color: var(--color-iron-caption);
}

.privacy-page .privacy-content p {
    margin-bottom: var(--spacing-16, 16px);
}

.privacy-page .privacy-content strong {
    color: var(--color-ink);
    font-weight: 400;
}

.privacy-page .privacy-content code {
    font-family: var(--font-geist-mono);
    font-size: 0.9em;
    background: var(--color-frost-surface);
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-badges, 4px);
    padding: 2px 6px;
}

.privacy-page .privacy-content ul {
    margin: 0 0 var(--spacing-16, 16px);
    padding-left: 1.25rem;
}

.privacy-page .privacy-content li {
    margin-bottom: 0.35rem;
}

.privacy-page .privacy-content .info-box {
    margin-top: var(--spacing-32, 32px);
    padding: var(--card-padding, 24px);
    border: 1px solid var(--color-pewter-rule);
    border-left: 3px solid var(--color-ink);
    border-radius: var(--radius-cards, 4px);
    background: var(--color-paper-white);
    box-shadow: none;
}

.privacy-page .privacy-content .info-box p {
    margin: 0;
}

.privacy-page .highlight-cell ul {
    margin: 12px 0 0;
    padding-left: 1.1rem;
    font-size: 14px;
}

.privacy-page .highlight-cell li {
    margin-bottom: 0.3rem;
}

.privacy-page .team-meta {
    border: 1px solid var(--color-pewter-rule);
    border-radius: var(--radius-cards, 4px);
    padding: var(--card-padding, 24px);
    background: var(--color-paper-white);
    margin-top: var(--spacing-16, 16px);
}

.privacy-page .team-meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-12, 12px);
    padding: 10px 0;
    border-bottom: 1px solid var(--color-pewter-rule);
    font-size: 14px;
}

.privacy-page .team-meta-row:last-child {
    border-bottom: none;
}

.privacy-page .team-meta-row dt {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-granite-mute);
}

.privacy-page .team-meta-row dd {
    margin: 0;
    color: var(--color-ink);
}

/* ============================================
   Footer (Factory) - minimal professional
   ============================================ */

.footer {
    background: linear-gradient(
        180deg,
        var(--color-chrome-surface) 0%,
        color-mix(in srgb, var(--color-page-bg) 88%, var(--color-mint) 12%) 100%
    );
    border-top: 1px solid var(--color-ash-hairline);
    box-shadow: none;
    padding: var(--spacing-40, 40px) 0 var(--spacing-32, 32px);
    overflow: visible;
}

.footer-factory {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32, 32px);
    overflow: visible;
}

.footer-factory-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-32, 32px);
    padding-bottom: var(--spacing-24, 24px);
    border-bottom: 1px solid var(--color-pewter-rule);
}

.footer-factory-brand {
    max-width: 22rem;
    overflow: visible;
}

.footer-factory-brand .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-10, 10px);
    text-decoration: none;
    margin-bottom: var(--spacing-8, 8px);
    overflow: visible;
    position: relative;
    z-index: 0;
}

.footer-factory-brand .footer-logo .glitch {
    z-index: 0;
}

.footer-factory-brand .footer-logo-img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    display: block;
}

.footer-factory-tagline {
    font-family: var(--font-geist);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.5;
    color: var(--color-iron-caption);
    margin: 0;
}

.footer-factory-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-8, 8px) var(--spacing-12, 12px);
    padding-top: 0.35rem;
}

.footer-factory-nav a {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-iron-caption);
    transition: color 0.15s ease;
}

.footer-factory-nav a:hover {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-factory-sep {
    font-family: var(--font-geist-mono);
    font-size: 12px;
    color: var(--color-pewter-rule);
    user-select: none;
}

.footer-factory-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12, 12px) var(--spacing-24, 24px);
}

.footer-factory-version {
    font-family: var(--font-geist-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-granite-mute);
}

.footer-factory-version::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    margin-right: var(--spacing-8, 8px);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.footer-factory-copy {
    font-family: var(--font-geist);
    font-size: 13px;
    letter-spacing: -0.03em;
    color: var(--color-granite-mute);
}

@media (max-width: 768px) {
    .footer {
        padding: var(--spacing-32, 32px) 0 var(--spacing-24, 24px);
    }

    .footer-factory-main {
        flex-direction: column;
        gap: var(--spacing-24, 24px);
    }

    .footer-factory-nav {
        justify-content: flex-start;
        padding-top: 0;
    }

    .footer-factory-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-8, 8px);
    }
}

/* ============================================
   Mobile floating bottom nav
   ============================================ */

.mobile-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 0 var(--page-padding-x, 16px) calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    background: transparent;
    border: none;
    box-shadow: none;
}

.mobile-nav-pill {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2px;
    max-width: 400px;
    margin: 0 auto;
    padding: 5px;
    background: rgba(248, 246, 243, 0.9);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid var(--color-ash-hairline);
    border-radius: 999px;
    box-shadow:
        0 2px 8px rgba(16, 16, 16, 0.06),
        0 10px 24px rgba(16, 16, 16, 0.08);
}

.mobile-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 7px 5px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-granite-mute);
    transition: color 0.15s ease, background 0.15s ease;
}

.mobile-nav-link:hover {
    color: var(--color-ink);
}

.mobile-nav-link.active {
    color: var(--color-ink);
    background: var(--color-paper-white);
    box-shadow: 0 1px 4px rgba(16, 16, 16, 0.1);
}

.mobile-nav-link.active .mobile-nav-label {
    color: var(--color-signal-orange);
    font-weight: 500;
}

.mobile-nav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    color: var(--color-stone-mid);
    transition: color 0.15s ease, transform 0.15s ease;
}

.mobile-nav-link.active .mobile-nav-icon-wrap {
    color: var(--color-signal-orange);
    transform: translateY(-1px);
}

.mobile-nav-link:hover .mobile-nav-icon-wrap {
    color: var(--color-ink);
}

.mobile-nav-icon {
    width: 21px;
    height: 21px;
    display: block;
}

.mobile-nav-label {
    font-family: var(--font-geist-mono);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
}

@media (max-width: 768px) {
    .mobile-nav {
        display: block;
    }

    body {
        padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }

    body.docs-page {
        padding-bottom: 0;
    }

    .error-page .error-factory {
        padding-bottom: calc(var(--spacing-48, 48px) + 5.25rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 769px) {
    .mobile-nav {
        display: none !important;
    }
}

/* ============================================
   404 page
   ============================================ */

.error-factory {
    min-height: calc(100vh - var(--navbar-height));
    padding: var(--section-gap, 80px) var(--spacing-24, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper-white);
}

.error-page .error-factory {
    min-height: 100vh;
    padding-bottom: calc(var(--spacing-48, 48px) + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(circle at 20% 20%, var(--color-peach) 0%, rgba(255, 243, 236, 0) 55%),
        radial-gradient(circle at 90% 10%, var(--color-mint) 0%, rgba(232, 251, 248, 0) 45%),
        var(--color-page-bg);
}

.error-factory-inner {
    max-width: var(--copy-max, 560px);
    width: 100%;
}

.error-factory-code {
    font-family: var(--font-geist-mono);
    font-size: clamp(4rem, 12vw, 6rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--color-ink);
    margin-bottom: var(--spacing-16, 16px);
}

@media (max-width: 900px) {
    .docs-page .docs-content .feature-highlights,
    .docs-page .docs-content .nav-cards,
    .about-page .about-features-signature {
        grid-template-columns: 1fr;
    }

    .privacy-page .team-meta-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}