/* Self-hosting waitlist page (rewritten 2026-07-29).
 *
 * Replaces the styles for the previous "download and run it" page — a full
 * -height hero, a hosted-vs-self-hosted comparison table, a Docker quickstart
 * and a feature grid. None of that markup exists any more: self-hosting is a
 * PLANNED business capability, and the page now says so and asks organisations
 * to register interest.
 *
 * Class-based throughout. The old page carried most of its layout in inline
 * `style=` attributes, which frontend/CLAUDE.md rules out for new work.
 *
 * Colours come from theme tokens with fallbacks, never hardcoded — this page
 * inherits main.css, whose surface can be dark, and a fixed pale background is
 * exactly how a status notice goes invisible.
 */

/* ── Header ─────────────────────────────────────────────────────────── */
.sh-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem clamp(1rem, 4vw, 2rem);
}

.sh-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.sh-brand-logo { height: 40px; width: auto; }
.sh-brand-name { font-weight: 600; font-size: 1.1rem; }

.sh-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 3vw, 1.5rem);
}

.sh-nav a { text-decoration: none; }
.sh-nav > a:not(.btn) { color: var(--fg-muted, inherit); }
.sh-nav-btn { padding: 0.5rem 1.25rem; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.sh-main {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2rem) 3rem;
}

.sh-hero { padding: 1.5rem 0 0.5rem; }

.sh-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted, inherit);
}

.sh-hero h1 {
    margin: 0 0 1rem;
    line-height: 1.15;
}

.sh-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--fg-muted, inherit);
}

.sh-section {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.18));
}

.sh-section h2 {
    margin: 0 0 0.85rem;
    line-height: 1.25;
}

.sh-section p { line-height: 1.7; }

.sh-section--closing {
    /* The second ask. A slight lift so it reads as a close rather than another
       body section, without inventing a separate visual treatment. */
    background: var(--surface-raised, rgba(127, 127, 127, 0.06));
    border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.18));
    border-radius: 0.9rem;
    padding: 1.5rem clamp(1rem, 3vw, 1.75rem);
}

/* ── Status banner ──────────────────────────────────────────────────── */
/* Amber rather than red: this is candour about status, not an error state. */
.sh-status {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.15rem;
    border-radius: 0.7rem;
    border: 1px solid var(--border-strong, rgba(217, 160, 60, 0.55));
    border-left: 4px solid var(--accent-amber, #d9a03c);
    background: color-mix(in srgb, #d9a03c 10%, transparent);
    color: var(--fg, inherit);
    font-size: 0.95rem;
    line-height: 1.6;
}

.sh-status strong { color: var(--accent-amber, #d9a03c); }

/* ── Lists ──────────────────────────────────────────────────────────── */
.sh-list {
    margin: 0.75rem 0 1rem;
    padding-left: 1.15rem;
}

.sh-list li {
    margin-bottom: 0.6rem;
    line-height: 1.65;
}

/* ── Actions ────────────────────────────────────────────────────────── */
.sh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 0.6rem;
}

/* The CTA carries a long label; without this it forces horizontal overflow at
   390px, which the render check catches. */
.sh-actions .btn {
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
}

.sh-note {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--fg-muted, inherit);
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.sh-footer {
    padding: 2rem clamp(1rem, 4vw, 2rem);
    text-align: center;
    color: var(--fg-muted, inherit);
    border-top: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.18));
    font-size: 0.92rem;
}

.sh-footer p { margin: 0 0 0.5rem; }
.sh-footer p:last-child { margin-bottom: 0; }
.sh-footer a { color: inherit; }