/* Shared styles for VTT content pages (privacy, terms, support). */
:root {
  --paper:#e9e6dd; --paper-2:#e2ded3; --card:#f1eee7; --card-2:#e4e0d5;
  --ink:#131210; --ink-soft:#3b3831; --muted:#6f6b60; --faint:#928d80;
  --line:rgba(19,18,16,.16); --line-soft:rgba(19,18,16,.09);
  --accent:#f23a1d; --accent-ink:#fff;
  --maxw:1280px; --docw:760px;
  --disp:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection { background:var(--accent); color:var(--accent-ink); }
a { color:inherit; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.label { font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ac { color:var(--accent); }

.grain { position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* nav */
header.nav { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.01em; font-size:17px; text-decoration:none; color:inherit; }
.brand sup { color:var(--accent); font-size:.6em; }
.equ { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.equ i { width:2.5px; background:var(--accent); border-radius:2px; transform-origin:bottom; animation:equ 1.1s ease-in-out infinite; }
.equ i:nth-child(1){height:5px;animation-delay:0s}.equ i:nth-child(2){height:13px;animation-delay:.15s}
.equ i:nth-child(3){height:8px;animation-delay:.3s}.equ i:nth-child(4){height:11px;animation-delay:.45s}
@keyframes equ { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a.lnk { font-size:13.5px; color:var(--ink-soft); text-decoration:none; position:relative; }
.nav-links a.lnk::after { content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:0; background:var(--ink); transition:width .3s var(--ease); }
.nav-links a.lnk:hover::after { width:100%; }
@media (max-width:560px){ .nav-links a.lnk { display:none; } }

.btn { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--sans);
  font-size:14px; font-weight:600; padding:9px 18px; border-radius:999px; border:1.5px solid var(--accent);
  color:var(--accent-ink); background:var(--accent); text-decoration:none; transition:filter .2s var(--ease), transform .2s var(--ease); }
.btn:hover { filter:brightness(1.06); transform:translateY(-1px); }

/* document */
.page-head { padding:64px 0 30px; border-bottom:1px solid var(--line); }
.page-head h1 { font-family:var(--disp); font-weight:700; letter-spacing:-.04em; line-height:.98;
  font-size:clamp(40px,7vw,84px); margin:16px 0 0; }
.page-head .meta { margin-top:18px; color:var(--faint); font-size:13.5px; }
.page-head .meta b { color:var(--ink-soft); font-weight:600; }

.doc { max-width:var(--docw); margin:0 auto; padding:48px 0 30px; }
.doc h2 { font-family:var(--disp); font-weight:700; letter-spacing:-.025em; font-size:clamp(22px,3vw,30px);
  line-height:1.1; margin:54px 0 14px; }
.doc h2:first-child { margin-top:0; }
.doc h2 .n { color:var(--accent); font-size:.62em; vertical-align:.18em; margin-right:.5em; }
.doc h3 { font-family:var(--disp); font-weight:600; font-size:18px; margin:28px 0 8px; }
.doc p { color:var(--ink-soft); margin:0 0 16px; }
.doc ul { color:var(--ink-soft); margin:0 0 16px; padding-left:22px; }
.doc li { margin:0 0 9px; }
.doc a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.doc a:hover { text-decoration-thickness:2px; }
.doc a.btn { color:var(--accent-ink); text-decoration:none; }
.doc a.btn:hover { text-decoration:none; }
.doc strong { color:var(--ink); font-weight:600; }
.doc hr { border:0; border-top:1px solid var(--line); margin:40px 0; }

.tldr { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:14px; padding:22px 24px; margin:0 0 36px; }
.tldr p { margin:0; color:var(--ink-soft); }
.tldr .label { display:block; margin-bottom:8px; }

.toc { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 40px; }
.toc a { font-size:13px; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line);
  border-radius:999px; padding:6px 13px; transition:background .2s var(--ease), color .2s var(--ease); }
.toc a:hover { background:var(--ink); color:var(--paper); }

/* footer */
footer { border-top:1px solid var(--line); padding:40px 0; margin-top:40px; }
.foot-bottom { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px; }
.foot-bottom nav { display:flex; gap:22px; flex-wrap:wrap; }
.foot-bottom nav a { color:var(--muted); text-decoration:none; }
.foot-bottom nav a:hover { color:var(--accent); }

/* blog */
.post-list { display:grid; grid-template-columns:1fr; gap:0; margin:8px 0 0; border-top:1px solid var(--line); }
.post-card { display:block; text-decoration:none; color:inherit; padding:32px 6px; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease), padding-left .25s var(--ease); }
.post-card:hover { background:var(--card); padding-left:18px; }
.post-card .cat { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.post-card h2 { font-family:var(--disp); font-weight:700; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(24px,3.4vw,38px); margin:12px 0 10px; }
.post-card p { color:var(--muted); margin:0; max-width:62ch; }
.post-card .pm { margin-top:14px; color:var(--faint); font-size:13px; }

.article-meta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:18px; color:var(--faint); font-size:13.5px; }
.article-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--faint); }
.lead-p { font-size:clamp(18px,2.1vw,21px); line-height:1.5; color:var(--ink-soft); }

.table-wrap { overflow-x:auto; margin:24px 0; -webkit-overflow-scrolling:touch; }
.doc table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.doc th, .doc td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft); }
.doc thead th { font-family:var(--disp); font-weight:700; color:var(--ink); border-bottom:2px solid var(--ink); white-space:nowrap; }
.doc tbody th { font-weight:600; color:var(--ink); white-space:nowrap; }
.doc tbody tr:hover { background:var(--card); }
.doc td.yes { color:var(--accent); font-weight:600; }
.doc td.no { color:var(--faint); }

.cta-box { background:var(--ink); color:var(--paper); border-radius:16px; padding:30px 28px; margin:44px 0; }
.cta-box h3 { font-family:var(--disp); font-weight:700; letter-spacing:-.02em; font-size:clamp(22px,3vw,28px); margin:0 0 8px; color:var(--paper); }
.cta-box p { color:rgba(233,230,221,.66); margin:0 0 18px; }
.cta-box .btn { border-color:var(--accent); }

.related { border-top:1px solid var(--line); margin-top:48px; padding-top:28px; }
.related .label { display:block; margin-bottom:16px; }
.related a { display:block; text-decoration:none; color:inherit; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.related a:hover { color:var(--accent); }
.related a span { font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:-.02em; }

a:focus-visible, .btn:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation:none !important; } html { scroll-behavior:auto; } }