/* fxsh landing page — single-page layout, no framework, no build step.
   Aesthetic: zed-like (dark default, large editorial sans hero, radial
   glow under the wordmark, code blocks with a soft drop-glow). Accent
   is steel blue — calmer than amber/red, reads "infrastructure /
   trustworthy". A light-mode flip is in @media (prefers-color-scheme:
   light) below. */

:root {
    --bg: #0b0d12;
    --bg-2: #11141a;
    --fg: #e6ebf0;
    --fg-muted: #8a93a1;
    --rule: #21262e;
    --accent: #5b9bd6;             /* steel blue */
    --accent-soft: #5b9bd622;
    --code-bg: #13161c;
    /* Callout uses a warm amber rather than reusing the cool accent —
       the visual register reads "caution, take note" instead of
       "more info in the same theme". Saturated low enough not to
       fight the blue. */
    --warn: #d49a5e;
    --warn-soft: #d49a5e18;
    --tk-cmt: #555b66;
    --tk-fn:  #5b9bd6;
    --tk-str: #d4bf86;
    --tk-kw:  #c8a6e0;
    --tk-id:  #cad2dc;
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #fbfcfe;
        --bg-2: #f0f3f8;
        --fg: #14181f;
        --fg-muted: #5b6471;
        --rule: #dde2ea;
        --accent: #2762b8;
        --accent-soft: #2762b818;
        --code-bg: #eef1f6;
        --warn: #a25c1c;
        --warn-soft: #a25c1c12;
        --tk-cmt: #8995a4;
        --tk-fn:  #2762b8;
        --tk-str: #8a5a18;
        --tk-kw:  #6534a0;
        --tk-id:  #2a323d;
    }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Hero — the page's only visually heavy element. The radial gradient
   behind the wordmark sets a "premium" tone without adding chrome.
   Anchored to the top edge so it fades into the page body. */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft), transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 30%, var(--accent-soft), transparent 70%);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: 6rem 2rem 5rem;
    text-align: center;
}

.wordmark {
    margin: 0;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}
.wordmark .dot { color: var(--accent); }

.tagline {
    margin: 1.25rem auto 0;
    font-size: 1.2rem;
    color: var(--fg-muted);
    max-width: 30rem;
}

/* Install command, the focal CTA. Width chosen so the production +
   PR-preview URLs (`curl -fsSL https://pr-N.fxsh-website.pages.dev/
   install.sh | sh`, ~60 chars) fit on one line; mobile media query
   below lets it wrap with break-all. */
.install-card {
    margin: 2.5rem auto 0;
    max-width: 44rem;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 0.85rem 0.85rem 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 10px 40px -10px var(--accent-soft);
}
.install-card .prompt {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}
.install-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    color: var(--fg);
    flex: 1;
    text-align: left;
    background: transparent;
    overflow-x: auto;
    white-space: nowrap;
}
.copy-btn {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    color: var(--fg-muted);
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.copy-btn:hover { color: var(--fg); background: var(--code-bg); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
.copy-btn svg { width: 14px; height: 14px; display: block; }

.platforms {
    margin-top: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--fg-muted);
}

/* Manual install section (#manual-install) at the bottom of the
   page. Reuses the standard section.block layout — sub-headings
   (Option A / Option B / Tell Claude Code) styled as inline-y
   accents rather than full section headings, so the section reads
   as one coherent "manual path" rather than three siblings. */
section#manual-install h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--accent);
    font-weight: 600;
}
section#manual-install h3:first-of-type { margin-top: 1rem; }
section#manual-install pre {
    font-size: 0.85rem;
}

/* Wrapper for shell snippets that get a copy button — gives the
   absolutely-positioned button somewhere to anchor. The pre keeps
   right-padding to leave room for the icon. */
.code-block {
    position: relative;
}
.code-block > pre {
    padding-right: 3rem;
}
.copy-btn--pre {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.copy-btn--pre:hover,
.copy-btn--pre:focus-visible {
    opacity: 1;
}

main { max-width: 56rem; margin: 0 auto; padding: 0 2rem; }

/* "What it is" — 3 features in a row, separated by thin verticals,
   no boxes. The typography (small-caps monospace label + sentence-
   case sans body) does the visual structure. */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 4rem 0;
    border-bottom: 1px solid var(--rule);
}
.feature {
    padding: 0 2rem;
    border-left: 1px solid var(--rule);
}
.feature:first-child { border-left: none; padding-left: 0; }
.feature:last-child { padding-right: 0; }
.feature h3 {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
}
.feature p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--fg);
}

section.block { padding: 4rem 0; border-bottom: 1px solid var(--rule); }
section.block:last-of-type { border-bottom: none; }
section.block h2 {
    margin: 0 0 1.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
    font-weight: 600;
}
section.block p {
    margin: 0.75rem 0;
    max-width: 40rem;
    font-size: 1rem;
}

/* Callout — used for "take note" content (security warning in State,
   telemetry-ask in the hero). Visually separates a punchy sentence
   from surrounding flow without inventing a new section heading.
   Default tone is warm amber (caution); .callout--invite swaps to
   the accent (steel blue) for non-warning calls-to-action. */
.callout {
    background: var(--warn-soft);
    border-left: 3px solid var(--warn);
    border-radius: 0 6px 6px 0;
    padding: 0.85rem 1.1rem;
    margin: 1rem 0;
    max-width: 40rem;
    text-align: left;
}
.callout p { margin: 0; max-width: none; }

.callout--invite {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    max-width: 44rem;
    margin: 1.25rem auto 0;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--code-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--fg);
}
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92rem;
    background: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    overflow-x: auto;
    line-height: 1.55;
    margin: 1rem 0;
    box-shadow: 0 10px 30px -10px var(--accent-soft);
}
pre code { background: transparent; padding: 0; font-size: inherit; }

/* Lightweight syntax classes. No highlighter library — tokens are
   hand-marked in the HTML for the one example block. */
.tk-cmt { color: var(--tk-cmt); }
.tk-fn  { color: var(--tk-fn); }
.tk-str { color: var(--tk-str); }
.tk-kw  { color: var(--tk-kw); }
.tk-id  { color: var(--tk-id); }

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    transition: border-color 0.15s;
}
a:hover { border-bottom-color: var(--accent); }

footer {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    font-size: 0.92rem;
    color: var(--fg-muted);
    text-align: center;
    border-top: 1px solid var(--rule);
}
footer p { margin: 0; max-width: none; }

@media (max-width: 720px) {
    .features { grid-template-columns: 1fr; }
    .feature {
        padding: 1.5rem 0;
        border-left: none;
        border-top: 1px solid var(--rule);
    }
    .feature:first-child { border-top: none; padding-top: 0; }
    .install-card code { white-space: normal; word-break: break-all; }
}