:root {
  --terra-orange: #fc7610;
  --granite: #15171b;
  --bone: #f4f1ea;
  --muted: #9aa0a8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  background: var(--granite);
  color: var(--bone);
  line-height: 1.6;
}

.wordmark {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--bone);
}

.wordmark .adv { color: var(--terra-orange); }

.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 3rem 1.5rem;
  background: radial-gradient(ellipse at 30% 20%, #2a1f14 0%, var(--granite) 55%);
}

.hero-inner { max-width: 720px; margin: 0 auto; }

.hero h1 {
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 1rem 0 0.5rem;
}

.lead { color: var(--muted); font-size: 1.125rem; max-width: 560px; }

.cta { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.btn-primary { background: var(--terra-orange); color: #fff; }
.btn-secondary { border: 1px solid #3a3f48; color: var(--bone); }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.features h2 { font-size: 1.125rem; margin-top: 0; }

footer {
  border-top: 1px solid #2a2e35;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--muted);
}

footer nav { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
footer a { color: var(--bone); }

.legal main { max-width: 640px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.legal header { padding: 1.5rem; }

/* ─────────────────────────────────────────────────────────────
   Append to web/marketing/styles.css

   The rewritten privacy.html and terms.html introduce two
   elements the original legal pages never used:

     h3  — subheadings inside a numbered section
           (privacy §2 "Information you give us", "Location
            information", etc.; terms §8 "Your responsibilities",
            "Licence you grant us", "Moderation")

     ol  — the numbered Apple minimum terms in terms.html §19

   Without these they fall back to browser defaults, which will
   look out of step with the rest of the page. Adjust the values
   to match whatever styles.css already uses for h2 and ul.
   ───────────────────────────────────────────────────────────── */

.legal main h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.8em 0 0.6em;
  color: inherit;
}

/* first h3 after an h2 sits closer, since the h2 already opened the block */
.legal main h2 + h3 {
  margin-top: 1.1em;
}

.legal main ol {
  margin: 1em 0;
  padding-left: 1.4em;
}

.legal main ol > li {
  margin-bottom: 0.85em;
  padding-left: 0.2em;
}

.legal main ol > li:last-child {
  margin-bottom: 0;
}

/* the Apple terms list leads each item with a bold label */
.legal main ol > li > strong:first-child {
  display: inline;
}