/* ============================================================
   LANDING PAGE
   All rules scoped under #landing-page — nothing leaks out.
   ============================================================ */

/* Nav -------------------------------------------------------- */
#landing-page .landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-8);
    border-bottom: 1px solid var(--colour-border);
}

#landing-page .landing-nav__logo {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--colour-primary);
}

#landing-page .landing-nav__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Hero ------------------------------------------------------- */
#landing-page .landing-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-24) var(--space-8);
    gap: var(--space-6);
    max-width: 720px;
    margin: 0 auto;
}

#landing-page .landing-hero__headline {
    font-size: var(--text-5xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: pre-line;
}

#landing-page .landing-hero__subheadline {
    font-size: var(--text-xl);
    color: var(--colour-text-muted);
    max-width: 480px;
}

/* Features --------------------------------------------------- */
#landing-page .landing-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    padding: var(--space-16) var(--space-8);
    max-width: 1000px;
    margin: 0 auto;
}

#landing-page .feature-card {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color 0.2s;
}

#landing-page .feature-card:hover {
    border-color: var(--colour-primary);
}

#landing-page .feature-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

#landing-page .feature-card__body {
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
    line-height: 1.7;
}

/* Footer ----------------------------------------------------- */
#landing-page .landing-footer {
    text-align: center;
    padding: var(--space-8);
    color: var(--colour-text-muted);
    font-size: var(--text-sm);
    border-top: 1px solid var(--colour-border);
    margin-top: var(--space-8);
}

/* Testbed warning banner */
.testbed-banner {
    background: #7c2d12;
    color: #fed7aa;
    text-align: center;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.testbed-banner strong {
    color: #fff;
}