/* ==========================================================================
   Privacy Policy — Axis Fintech
   Shared tokens/reset/navbar/footer → css/global.css
   ========================================================================== */

/* ---------- Page-specific CSS Variables ---------- */
:root {
  --fs-title:      clamp(2rem, 5vw, 3rem);
  --fs-section-h:  1.25rem;
  --fs-body:       1.25rem;
  --fw-regular:    400;
  --fw-bold:       700;
  --lh-body:       1.65;
  --color-text:    var(--color-primary);
  --space-76:      4.75rem;
  --space-110:     6.875rem;
  --space-171:     10.6875rem;
  --max-content:   1440px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  flex: 1;
  background-color: var(--color-white);
}

.main-content__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-110) var(--space-171);
  display: flex;
  flex-direction: column;
  gap: var(--space-76);
}

.main-content__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.3;
}

.main-content__body {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.policy__heading {
  font-family: var(--font-body);
  font-size: var(--fs-section-h);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.5;
}

.policy__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: var(--lh-body);
  max-width: 1097px;
}

/* ============================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .main-content__inner {
    padding: 5rem 4rem;
    gap: 3rem;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .main-content__inner {
    padding: 3rem 1.5rem;
    gap: 2rem;
  }

  .policy__text {
    font-size: 1rem;
  }

  .policy__heading {
    font-size: 1.1rem;
  }
}

/* ============================================================
   RESPONSIVE — Small mobile (≤ 320px)
   ============================================================ */
@media (max-width: 320px) {
  .main-content__inner {
    padding: 2rem 1rem;
  }
}

/* ============================================================
   RESPONSIVE: Small mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .navbar__inner { padding: 1rem; }
  .main__inner {
    padding: 2rem 1rem;
    gap: 1.5rem;
  }

  .header__inner {
    padding: 1rem;
  }

  .footer__inner {
    padding: 0.75rem 1rem;
  }
  
}