/* Shared by privacy.html, terms.html and 404.html. Same tokens as the home page. */
:root {
  --bg: #0a0a12; --surface: #15151f; --surface-2: #1e1e2b; --ink: #f3f3f8; --muted: #a7a7ba; --accent: #4740cd;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --step-head: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem);
  --margin: clamp(1rem, 2.2vw, 2rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul { margin: 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid #8f88ff; outline-offset: 3px; border-radius: 6px; }
.wrap { padding-inline: var(--margin); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.button { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 600; text-decoration: none; transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1); }
.button:active { transform: scale(0.97); }
.button.big { min-height: 3rem; padding: 0 1.4rem; font-size: var(--step-body); }

main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(3rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem); }
main > header { position: sticky; top: 2rem; align-self: start; }
h1 { font-family: var(--font-display); font-size: var(--step-head); font-weight: 650; line-height: 1.04; letter-spacing: -0.034em; text-wrap: balance; }
.updated { margin-top: 1rem; color: var(--muted); font-size: var(--step-small); }
.lede { font-size: var(--step-lead); line-height: 1.45; letter-spacing: -0.012em; max-width: 36ch; }
article { max-width: 40rem; }
article section { margin-top: 2.75rem; }
h2 { font-family: var(--font-display); font-size: var(--step-lead); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
article p, article li { margin-top: 0.6rem; }
article ul { padding-left: 1.2rem; }
.panel { margin-top: 2.75rem; padding: 1.4rem 1.5rem; border-radius: 14px; background: var(--surface); }

.lost { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.lost-icon { justify-self: center; width: min(100%, 420px); height: auto; }
.lost h1 { font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem); line-height: 1; letter-spacing: -0.042em; max-width: 12ch; }
.lost p { margin-top: 1.5rem; max-width: 40ch; font-size: var(--step-lead); line-height: 1.45; }
.lost .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

.foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.5rem 2rem; align-items: baseline; padding-block: 2rem; font-size: var(--step-small); color: var(--muted); }
.foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot ul a { color: var(--ink); text-decoration-color: transparent; transition: text-decoration-color 180ms ease; }
.foot ul a:hover { text-decoration-color: currentColor; }
.foot .right { justify-self: end; }

@media (max-width: 47.99em) {
  main, .lost { grid-template-columns: 1fr; }
  .lost-icon { width: 160px; justify-self: start; margin-top: 3rem; order: -1; }
  main > header { position: static; margin-bottom: 1rem; }
  .foot { grid-template-columns: 1fr; }
  .foot .right { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }