/* legal.css — shared styles for About, Contact, and the four policy pages.
   One consistent template: hero, optional table of contents, prose body.
   Reuses base.css/components.css typography, buttons, and forms as-is. */

.legal-hero { padding: var(--space-7) 0 var(--space-5); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-6); }
.legal-hero .lede { max-width: 640px; }
.legal-updated { font-size: 13px; color: var(--text-tertiary); margin-top: var(--space-2); }

.legal-body { max-width: 760px; margin: 0 auto var(--space-8); }
.legal-body h2 { font-size: clamp(22px, 3vw, 28px); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin-top: var(--space-4); margin-bottom: var(--space-2); }
.legal-body p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-3); }
.legal-body ul, .legal-body ol { color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body strong { color: var(--paper); }
.legal-body a { color: var(--signal-blue); }

/* ---------- Help page ----------
   Shares this file because it's the same long-form reading layout, not
   because it's a legal document. */

.help-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.help-toc a { padding: 8px var(--space-3); border: 1px solid var(--border-default); border-radius: 999px; font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.help-toc a:hover { border-color: var(--signal-blue); color: var(--text-primary); }

/* Anchored sections need clearance when jumped to from the TOC. */
.legal-body section[id] { scroll-margin-top: var(--space-5); }

.help-example { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-4); margin: var(--space-4) 0; }
.help-example-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--space-3); }
.help-table { width: 100%; border-collapse: collapse; }
.help-table td { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; color: var(--text-secondary); }
.help-table td:last-child { text-align: right; font-family: var(--font-display); font-weight: 600; white-space: nowrap; color: var(--text-primary); }
.help-table-total td { border-bottom: none; padding-top: var(--space-3); font-size: 17px; }
.help-table-total td:last-child { color: var(--emerald); }

.help-callout { display: flex; gap: var(--space-2); background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-input); padding: var(--space-3); font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.help-callout .ph { flex-shrink: 0; margin-top: 3px; }

.legal-toc { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-4); margin-bottom: var(--space-6); }
.legal-toc h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.legal-toc ol { margin: 0; padding-left: var(--space-4); }
.legal-toc a { color: var(--text-secondary); font-size: 14px; }
.legal-toc a:hover { color: var(--signal-blue); }

.legal-callout {
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-input);
  padding: var(--space-3); margin: var(--space-3) 0; font-size: 14px; color: var(--text-primary);
}
.legal-callout strong { color: var(--danger); }

.legal-callout-positive {
  background: rgba(15, 174, 121, 0.1); border: 1px solid rgba(15, 174, 121, 0.3); border-radius: var(--radius-input);
  padding: var(--space-3); margin: var(--space-3) 0; font-size: 14px; color: var(--text-primary);
}
.legal-callout-positive strong { color: var(--emerald); }

/* Any placeholder value (email, phone, address, names) is visually
   flagged so it's impossible to mistake for real, final information —
   both for Lakshay reviewing before launch and for anyone reading the
   live site if one gets missed. */
.placeholder {
  color: var(--signal-blue);
  background: rgba(46, 107, 255, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}

.contact-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  padding: var(--space-5); margin: var(--space-4) 0 var(--space-6);
}
@media (max-width: 479px) { .contact-detail-grid { grid-template-columns: 1fr; } }
.contact-detail-grid h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 6px; font-weight: 600; }
.contact-detail-grid p { margin: 0; color: var(--text-primary); font-size: 15px; line-height: 1.5; }

.contact-email-highlight {
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin: var(--space-4) 0 var(--space-3);
}
.contact-email-highlight h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: var(--space-2); font-weight: 600; }
.contact-email-highlight a { font-family: var(--font-display); font-size: clamp(20px, 4vw, 28px); font-weight: 700; color: var(--signal-blue); }
.contact-email-highlight a:hover { color: var(--paper); }