/* Terms of Service + Service Level Agreement (landing/terms.html, landing/sla.html).
   Same tokens as landing.css, without its scenes / scripts: plain readable pages. */
:root {
    --canvas: #060708;
    --surface: #0a0b0d;
    --panel: #1e2126;
    --border: #333a41;
    --ink: #f5f6f8;
    --ink-muted: #a3a8ae;
    --ink-faint: #6f7681;
    --accent: #e11d48;
    --focus: #5ac8fa;
    --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
}
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #fff; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.top {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.top-inner, .doc, .foot-inner { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.top-inner { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: .08em; font-size: 14px; }
.top nav { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
.top nav a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

.doc { padding-top: 40px; padding-bottom: 64px; }
.doc h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; margin: 0 0 8px; letter-spacing: -.01em; }
.meta { color: var(--ink-faint); font-size: 13px; margin: 0 0 28px; }
.summary {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 32px;
}
.doc .summary h2 { font-size: 15px; margin: 0 0 8px; border: 0; padding: 0; }
.summary ul { margin: 0; padding-left: 20px; }
.toc { margin: 0 0 36px; padding: 0; list-style: none; columns: 2 260px; column-gap: 24px; font-size: 14px; }
.toc li { margin: 0 0 6px; break-inside: avoid; }
.toc a { color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.doc h2 {
    font-size: 20px;
    margin: 40px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.doc h3 { font-size: 16px; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--ink-muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 0 0 6px; }
.caps { text-transform: uppercase; font-size: 13.5px; letter-spacing: .01em; }

.table-wrap { overflow-x: auto; margin: 12px 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--ink); font-weight: 600; background: var(--panel); }
td { color: var(--ink-muted); }

/* Business details still to fill in before launch (see CLAUDE.md "Terms & SLA"). */
.fill { background: rgba(225, 29, 72, .18); color: #fda4af; border-radius: 4px; padding: 0 4px; }

.foot { border-top: 1px solid var(--border); background: var(--surface); padding: 24px 0; font-size: 12.5px; color: var(--ink-faint); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.foot a { color: var(--ink-muted); }
@media (max-width: 560px) {
    .top nav { gap: 12px; }
    .brand span { display: none; }
}