/* Shared layout for legal pages (privacy, terms, refund).
   Relies on home/css/base.css for design tokens and home/css/sections.css for nav + footer. */

.legal {
  max-width: 760px;
  margin: 56px auto 96px;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: .85rem;
  color: var(--tx-mute);
  text-decoration: none;
  transition: color .2s;
}
.legal .back:hover { color: var(--brand); }

.legal h1 {
  font-family: var(--head);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
  color: var(--tx);
}

.legal .updated {
  font-size: .82rem;
  color: var(--tx-mute);
  margin-bottom: 40px;
}

.legal h2 {
  font-family: var(--head);
  font-size: 1.12rem;
  font-weight: 600;
  margin-top: 38px;
  margin-bottom: 14px;
  color: var(--brand);
  letter-spacing: -.01em;
}

.legal p,
.legal li {
  font-size: .94rem;
  color: var(--tx-2);
  line-height: 1.75;
  margin-bottom: 12px;
}

.legal ul {
  padding-left: 22px;
  margin-bottom: 12px;
}
.legal li { margin-bottom: 8px; }

.legal a {
  color: var(--brand);
  text-decoration: none;
}
.legal a:hover { text-decoration: underline; }

.legal strong { color: var(--tx); font-weight: 600; }
.legal em { color: var(--tx); font-style: italic; }

.legal .callout {
  border-left: 2px solid var(--brand);
  padding: 16px 20px;
  background: rgba(51, 238, 255, 0.05);
  margin: 18px 0;
  border-radius: 0 10px 10px 0;
}
.legal .callout p:last-child { margin-bottom: 0; }