/* ============================================================
   Stur Africa — Legal pages (Privacy Policy, Terms of Service)
   Extends colors_and_type.css + site.css
   ============================================================ */

body { background: var(--paper); }

/* ---- Hero ---- */
.terms-hero {
  text-align: center;
  padding: 160px 40px 56px;
}
.terms-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display-xl);
  line-height: 0.93;
  letter-spacing: -2.21px;
  color: var(--ink);
  margin: 0 0 20px;
}
.terms-title-gradient {
  background-image: var(--grad-text-d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.terms-date {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 24px;
  letter-spacing: var(--tr-body);
  color: var(--ink);
}

/* ---- Body content ---- */
.terms-content {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 40px 140px;
}
.terms-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 24px;
  letter-spacing: var(--tr-body);
  color: var(--ink);
  text-align: justify;
}
.terms-body p { margin: 0; }
.terms-body h2 {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 24px;
  letter-spacing: var(--tr-body);
  margin: 0;
  text-align: left;
}
.terms-body .gap { line-height: 24px; margin: 0; }
.terms-body ul {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.terms-body ul li {
  font-size: var(--fs-body-lg);
  line-height: 24px;
  letter-spacing: var(--tr-body);
}
.terms-body a { color: var(--ink); text-decoration: underline; }
.terms-body a:hover { color: var(--stur-purple); }

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .terms-hero { padding-top: 130px; }
  .terms-title { font-size: 68px; }
  .terms-content { padding: 0 32px 120px; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  /* Match home-page hero top padding (clamp floors at 120px on mobile) */
  .terms-hero { padding: 120px 25px 40px; }
  .terms-title { font-size: 61px; line-height: 0.93; letter-spacing: -2.21px; }
  .terms-date { font-size: var(--fs-body); font-weight: 500; }
  .terms-content { padding: 0 25px 80px; }
  /* Explicitly target all content elements — p inherits 16px from the global
     reset in colors_and_type.css and needs a direct override here */
  .terms-body,
  .terms-body p,
  .terms-body h2,
  .terms-body ul li { font-size: var(--fs-body); line-height: 21px; }
  .terms-body .gap { line-height: 21px; }
}