/* ============================================================================
   TERMS OF USE — dark navy hero (opposite tone from privacy.html's light
   document band) with a bordered "quick summary" callout box sitting
   beside the heading instead of a pill-link table of contents. Same
   restrained, non-photographic approach as privacy.html for the right
   reason (it's a legal document, not a story), but visually its own thing.
   ============================================================================ */



/* ============================================================================
   TYPOGRAPHY — INTER
   ============================================================================ */

.terms-hero,
.legal-section,
.profile-hero,
.news-article {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.terms-hero {
  background: var(--royal-deep);
  color: #fff;
  padding: 168px 0 56px;
}
.terms-hero .breadcrumb { color: rgba(255,255,255,0.55); }
.terms-hero .breadcrumb a { color: rgba(255,255,255,0.75); }
.terms-hero .updated-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.terms-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 20px;
}
.terms-hero h1 {
  color: #fff;
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 14px;
}
.terms-hero-intro p {
  color: rgba(255,255,255,0.72);
  font-size: 16px;
  max-width: 56ch;
}

.terms-summary {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  padding: 24px;
}
.terms-summary h3 {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
  BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-sky);
  margin-bottom: 14px;
}
.terms-summary ul { list-style: none; }
.terms-summary li {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.terms-summary li:last-child { border-bottom: none; padding-bottom: 0; }
.terms-summary li:first-child { padding-top: 0; }

/* ============================================================================
   TERMS / LEGAL ACCORDION
   ============================================================================ */

.legal-section {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* ============================================================================
   ACCORDION ROW
   ============================================================================ */

.legal-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  color: var(--royal-deep);
  text-align: left;

  cursor: pointer;
}


/* Heading + number */

.legal-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;

  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  font-weight: 600;
}


/* Section number */

.legal-heading .num {
  flex-shrink: 0;

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.04em;

  color: var(--royal);
}


/* ============================================================================
   PLUS / X CONTROL
   ============================================================================ */

.legal-toggle {
  position: relative;

  flex-shrink: 0;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(27, 58, 107, 0.28);
  border-radius: 50%;

  color: var(--royal);

  font-family: "Inter", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;

  transition:
    transform 220ms ease,
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}


/* The plus */

.legal-toggle::before,
.legal-toggle::after {
  content: "";
  position: absolute;

  width: 12px;
  height: 1.5px;

  background: currentColor;

  transition:
    transform 220ms ease,
    opacity 180ms ease;
}


/* Hide the text plus itself */

.legal-toggle {
  font-size: 0;
}


/* Horizontal line */

.legal-toggle::before {
  transform: rotate(0deg);
}


/* Vertical line */

.legal-toggle::after {
  transform: rotate(90deg);
}


/* ============================================================================
   OPEN STATE — PLUS BECOMES X
   ============================================================================ */

.legal-accordion-trigger[aria-expanded="true"] .legal-toggle {
  background: var(--royal);
  border-color: var(--royal);
  color: #fff;
}


/* Turn the two lines into an X */

.legal-accordion-trigger[aria-expanded="true"] .legal-toggle::before {
  transform: rotate(45deg);
}

.legal-accordion-trigger[aria-expanded="true"] .legal-toggle::after {
  transform: rotate(-45deg);
}


/* ============================================================================
   HOVER
   ============================================================================ */

.legal-accordion-trigger:hover .legal-toggle {
  background: var(--royal);
  border-color: var(--royal);
  color: #fff;
}


/* ============================================================================
   KEYBOARD FOCUS
   ============================================================================ */

.legal-accordion-trigger:focus-visible {
  outline: 3px solid rgba(41, 184, 232, 0.45);
  outline-offset: 6px;
  border-radius: 4px;
}


/* ============================================================================
   ACCORDION CONTENT
   ============================================================================ */

.legal-accordion-content {
  max-width: 760px;

  padding: 22px 50px 4px;

  animation: legalAccordionOpen 220ms ease;
}


.legal-accordion-content p {
  margin: 0;

  color: var(--slate);

  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 15px;
  line-height: 1.75;
}


/* Lists if you add them later */

.legal-accordion-content ul {
  margin: 0 0 14px 20px;

  color: var(--slate);

  font-size: 15px;
  line-height: 1.7;
}

.legal-accordion-content li {
  margin-bottom: 7px;
}


/* ============================================================================
   OPEN ANIMATION
   ============================================================================ */

@keyframes legalAccordionOpen {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================================
   SECTION SPACING
   ============================================================================ */

.legal-section {
  padding-top: 42px;
  padding-bottom: 42px;
}

.legal-section + .legal-section {
  border-top: 1px solid rgba(27, 58, 107, 0.08);
}


/* ============================================================================
   MOBILE
   ============================================================================ */

@media (max-width: 640px) {

  .legal-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .legal-heading {
    gap: 11px;

    font-size: 19px;
  }

  .legal-heading .num {
    font-size: 12px;
  }

  .legal-toggle {
    width: 31px;
    height: 31px;
  }

  .legal-toggle::before,
  .legal-toggle::after {
    width: 11px;
  }

  .legal-accordion-content {
    padding: 18px 0 2px 31px;
  }

  .legal-accordion-content p {
    font-size: 14px;
    line-height: 1.7;
  }
}