/* Shared shell for the text pages (support, terms, privacy). Same palette and
   type as the landing, minus everything the landing needs and a document does not. */
:root{
  --bg: oklch(97% 0.012 40);
  --surface-raised: oklch(100% 0.004 40);
  --border: oklch(89% 0.02 40);
  --muted: oklch(48% 0.03 40);
  --fg: oklch(24% 0.02 30);
  --accent: oklch(56% 0.11 30);
  --ink: oklch(21% 0.026 35);
  --ink-border: oklch(34% 0.03 35);
  --on-ink: oklch(96% 0.008 40);
  --on-ink-muted: oklch(80% 0.015 40 / 0.72);
  --font-display: 'Iowan Old Style','Charter',Georgia,serif;
  --font-body: -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--accent); }
.wrap{ max-width:720px; margin:0 auto; padding-inline: clamp(20px, 5vw, 40px); }

.nav{ border-bottom:1px solid var(--border); background:var(--surface-raised); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mark{ width:28px; height:28px; flex-shrink:0; border-radius:8px; overflow:hidden; }
.brand .mark svg{ width:100%; height:100%; }
.brand .word{ font-family:var(--font-display); font-size:18px; color:var(--fg); }
.nav .back{ font-size:14px; color:var(--muted); text-decoration:none; }
.nav .back:hover{ color:var(--fg); }

main{ padding-block: clamp(40px, 7vw, 72px) clamp(48px, 8vw, 88px); }
main .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px;
}
main h1{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,5vw,42px); line-height:1.12; letter-spacing:-0.01em;
  margin:0 0 10px;
}
main .updated{ font-size:13px; color:var(--muted); margin:0 0 36px; }
main h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(20px,3vw,25px); line-height:1.25;
  margin:36px 0 10px;
}
main h3{
  font-family:var(--font-display); font-weight:400;
  font-size:19px; line-height:1.3;
  margin:24px 0 8px;
}
main p, main li{ font-size:15.5px; line-height:1.65; color:var(--fg); }
main p{ margin:0 0 14px; }
main ul{ margin:0 0 14px; padding-left:20px; }
main li{ margin-bottom:7px; }
main .lede{ font-size:17px; line-height:1.6; color:var(--muted); margin-bottom:28px; }
.callout{
  border:1.5px solid var(--border); border-radius:14px; background:var(--surface-raised);
  padding:16px 18px; margin:0 0 28px;
}
.callout p:last-child{ margin-bottom:0; }

footer{ background:var(--ink); color:var(--on-ink); padding-block:28px; }
footer .wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:12px; color:var(--on-ink-muted);
}
footer .links{ display:flex; gap:18px; flex-wrap:wrap; }
footer a{ color:var(--on-ink-muted); text-decoration:none; }
footer a:hover{ color:var(--on-ink); }