/* ===================================================================
   Legal pages (Privacy Policy / Terms of Service)
   uses tokens + shared nav/footer from styles.css
   =================================================================== */

/* ---------- Hero ---------- */
.legal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 200px 100px 88px;
  background: var(--color-hero-bg);
}

.legal-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.75rem, 5.6vw, 4.5rem);   /* 44 -> 72 */
  line-height: 1.111;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-ink);
}

.legal-hero__meta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-body);
}

/* ---------- Body ---------- */
.legal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 100px 80px;
  background: #fff; 
}

.legal-card {
  width: 100%;
  max-width: 868px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 56px;
  border-radius: 32px;
}

/* article typography */
.legal-card > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  color: #000;
}

.legal-card > h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  color: #000;
}

.legal-card [id] {
  scroll-margin-top: 130px;
}

.legal-card h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: #000;
}

.legal-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;            /* 170% */
  letter-spacing: -0.01em;
  color: var(--color-body);
}

.legal-card a {
  color: var(--color-ink);
  text-decoration: underline;
}

/* numbered sub-sections (e.g. Directly / Indirectly) */
.legal-list {
  list-style: decimal;
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}

.legal-list > li {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-list > li::marker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: #000;
}

.legal-list--clauses {
  list-style: none;
  padding-left: 24px;
}

.legal-card strong {
  font-weight: 700;
  color: var(--color-ink);
}

/* tighten spacing where a heading is immediately followed by text */
.legal-card > h3 + p,
.legal-card > h2 + p { margin-top: -8px; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1100px) {
  .legal-hero { padding: 160px 56px 72px; }
  .legal-body { padding: 0 56px 72px; }
}

@media (max-width: 880px) {
  .legal-hero { padding: 132px 24px 56px; }
  .legal-hero__title { font-size: 40px; line-height: 48px; }
  .legal-body { padding: 0 24px 64px; }
  .legal-card { padding: 32px 24px; gap: 20px; }
  .legal-card > h2 { font-size: 26px; line-height: 32px; }
  .legal-card > h3 { font-size: 22px; line-height: 28px; }
  .legal-list--clauses { padding-left: 16px; }
  .legal-list--clauses > li { padding-left: 14px; }
}

@media (max-width: 520px) {
  .legal-hero { padding: 120px 16px 48px; }
  .legal-body { padding: 0 16px 56px; }
  .legal-card { padding: 24px 0; }
  .legal-list--clauses { padding-left: 10px; }
  .legal-list--clauses > li { padding-left: 12px; }
}