/* ═══════════════════════════════════════════════════════════════════════════
   IMPOSSIBLE MEANS GO — LEGAL PAGES
   Standalone stylesheet. Deliberately NOT css/style.css: that file is the
   landing page's system (canvas hero, pricing tiers, accordions) and none of
   it applies here. The brand tokens below are copied from it so the two stay
   visually one site; if a token changes there, change it here too.

   These pages are plain HTML on purpose. A2P 10DLC reviewers fetch them with
   no JavaScript, and a page that renders client-side looks empty to them —
   which is what has been failing MMR's campaign since July 2026.
   ═════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-base:      #0A0A0F;
  --bg-darker:    #070709;
  --bg-card:      #141422;
  --border:       rgba(255,255,255,0.07);
  --border-gold:  rgba(196,158,69,0.3);
  --gold:         #C49E45;
  --gold-light:   #E0BA6A;
  --text:         #F0EDE6;
  --text-muted:   #9B9B9B;
  --text-faint:   #5A5A6A;
  --radius:       16px;
  --max-w:        820px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--gold-light); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.legal-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-darker);
  padding: 18px 0;
}

.legal-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.logo:hover { text-decoration: none; }

.logo-mark {
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1rem;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 4px 9px;
}

.logo-text {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}

.back {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.back:hover { color: var(--text); text-decoration: none; }

/* ─── DOCUMENT ───────────────────────────────────────────────────────────── */
main { flex: 1; padding: 56px 0 72px; }

h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.effective {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.operator {
  font-size: 0.88rem;
  color: var(--text-muted);
  border-left: 2px solid var(--border-gold);
  padding: 8px 0 8px 16px;
  margin-bottom: 36px;
}

.intro { margin-bottom: 34px; color: rgba(240,237,230,0.9); }

/* Jump list — these documents are long and a reviewer is looking for one
   clause, not reading them. */
.toc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 44px;
}
.toc h2 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { font-size: 0.9rem; margin-bottom: 4px; color: var(--text-muted); }
.toc a { color: var(--text-muted); }
.toc a:hover { color: var(--gold-light); }

section { margin-bottom: 34px; scroll-margin-top: 24px; }

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--text);
}

h3 {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 18px 0 8px;
  color: var(--text);
}

p { margin-bottom: 14px; color: rgba(240,237,230,0.86); }
p:last-child { margin-bottom: 0; }

ul, ol.spec { padding-left: 22px; margin-bottom: 14px; }
ul { list-style: disc; }
li { margin-bottom: 7px; color: rgba(240,237,230,0.86); }
li:last-child { margin-bottom: 0; }

strong { color: var(--text); font-weight: 600; }

/* ─── CALLOUT — the clauses a carrier reviewer is looking for ───────────── */
.callout {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 34px;
}
.callout h2 { color: var(--gold); margin-bottom: 10px; }

.kv { margin: 0; }
.kv dt {
  font-weight: 600;
  color: var(--text);
  margin-top: 14px;
  font-size: 0.94rem;
}
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: 2px 0 0; color: rgba(240,237,230,0.86); }

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.footer {
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  font-size: 0.85rem;
}
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 600px) {
  main { padding: 40px 0 56px; }
  .toc { padding: 16px 18px; }
  .callout { padding: 18px 18px; }
}