/*
  One stylesheet for the whole site.

  No framework and no build step, deliberately. This site is five pages of legal
  text and contact details that must still resolve in three years — a toolchain
  that needs upgrading is a liability, not an asset, and Apple's reviewer taps
  these links.
*/

:root {
  --bg: #ffffff;
  --surface: #f8f8fa;
  --ink: #0b0b0c;
  --ink-soft: #5c5c66;
  --hairline: rgba(0, 0, 0, 0.09);
  --accent: #c2410c;          /* tangerine, darkened for text contrast on white */
  --accent-flat: #f97316;
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f13;
    --surface: #16181e;
    --ink: #f4f4f6;
    --ink-soft: #a0a0ac;
    --hairline: rgba(255, 255, 255, 0.1);
    --accent: #fb923c;        /* lightened instead: the dark variant is unreadable on near-black */
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  /* Prose measure. Long legal text at full window width is unreadable, and
     unreadable terms are the kind nobody can claim they agreed to. */
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */

header {
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  margin-bottom: 44px;
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand span { color: var(--accent); }

header nav {
  display: flex;
  gap: 18px;
  font-size: 15px;
  font-weight: 600;
}

header nav a { color: var(--ink-soft); text-decoration: none; }
header nav a:hover { color: var(--ink); }

/* Type */

h1 {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 40px 0 10px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 6px;
}

p, li { color: var(--ink-soft); }
p { margin: 0 0 16px; }

.lead {
  font-size: 19px;
  color: var(--ink-soft);
  margin-bottom: 32px;
}

a { color: var(--accent); }

ul { padding-left: 20px; margin: 0 0 16px; }
li { margin-bottom: 8px; }

strong { color: var(--ink); font-weight: 650; }

.meta {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 36px;
}

/* Cards */

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
}

a.card:hover { border-color: var(--accent-flat); }

.card h2 { margin: 0 0 4px; font-size: 19px; color: var(--ink); }
.card p { margin: 0; font-size: 16px; }

.card .links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
}

/* A short, factual callout. Used where something is materially true and easy to
   miss — never for marketing. */
.note {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent-flat);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 0 24px;
}

.note p { margin: 0; font-size: 16px; }

footer {
  border-top: 1px solid var(--hairline);
  margin-top: 72px;
  padding: 26px 0 56px;
  font-size: 14px;
  color: var(--ink-soft);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (max-width: 520px) {
  h1 { font-size: 30px; }
  header { margin-bottom: 32px; }
}