/* Skywave marketing/legal site — CSS.
   Mirrors the iOS app's "broadcast control room" design tokens exactly so the
   site reads as a natural extension of the app: same ink surfaces, amber signal
   accent, monospaced data face for identifiers and dates.
   No external fonts — uses the system stack so a phone browser renders in
   San Francisco (matching the app) and everywhere else falls through cleanly. */

:root {
    /* Palette (matches Sources/Skywave/DesignSystem/Theme.swift). */
    --ink: #0E1116;
    --surface: #161A21;
    --elevated: #1F2530;
    --hairline: #2A313D;
    --text-hi: #F2F4F7;
    --text-mid: #9AA3B2;
    --text-low: #5C6573;
    --signal: #FFB020;   /* the one accent, used sparingly */
    --live: #FF4D4D;
    --ok: #4ECB8E;

    /* Spacing scale. */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;
    --sp-xxl: 40px;
    --radius: 12px;

    /* Typography stack. */
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    background: var(--ink);
    color: var(--text-mid);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
strong { color: var(--text-hi); font-weight: 600; }
code, .mono { font-family: var(--mono); }

/* Layout container — single readable column. 780px matches the iPad
   readableContentWidth in the app. */
.wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--sp-lg);
}

/* ------------------------------- Header ------------------------------ */

.site-header {
    padding: var(--sp-xl) 0 var(--sp-lg);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--sp-xxl);
}
.site-header .brand {
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    color: var(--text-hi);
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: 6px;
    font-size: 20px;
}
.site-header .brand:hover { text-decoration: none; }
.site-header .brand .mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--elevated);
    border: 1px solid var(--hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--signal);
    font-size: 22px;
    line-height: 1;
}
.site-header nav {
    margin-top: var(--sp-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-lg);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.site-header nav a { color: var(--text-mid); }
.site-header nav a:hover { color: var(--text-hi); text-decoration: none; }

/* --------------------------------- Hero ------------------------------ */

.hero {
    text-align: center;
    padding: var(--sp-xl) 0 var(--sp-xxl);
}
.hero .mark {
    width: 88px;
    height: 88px;
    margin: 0 auto var(--sp-lg);
    border-radius: 22px;
    background: var(--elevated);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--signal);
    font-size: 46px;
    line-height: 1;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.hero .wordmark {
    color: var(--text-hi);
    letter-spacing: 8px;
    font-weight: 800;
    font-size: 32px;
    margin: 0 0 var(--sp-md);
}
.hero .tagline {
    color: var(--text-hi);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 var(--sp-sm);
}
.hero .subtag {
    color: var(--text-mid);
    font-size: 15px;
    margin: 0 auto;
    max-width: 500px;
}

/* ------------------------------- Buttons ----------------------------- */

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    justify-content: center;
    margin-top: var(--sp-xl);
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border: 1px solid var(--hairline);
    background: var(--elevated);
    color: var(--text-hi);
    cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--text-low); }
.btn.primary {
    background: var(--signal);
    color: var(--ink);
    border-color: transparent;
}
.btn.primary:hover { background: #FFC048; border-color: transparent; }

/* --------------------------- Feature bullets ------------------------- */

.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-lg);
    margin: var(--sp-xxl) 0;
}
@media (max-width: 640px) {
    .features { grid-template-columns: 1fr; }
}
.feature {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--sp-lg);
}
.feature .head {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    color: var(--text-hi);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}
.feature .head .glyph {
    color: var(--signal);
    font-size: 16px;
    width: 24px;
    text-align: center;
}
.feature p {
    color: var(--text-mid);
    font-size: 13px;
    margin: 0;
}

/* --------------------------- Provenance card ------------------------- */

.provenance {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--sp-lg);
    margin: var(--sp-xl) 0;
    display: flex;
    gap: var(--sp-md);
    align-items: flex-start;
}
.provenance .glyph {
    color: var(--signal);
    font-size: 18px;
    margin-top: 2px;
}
.provenance p {
    margin: 0;
    color: var(--text-mid);
    font-size: 14px;
}
.provenance strong { color: var(--text-hi); }

/* ------------------------------ Long-form ---------------------------- */

/* Legal / support pages: run-of-page prose. */
main.doc h1 {
    color: var(--text-hi);
    font-size: 32px;
    margin: 0 0 var(--sp-sm);
    letter-spacing: -0.5px;
}
main.doc .lede {
    color: var(--text-mid);
    font-size: 15px;
    margin: 0 0 var(--sp-xxl);
}
main.doc h2 {
    color: var(--text-hi);
    font-size: 20px;
    margin: var(--sp-xxl) 0 var(--sp-sm);
}
main.doc h3 {
    color: var(--text-hi);
    font-size: 16px;
    margin: var(--sp-xl) 0 var(--sp-sm);
}
main.doc p, main.doc li {
    color: var(--text-mid);
    font-size: 15px;
    line-height: 1.65;
}
main.doc ul, main.doc ol { padding-left: var(--sp-lg); }
main.doc li { margin-bottom: var(--sp-sm); }
main.doc .updated {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-low);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: var(--sp-sm);
    margin-bottom: 0;
}
main.doc .callout {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--sp-lg);
    margin: var(--sp-xl) 0;
}
main.doc .callout p:last-child { margin-bottom: 0; }

/* ------------------------------- Footer ------------------------------ */

.site-footer {
    border-top: 1px solid var(--hairline);
    margin-top: var(--sp-xxl);
    padding: var(--sp-xl) 0 var(--sp-xxl);
    color: var(--text-low);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.site-footer .links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-lg);
    margin-bottom: var(--sp-md);
}
.site-footer .links a { color: var(--text-mid); }
.site-footer .links a:hover { color: var(--text-hi); text-decoration: none; }
.site-footer .colophon {
    color: var(--text-low);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--sans);
    font-size: 12px;
}