/* Layout for the privacy, risk and terms documents.
   Loads on top of styles.css, so the design tokens, base typography and
   .xp-footer rules are inherited rather than duplicated. No JavaScript:
   these pages are static documents. */

.legal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.legal-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.legal-header .wordmark {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

.legal-header .spacer { flex: 1; }

.legal-header .back {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-3);
  text-transform: uppercase;
  text-decoration: none;
}

.legal-header .back:hover { color: var(--navy); }

.legal-header .btn-wa {
  background: var(--blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.legal-header .btn-wa:hover { background: var(--blue-hover); }

/* ---------- document ---------- */

/* position/z-index give the document its own stacking context, mirroring
   .xp-app on the main page. Without it the content sits in the root stacking
   context above the body's grid background and rasterises washed out. The
   text computes at full contrast but paints at almost none. */
.legal-wrap {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 24px clamp(64px, 8vw, 96px);
}

.legal-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: clamp(28px, 5vw, 64px);
}

.legal-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--blue);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.legal-doc h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 18px;
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-4);
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.legal-lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-2);
  margin: 28px 0 0;
}

.legal-doc h2 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 44px 0 12px;
  padding-top: 28px;
  border-top: 1px solid var(--border-2);
}

.legal-doc h2 .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue);
  font-weight: 500;
  margin-right: 10px;
}

.legal-doc h3 {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  margin: 26px 0 8px;
}

.legal-doc p,
.legal-doc li {
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--text-2);
}

.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 20px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc a { color: var(--blue); }

.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: .875rem;
}

.legal-doc th,
.legal-doc td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}

.legal-doc th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  background: var(--bg);
}

.legal-doc td { color: var(--text-2); }
.legal-doc td.price { font-family: var(--font-mono); white-space: nowrap; }

/* Emphasis blocks. .warn carries the risk warnings, .note the neutral asides. */
.callout {
  border-left: 3px solid var(--blue);
  background: var(--blue-50);
  padding: 18px 22px;
  border-radius: 0 8px 8px 0;
  margin: 22px 0;
}

.callout.warn {
  border-left-color: #B45309;
  background: #FFFBEB;
}

.callout.warn strong { color: #7C2D12; }
.callout p:last-child { margin-bottom: 0; }

.legal-contact {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text-3);
  line-height: 1.9;
}

@media (max-width: 640px) {
  .legal-header .back { display: none; }
  .legal-doc table { display: block; overflow-x: auto; }
}

/* At 320-400px the wordmark and the CTA together exceeded the viewport and
   pushed the page into horizontal scroll. Tighten both rather than drop
   either, and let the wordmark shrink before anything spills. */
@media (max-width: 420px) {
  .legal-header-inner { padding: 12px 18px; gap: 10px; }
  .legal-header .wordmark {
    font-size: 11px; letter-spacing: .06em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .legal-header .btn-wa { font-size: 12px; padding: 9px 12px; }
}