/* ═══════════════════════════════════════════════════════════════
   EmailGPT - legal.css (loaded by /terms/, /privacy/, /refunds/)
   Plain reading layout on the same brand tokens as styles.css.
   These pages exist to be read and to be true, not to impress, so
   the styling stays out of the way: one column, ~74ch, no cards.
   All classes are .legal-* so nothing collides with other pages.
   ═══════════════════════════════════════════════════════════════ */

.legal-head {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px);
}

.legal-head-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13,148,136,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 40% 20%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 80% at 40% 20%, black 0%, transparent 72%);
}

/* No max-width here: this element carries .container, so capping it would
   re-centre the block and leave the page title on a different left edge from
   the document body below. The measure is capped on the text itself. */
.legal-head-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}

.legal-lead {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  max-width: 62ch;
}

.legal-updated {
  font-size: 0.82rem;
  color: rgba(255,255,255,.45);
}

/* ── Document body ── */
.legal-body {
  padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 88px);
  background: var(--white);
}

.legal-doc {
  max-width: 74ch;
}

.legal-doc h2 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.legal-doc h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-doc h3 {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 22px;
}

.legal-doc p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-light);
  margin-top: 10px;
}

.legal-doc ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.legal-doc li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-light);
}

.legal-doc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.legal-doc strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-doc a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-doc a:hover,
.legal-doc a:focus-visible { color: var(--teal); }

/* Marks a value that only exists once the legal entity is registered, so it
   is obvious at a glance which lines are still open. */
.legal-placeholder {
  background: rgba(252,211,77,.28);
  color: var(--ink);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
}

.legal-contact {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.legal-contact h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}