/* =========================================================================
   RealTAG · Registration.Portal — legal pages (Terms of Service / Privacy)
   Self-contained: shares the brand tokens/palette but not the auth
   split-screen layout. A readable document layout for the public
   /terms.html and /privacy.html pages, whose copy mirrors the parent
   site (ileads.com/terms, ileads.com/privacy), section index included.
   ========================================================================= */

:root {
  --red: #BF311A;
  --red-dark: #a52915;
  --ink: #131920;
  --ink-soft: #555;
  --muted: #888;
  --canvas: #F9FAFB;
  --card: #fff;
  --border-soft: #e3e7eb;
  --radius-sm: 6px;
  --radius-card: 14px;
  /* Sizing tiers: phones/tablets, then 1024+, 1280+ and 1600+ (two-column; see below). */
  --page-max: 1200px;
  --index-w: 260px;
  --col-gap: 44px;
  --text-w: 720px;
  --body-size: 16px;
  --index-size: 13.5px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (min-width: 1280px) {
  :root {
    --page-max: 1360px;
    --index-w: 360px;
    --col-gap: 56px;
    --text-w: 780px;
    --body-size: 16.5px;
    --index-size: 14px;
  }
}
@media (min-width: 1600px) {
  :root {
    --page-max: 1560px;
    --index-w: 400px;
    --col-gap: 96px;
    --text-w: 800px;
    --body-size: 17px;
    --index-size: 14.5px;
  }
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

/* =========================================================================
   Top bar — just the logo, linking back to registration.
   ========================================================================= */
.legal-topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border-soft);
}
.legal-topbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px clamp(16px, 5vw, 32px);
}
.legal-topbar img { height: 34px; width: auto; display: block; }

/* =========================================================================
   Document — title band, then a card holding the section index and text.
   Phones/tablets: one column, index above the text.
   Wide screens: index in a sticky left column beside the text.
   ========================================================================= */
.legal-doc {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 5vw, 32px) 72px;
}

.legal-head { text-align: center; margin: 0 auto clamp(28px, 4vw, 40px); max-width: 760px; }
.legal-doc h1 {
  font: 800 clamp(30px, 4.4vw, 44px)/1.08 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.legal-doc .legal-subtitle {
  font: 400 17px/1.55 var(--font);
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.legal-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 40px);
  max-width: 760px;
  margin: 0 auto;
}

.legal-doc .legal-updated {
  font: 700 14px/1.5 var(--font-display);
  letter-spacing: .01em;
  color: var(--red);
  margin: 0;
}
/* "About RealTAG": RealTAG's own words, set apart from the mirrored iLeads copy.
   Neutral on purpose: a quiet aside, not a warning. */
.legal-note {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius-sm);
}
.legal-doc .legal-note p { margin: 0; color: var(--ink); }
.legal-doc .legal-note p.legal-note-title {
  font: 700 12px/1 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Visually hidden until focused, for keyboard users who want to skip the index. */
.legal-skip {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.legal-skip:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  display: inline-block;
  margin-top: 18px;
  font: 800 13px/1.4 var(--font-display);
  color: var(--red);
}

/* -------- Section index (the document menu) -------- */
.legal-index {
  margin: 28px 0 8px;
  padding: 18px 20px;
  background: var(--canvas);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.legal-doc .legal-index-title {
  font: 700 12px/1 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.legal-index ol { list-style: none; margin: 0; padding: 0; }
.legal-index li { margin: 0; }
.legal-doc .legal-index a {
  display: block;
  padding: 4px 0;
  font: 600 14.5px/1.45 var(--font);
  color: var(--ink-soft);
  text-decoration: none;
}
.legal-doc .legal-index a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc .legal-index a[aria-current] { color: var(--red); }

/* Two columns from 1024px. The text column keeps a readable measure (--text-w) and
   shrinks first when space is short; spare width is split evenly around the pair. */
@media (min-width: 1024px) {
  .legal-card {
    max-width: none;
    display: grid;
    grid-template-columns: var(--index-w) minmax(0, var(--text-w));
    column-gap: var(--col-gap);
    justify-content: center;
    align-items: start;
  }
  .legal-intro, .legal-body { grid-column: 2; }
  .legal-intro { grid-row: 1; }
  .legal-body { grid-row: 2; }

  .legal-index {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 0;
    padding: 0 8px 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-soft) transparent;
  }
  .legal-doc .legal-index a {
    font-size: var(--index-size);
    line-height: 1.4;
    padding: 5px 0 5px 14px;
    border-left: 2px solid var(--border-soft);
  }
  .legal-index a[aria-current] { border-left-color: var(--red); }
}
@media (min-width: 1280px) {
  .legal-card { padding: 52px 56px 56px; }
}

/* -------- Body text -------- */
.legal-body h2,
.legal-doc h2 {
  font: 800 calc(var(--body-size) + 4px)/1.35 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 40px 0 0;
  scroll-margin-top: 24px;
}
.legal-doc p,
.legal-doc li,
.legal-doc blockquote {
  font: 400 var(--body-size)/1.7 var(--font);
  color: var(--ink-soft);
}
.legal-intro p,
.legal-body p { margin: 14px 0 0; }
.legal-body ul,
.legal-body ol { margin: 14px 0 0; padding-left: 22px; }
.legal-body li { margin: 0 0 8px; }
.legal-body li::marker { color: var(--muted); }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-doc a { color: var(--red); font-weight: 600; text-decoration: none; }
.legal-doc a:hover { text-decoration: underline; }

/* Items carry their own "1." text, as on the parent site. */
.legal-body ol.legal-numbered { list-style: none; }

.legal-body blockquote {
  margin: 14px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--border-soft);
}

.legal-table-wrap { margin: 16px 0 0; overflow-x: auto; }
.legal-body table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font: 400 13.5px/1.45 var(--font);
  color: var(--ink-soft);
}
.legal-body th,
.legal-body td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.legal-body th { font-weight: 700; color: var(--ink); background: var(--canvas); }
.legal-body td:not(:first-child),
.legal-body th:not(:first-child) { text-align: right; white-space: nowrap; }

.legal-body p.legal-back {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
}

/* =========================================================================
   Footer — cross-links between the legal pages and back to sign-up.
   ========================================================================= */
.legal-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--card);
}
.legal-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px clamp(16px, 5vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font: 400 13.5px/1.5 var(--font);
  color: var(--muted);
}
.legal-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.legal-footer a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.legal-footer a:hover { color: var(--red); text-decoration: underline; }

/* =========================================================================
   Print — the document only, no chrome or index.
   ========================================================================= */
@media print {
  .legal-topbar, .legal-footer, .legal-index, .legal-skip, .legal-back { display: none !important; }
  body { background: #fff; }
  .legal-doc { padding: 0; max-width: none; }
  .legal-card { display: block; max-width: none; border: 0; border-radius: 0; padding: 0; }
  .legal-intro, .legal-body { max-width: none; }
  .legal-doc p, .legal-doc li, .legal-doc blockquote { font-size: 11pt; line-height: 1.45; orphans: 3; widows: 3; }
  .legal-body h2 { break-after: avoid-page; margin-top: 16pt; }
  .legal-body table { min-width: 0; break-inside: avoid-page; }
  .legal-table-wrap { overflow: visible; }
}