/* ——— Terms and Conditions ——— */

.terms-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  padding: 122px 205px 122px;
  width: 100%;
  background: linear-gradient(180deg, #000 0%, #212121 100%);
  overflow: hidden;
}

.terms-glow {
  position: absolute;
  left: 50%;
  top: -246px;
  transform: translateX(-50%);
  width: 623px;
  height: 257px;
  background: rgba(224, 105, 0, 0.5);
  border-radius: 200px;
  filter: blur(300px);
  pointer-events: none;
}

.terms-hero-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.terms-eyebrow {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #909090;
  width: 100%;
}

.terms-title {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.2;
  color: #fff;
  width: 100%;
}

.terms-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.terms-intro {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.terms-updated {
  color: #f68121;
  margin-bottom: 1.5em;
}

.terms-divider {
  display: block;
  width: 100%;
  height: 1px;
  object-fit: cover;
  margin: 0 0 -14px;
}

.terms-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.terms-block h2 {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  color: #fff;
}

.terms-body {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.terms-body-sm {
  font-size: 24px;
}

.terms-body p + p,
.terms-body p + ul,
.terms-body ul + p {
  margin-top: 1.5em;
}

.terms-body ul {
  list-style: disc;
  padding-left: 36px;
}

/* .partners:not(.partners--band) and .partners-standalone were dead code:
   terms.html / privacy.html both ship <div class="partners partners--band">,
   which is styled entirely by css/components.css. */

/* ============ LIGHT MODE ============
   Terms/Privacy are pure text documents, so every surface flips.
   The only element that has to be re-drawn rather than re-coloured is the
   divider, which ships as a hard-coded white <line> SVG. */

html[data-theme="light"] .terms-hero {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 34%);
}

html[data-theme="light"] .terms-glow {
  background: rgba(246, 129, 33, 0.35);
  filter: blur(240px);
}

html[data-theme="light"] .terms-eyebrow {
  color: var(--text-grey);
}

html[data-theme="light"] .terms-title,
html[data-theme="light"] .terms-block h2 {
  color: var(--text);
}

html[data-theme="light"] .terms-intro,
html[data-theme="light"] .terms-body {
  color: var(--text-secondary);
}

html[data-theme="light"] .terms-intro .terms-updated {
  color: var(--accent-text);
}

html[data-theme="light"] .terms-body strong,
html[data-theme="light"] .terms-intro strong {
  color: var(--text);
}

/* divider.svg is stroke="white" — invert it so the same asset reads as a
   hairline rule on a light ground. */
html[data-theme="light"] .terms-divider {
  filter: invert(1);
  opacity: 0.22;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 1440px) {
  .terms-hero {
    padding: 112px 8vw 104px;
    gap: 88px;
  }
}

@media (max-width: 1100px) {
  .terms-hero {
    padding: 104px 40px 88px;
    gap: 56px;
  }
  .terms-title { font-size: 48px; }
  .terms-block h2 { font-size: 28px; }
  .terms-intro,
  .terms-body { font-size: 20px; }
  .terms-body-sm { font-size: 19px; }
  .terms-content { gap: 34px; }
}

@media (max-width: 768px) {
  .terms-hero {
    padding: 88px 20px 56px !important;
    gap: 36px;
  }
  .terms-glow {
    width: 300px;
    height: 150px;
    top: -130px;
    filter: blur(130px);
  }
  .terms-content,
  .terms-hero-inner { width: 100%; max-width: 100%; padding: 0; }
  .terms-hero-inner { gap: 12px; }
  .terms-eyebrow { font-size: 12px; letter-spacing: 2px; line-height: 1.4; }
  .terms-title { font-size: clamp(28px, 8vw, 40px) !important; }
  .terms-content { gap: 26px; }
  .terms-block { gap: 12px; }
  .terms-block h2 { font-size: 20px; line-height: 1.3; }
  .terms-intro,
  .terms-body,
  .terms-body-sm { font-size: 16px; line-height: 1.65; }
  .terms-body p + p,
  .terms-body p + ul,
  .terms-body ul + p { margin-top: 1.15em; }
  .terms-body ul { padding-left: 22px; }
  .terms-divider { margin-bottom: -4px; }
  .nf { padding: 100px 20px !important; }
}

@media (max-width: 390px) {
  .terms-hero { padding-left: 16px !important; padding-right: 16px !important; }
}