/*******************************************************************
 * FreeSpeech - P2P Encrypted Messaging
 * -----------------------------------------------------------------------
 * Copyright (c) 2024-2026 Thomas Gourgnier
 * Licensed under the GNU Affero General Public License v3.0 or later.
 * SPDX-License-Identifier: AGPL-3.0-or-later
 *******************************************************************/
:root { --bg:#16130F; --card:#201b15; --fg:#ece7de; --muted:#a39b8d; --gold:#C89A4B; --line:#33291f; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
a { color:var(--gold) }
.wrap { max-width:880px; margin:0 auto; padding:0 20px }
header.top { border-bottom:1px solid var(--line) }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; padding-bottom:14px }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:600 }
.brand img { width:36px; height:36px; border-radius:8px }
.lang a { color:var(--muted); text-decoration:none; margin-left:12px; font-size:15px }
.lang a[aria-current] { color:var(--gold); font-weight:600 }
.hero { padding:56px 0 40px; text-align:center }
.hero img { width:96px; height:96px; border-radius:20px }
h1 { font-size:clamp(30px,6vw,46px); line-height:1.15; margin:18px 0 12px }
h2 { font-size:26px; margin:0 0 14px; color:var(--gold) }
.lead { font-size:19px; color:var(--muted); max-width:640px; margin:0 auto 26px }
.btn { display:inline-block; background:var(--gold); color:#16130F; padding:14px 24px; border-radius:10px; font-weight:700; text-decoration:none; margin:6px }
.btn.alt { background:transparent; color:var(--gold); border:1px solid var(--gold) }
.badge { display:inline-block; border:1px solid var(--gold); color:var(--gold); border-radius:999px; padding:2px 12px; font-size:14px; margin-bottom:6px }
section { padding:34px 0; border-top:1px solid var(--line) }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px }
.card h3 { margin:0 0 6px; font-size:18px }
.card p { margin:0; color:var(--muted); font-size:16px }
h3 { font-size:18px; margin:18px 0 4px }
ul.plain { padding-left:20px } ul.plain li { margin:6px 0 }
.warn { background:var(--card); border-left:4px solid var(--gold); padding:12px 16px; border-radius:6px; color:var(--muted) }
code { background:var(--card); padding:1px 6px; border-radius:4px; font-size:.92em; word-break:break-all }
footer { border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); font-size:15px; text-align:center }
footer a { color:var(--muted) }
nav.main { display:flex; flex-wrap:wrap; gap:4px 18px }
nav.main a { color:var(--muted); text-decoration:none; font-size:15px }
nav.main a[aria-current] { color:var(--gold); font-weight:600 }
.page { padding:34px 0 10px } .page h1 { font-size:clamp(26px,5vw,36px); margin-top:0 }
.diagram { background:#fff; border-radius:12px; padding:10px; margin:14px 0 4px }
.diagram img { width:100%; height:auto; display:block }
figcaption { color:var(--muted); font-size:15px; margin:6px 0 20px }
figure { margin:0 }
ol.steps { padding-left:22px } ol.steps li { margin:8px 0 }
table { border-collapse:collapse; width:100%; font-size:15px } th,td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; vertical-align:top } th { color:var(--gold) }
@media (max-width:520px) { body { font-size:16px } .hero { padding-top:36px } }

.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1fr); gap:34px; align-items:center; text-align:left; padding-bottom:54px }
.hero-copy .lead { margin-left:0; }
.hero-copy .badge { margin-bottom:10px }
.hero-figure,.wide-figure { margin:0 }
.hero-figure img,.wide-figure img { display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line) }
.hero-figure figcaption,.wide-figure figcaption { margin-top:8px; }
.wide-figure { margin-top:28px }
.section-intro { color:var(--muted); max-width:680px; margin:-4px 0 18px }
.out { color:var(--muted); font-size:15px }
@media (max-width:760px) { .hero { grid-template-columns:1fr; text-align:center; } .hero-copy .lead { margin-left:auto; } .hero-figure { max-width:650px; margin:auto } }

/* Accessibility: keyboard focus, skip link, reduced motion */
.skip { position:absolute; left:-999px; top:8px; background:var(--gold); color:#16130F; padding:8px 14px; border-radius:8px; z-index:10; font-weight:700 }
.skip:focus { left:12px }
a:focus-visible, .btn:focus-visible { outline:3px solid var(--gold); outline-offset:3px; border-radius:6px }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }

/* Pages with commands (servers) */
pre { background:#0f0d0a; border:1px solid var(--line); border-radius:10px; padding:14px 16px; overflow-x:auto; font:14px/1.5 ui-monospace,Consolas,"Cascadia Code",monospace; color:#e9e2d4; margin:12px 0 }
pre code { background:none; padding:0; word-break:normal; font-size:inherit }
.pro { display:inline-block; background:var(--gold); color:#16130F; border-radius:6px; padding:1px 8px; font-size:13px; font-weight:700; margin-left:6px; vertical-align:middle }
.pro.free { background:transparent; color:var(--gold); border:1px solid var(--gold) }
.card.pro-card { border-color:var(--gold) }
.table-wrap { overflow-x:auto }
.cols { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:14px 0 }
.note { color:var(--muted); font-size:15px }
.lead.left { margin-left:0 }
nav.main { align-items:center }