/*
 * The legal pages (/terms/, /privacy/, /refund-policy/). Plain static HTML
 * like the sample reports, readable without JavaScript: Paddle's domain
 * review reads them, and its crawler does not run scripts.
 *
 * Loaded after landing/landing.css, whose tokens (black page, Primary-100
 * #FFC3AD, white at 90/80/70/50/30 %, SF Pro), header (.nav, .brand) and
 * footer (.footer) these pages reuse as they are. Only the document column
 * is styled here.
 */

/* The landing's 1440 frame, without its #landing hook (landing.js removes
   that element when the app boots; these pages never load the app). */
.page {
  max-width: var(--frame);
  margin-inline: auto;
}

.legal {
  padding: 48px var(--gutter) 80px;
}

/* One readable column: 720 at most, the gutters around it on a phone. */
.legal__doc {
  max-width: 720px;
  margin-inline: auto;
  color: var(--text-80);
  font-size: 16px;
  line-height: 1.6;
  /* Long runs of text read better a little looser than the landing's
     -0.5 display tracking. */
  letter-spacing: -0.2px;
  /* An e-mail address or URL never pushes the page sideways. */
  overflow-wrap: anywhere;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.legal__meta {
  color: var(--text-50);
  font-size: 14px;
}

.legal__doc h2 {
  margin: 48px 0 16px;
  color: var(--text-90);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 590;
  letter-spacing: -0.5px;
  /* Reached through an anchor: landing.css's scroll-padding-top already
     keeps it clear of the sticky header; this is the air above it. */
  scroll-margin-top: 24px;
}

.legal__doc h3 {
  margin: 28px 0 8px;
  color: var(--text-90);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 590;
  letter-spacing: -0.3px;
  scroll-margin-top: 24px;
}

.legal__doc p {
  margin: 0 0 14px;
}

.legal__doc ul,
.legal__doc ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal__doc li {
  margin: 0 0 6px;
}

.legal__doc li::marker {
  color: var(--primary);
}

.legal__doc strong {
  color: var(--text-90);
  font-weight: 590;
}

.legal__doc a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal__doc a:hover {
  opacity: 0.8;
}

/* A key point set apart: the landing's card surface and 1px stroke. */
.legal__note {
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  background: var(--bg-card);
}

.legal__note > :last-child {
  margin-bottom: 0;
}

.legal__address {
  margin: 0 0 14px;
  font-style: normal;
}

@media (max-width: 760px) {
  .legal {
    padding: 32px var(--gutter) 56px;
  }

  .legal__head {
    margin-bottom: 32px;
  }

  .legal__doc h2 {
    margin-top: 40px;
    font-size: 20px;
    scroll-margin-top: 16px;
  }

  .legal__note {
    padding: 16px 18px;
  }
}