/* "How your data is handled" (landing/public/data.html): the landing page's
   warm charcoal and type (landing/landing.css), for a page to be read. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}
:root {
  --bg: #121110;
  --text: #f2efea;
  --text-2: #a39e97;
  --text-3: #6f6a64;
  --accent: #ece4d6;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    url('/textures/charcoal-grain.png') 0 0 / 128px 128px repeat,
    radial-gradient(1200px 700px at 72% 0%, rgba(255, 242, 228, 0.06), transparent 70%) fixed,
    var(--bg);
  color: var(--text);
  font: 16px/1.6 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.top { max-width: 760px; margin: 0 auto; padding: 22px 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 650; font-size: 20px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }

main { max-width: 760px; margin: 0 auto; padding: 32px 20px 40px; }
.eyebrow { margin: 0 0 12px; color: var(--text-3); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0 0 18px; font-size: clamp(34px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 750; text-wrap: balance; }
.lede { margin: 0 0 56px; font-size: 19px; color: var(--text-2); text-wrap: pretty; }
section { margin-bottom: 56px; }
h2 { margin: 0 0 18px; font-size: 24px; letter-spacing: -0.02em; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 28px; color: var(--text-2); }
.points li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.points b { color: var(--text); font-weight: 600; }
/* Things Slate never does: a quiet dash, not a tick (a tick would read as "yes, it does"). */
.points.is-never li::before { top: 12px; width: 11px; height: 1.5px; border: 0; background: var(--text-3); transform: none; }

.ways { display: grid; gap: 30px; }
.ways p, .plain { margin: 0; color: var(--text-2); }
.ask { margin: 0; padding-top: 8px; font-size: 17px; }

footer { max-width: 760px; margin: 0 auto; padding: 16px 20px 48px; color: var(--text-3); font-size: 14px; }
footer p { margin: 0; }