.landing,
.landing *,
.landing *::before,
.landing *::after {
    box-sizing: border-box;
}

.landing {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface);
    line-height: 1.5;
}

.landing h1, .landing h2, .landing h3, .landing h4,
.landing p, .landing ul, .landing ol, .landing dl,
.landing dd, .landing dt, .landing figure, .landing pre {
    margin: 0;
    padding: 0;
}

.landing ul, .landing ol { list-style: none; }

.landing a:not(.l-btn):not(.l-brand):not(.l-signin) {
    color: var(--color-accent);
    text-decoration: none;
}

.landing a:not(.l-btn):not(.l-brand):not(.l-signin):hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.landing code, .landing pre { font-family: var(--font-mono); }
.landing button { font: inherit; color: inherit; cursor: pointer; }

.l-section { padding: 80px var(--space-8); }
.l-section-tight { padding: 56px var(--space-8); }
.l-section-soft { background: var(--bg-soft); }
.l-section-tint { background: var(--bg-tint); }

.l-section-dark {
    background: var(--bg-dark);
    color: #fff;
}

.l-section-dark .l-eyebrow { color: rgba(255, 255, 255, 0.55); }
.l-section-dark .l-h2 { color: #fff; }
.l-section-dark .l-h2-sub { color: rgba(255, 255, 255, 0.7); }

@media (prefers-color-scheme: dark) {
    .l-section-soft { background: var(--bg-soft); }
    .l-section-tint { background: var(--bg-tint); }
}

.l-inner { max-width: var(--max-wide); margin: 0 auto; }
.l-inner-narrow { max-width: var(--max-narrow); margin: 0 auto; }

.l-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.l-h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.l-h2-sub {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    line-height: 1.55;
    max-width: 640px;
    margin-bottom: 40px;
}

.l-h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.l-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font-sans);
}

.l-btn-primary {
    background: var(--color-text);
    color: var(--color-surface);
    border-color: var(--color-text);
}

.l-btn-primary:hover {
    background: var(--color-text-muted);
    color: var(--color-surface);
    text-decoration: none;
}

.l-btn-accent { background: var(--color-accent); color: #fff; }
.l-btn-accent:hover { background: var(--color-accent-hover); color: #fff; text-decoration: none; }

a.l-btn-ghost,
.l-btn-ghost {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

a.l-btn-ghost:hover,
.l-btn-ghost:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
    text-decoration: none;
}

.l-btn-ghost-dark {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.l-btn-ghost-dark:hover {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.l-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }

.l-btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition);
    white-space: nowrap;
    line-height: 1.4;
}

.l-btn-text:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.l-btn-text[aria-disabled="true"] {
    color: var(--color-text-muted);
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.l-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 20px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    background: var(--bg-tint);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.l-badge-reg  { background: rgba(109, 40, 217, 0.08); color: var(--kind-reg); border-color: transparent; }
.l-badge-prov { background: rgba(29, 78, 216, 0.08); color: var(--kind-prov); border-color: transparent; }

.l-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.l-badge-live {
    background: rgba(21, 128, 61, 0.08);
    color: var(--color-status-live);
    border-color: transparent;
}

.l-badge-live .l-badge-dot {
    background: var(--color-status-live);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

@media (prefers-color-scheme: dark) {
    .l-badge {
        background: rgba(255, 255, 255, 0.06);
        color: var(--color-text-muted);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .l-badge-reg  { background: rgba(167, 139, 250, 0.12); color: var(--kind-reg); }
    .l-badge-prov { background: rgba(96, 165, 250, 0.12); color: var(--kind-prov); }
    .l-badge-live { background: rgba(74, 222, 128, 0.1); color: var(--color-status-live); }
    .l-badge-live .l-badge-dot { background: var(--color-status-live); box-shadow: none; }
}

.l-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 26px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    background: var(--bg-tint);
    color: var(--color-text-muted);
    border: 1px solid transparent;
    cursor: default;
}

.l-chip-active {
    background: var(--color-text);
    color: var(--color-surface);
}

.l-chip-mono {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--color-surface);
    border-color: var(--color-border);
}

@media (prefers-color-scheme: dark) {
    .l-chip { background: rgba(255, 255, 255, 0.06); color: var(--color-text-muted); }
    .l-chip-active { background: var(--color-text); color: var(--color-surface); }
    .l-chip-mono { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
}

.l-code-card {
    background: var(--bg-code);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.l-code-tabs {
    display: flex;
    align-items: center;
    background: #161B22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 var(--space-2);
    min-height: 40px;
}

.l-code-tab {
    background: transparent;
    border: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.l-code-tab.is-active {
    color: #fff;
    border-bottom-color: var(--color-accent);
}

.l-code-copy {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-xs);
    padding: 6px 10px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    font-family: var(--font-sans);
}

.l-code-copy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.l-code-body {
    padding: 18px 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--code-text);
    overflow-x: auto;
    white-space: pre;
}

.l-code-body .c-key  { color: #79C0FF; }
.l-code-body .c-str  { color: #A5D6FF; }
.l-code-body .c-num  { color: #FFA657; }
.l-code-body .c-fn   { color: #D2A8FF; }
.l-code-body .c-com  { color: rgba(201, 209, 217, 0.4); font-style: italic; }
.l-code-body .c-flag { color: #FFA657; }
.l-code-body .c-prop { color: #D2A8FF; }

.l-code-response {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #0A0E14;
    padding: 14px 20px;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: rgba(201, 209, 217, 0.7);
    max-height: 240px;
    overflow: auto;
    white-space: pre;
}

.l-params {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.l-params-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid var(--color-border);
}

.l-params-row:last-child { border-bottom: none; }

.l-params-name {
    padding: var(--space-3) 14px;
    background: var(--bg-soft);
    border-right: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    display: flex;
    align-items: center;
}

.l-params-desc {
    padding: var(--space-3) 14px;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.l-params-desc code {
    background: var(--bg-tint);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    color: var(--color-text);
    font-family: var(--font-mono);
}

@media (prefers-color-scheme: dark) {
    .l-params { border-color: rgba(255, 255, 255, 0.08); background: var(--color-surface); }
    .l-params-row { border-color: rgba(255, 255, 255, 0.06); }
    .l-params-name { background: rgba(255, 255, 255, 0.03); border-right-color: rgba(255, 255, 255, 0.06); }
    .l-params-desc code { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); }
}

.l-inline-code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--bg-tint);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.l-inline-code-light {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--color-surface);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.l-code-bare {
    font-family: var(--font-mono);
    font-size: 11px;
}

@media (prefers-color-scheme: dark) {
    .l-inline-code { background: rgba(255, 255, 255, 0.08); color: var(--color-text); }
    .l-inline-code-light { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .l-section { padding: 64px var(--space-6); }
    .l-section-tight { padding: 44px var(--space-6); }
}

@media (max-width: 767px) {
    .l-section { padding: 48px var(--space-4); }
    .l-section-tight { padding: 40px var(--space-4); }
}