/* ============================================================
   legal-page.css — Legal documents (terms, privacy, refund, cookies, disclaimer, legal hub)
   Restyles existing .main, .toc, .highlight, .meta, .legal-list classes
   for our dark design system. Loads alongside product-page.css.
   ============================================================ */

/* Strip legacy navy header — we use pp-header */
body > header:not(.pp-header) {
  display: none !important;
}

/* Main content column */
.main {
  position: relative; z-index: 2;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 40px clamp(16px, 4vw, 32px) 80px !important;
}

/* Page title */
.main h1 {
  font-size: clamp(32px, 5vw, 48px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  color: var(--fg-0) !important;
  margin-bottom: 10px !important;
}
.main h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--primary-glow);
}

/* Effective-date / metadata line */
.meta {
  font-family: var(--font-mono);
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--fg-2) !important;
  margin-bottom: 36px !important;
}

/* Section H2 — orange accent line above */
.main h2 {
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--fg-0) !important;
  margin: 40px 0 14px !important;
  padding-top: 22px !important;
  padding-bottom: 0 !important;
  border-top: 0.5px solid var(--border) !important;
  position: relative;
  line-height: 1.15;
}
.main h2::before {
  content: "";
  position: absolute;
  top: -0.5px; left: 0;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-glow) 100%);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent);
  border-radius: 1px;
}

/* Sub-section H3 */
.main h3 {
  font-size: 16.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--fg-0) !important;
  margin: 24px 0 10px !important;
}

/* Body text */
.main p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-1) !important;
  margin-bottom: 14px !important;
}
.main p strong { color: var(--fg-0); font-weight: 500; }
.main a { color: var(--primary-glow); border-bottom: 0.5px dashed color-mix(in oklab, var(--primary) 50%, transparent); }
.main a:hover { color: var(--primary); text-decoration: none; }

/* Body lists */
.main ul, .main ol {
  margin-bottom: 16px !important;
  padding-left: 0 !important;
  list-style: none !important;
}
.main ul li, .main ol li {
  position: relative;
  padding: 8px 0 8px 28px !important;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--fg-1);
  margin-bottom: 0 !important;
  border-bottom: 0.5px solid var(--border);
}
.main ul li:last-child, .main ol li:last-child { border-bottom: none; }
.main ul li::before {
  content: "→";
  position: absolute;
  left: 4px; top: 8px;
  color: var(--primary-glow);
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.7;
}
.main ol {
  counter-reset: legal-counter;
}
.main ol li {
  padding-left: 38px !important;
  counter-increment: legal-counter;
}
.main ol li::before {
  content: counter(legal-counter, decimal-leading-zero);
  position: absolute;
  left: 0; top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--primary-glow);
}
.main li strong { color: var(--fg-0); font-weight: 500; }

/* Nested lists inside .toc keep their decimal counter */
.toc ol li { padding-left: 26px !important; }
.toc ol li::before {
  font-size: 10.5px;
  color: var(--fg-2);
}
.toc ol li:hover::before { color: var(--primary-glow); }

/* TOC card */
.toc {
  background: var(--surface) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin-bottom: 40px !important;
}
.toc-title {
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--fg-2) !important;
  margin-bottom: 14px !important;
  display: flex; align-items: center; gap: 8px;
}
.toc-title::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
.toc ol {
  padding: 0 !important;
  margin: 0 !important;
}
.toc li {
  padding: 8px 0 8px 26px !important;
  border-bottom: 0.5px solid var(--border);
  font-size: 13.5px !important;
  margin-bottom: 0 !important;
}
.toc li:last-child { border-bottom: none; }
.toc a {
  color: var(--fg-1) !important;
  border-bottom: none !important;
  transition: color 160ms;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.toc a:hover { color: var(--primary-glow) !important; text-decoration: none; }

/* Highlight callouts (orange warning) */
.highlight {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 12%, var(--surface)),
    var(--surface)) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  color: var(--fg-1);
}
.highlight p, .highlight strong { color: var(--fg-0); }
.highlight p { margin-bottom: 10px !important; font-size: 14.5px; line-height: 1.65; }
.highlight p:last-child { margin-bottom: 0 !important; }
.highlight ul { margin-bottom: 0 !important; }
.highlight ul li { color: var(--fg-1); }

/* Red/danger variant — used in disclaimers/warranties */
.highlight[style*="#fce4ec"], .highlight.danger {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--red) 12%, var(--surface)),
    var(--surface)) !important;
  border-left-color: var(--red) !important;
}
.highlight[style*="#fce4ec"] p,
.highlight[style*="#fce4ec"] strong,
.highlight[style*="#fce4ec"] ul li {
  color: var(--fg-0) !important;
}
.highlight[style*="#fce4ec"] p:not(:last-child),
.highlight[style*="#fce4ec"] ul li {
  color: var(--fg-1) !important;
}

/* Uppercase legal blocks */
.caps {
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: var(--fg-0);
}

/* Legal hub list */
.legal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  border-top: 0.5px solid var(--border);
}
.legal-list li {
  border-bottom: 0.5px solid var(--border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.legal-list li::before { display: none !important; }
.legal-list li:first-child { border-top: none !important; }
.legal-list a {
  display: block !important;
  padding: 22px 4px !important;
  text-decoration: none !important;
  color: var(--fg-0) !important;
  border-bottom: none !important;
  transition: color 160ms, transform 160ms, padding-left 160ms;
  position: relative;
}
.legal-list a::after {
  content: "→";
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  color: var(--fg-3);
  transition: color 160ms, transform 160ms;
}
.legal-list a:hover {
  color: var(--primary-glow) !important;
  padding-left: 8px !important;
  text-decoration: none;
}
.legal-list a:hover::after {
  color: var(--primary-glow);
  transform: translateY(-50%) translateX(4px);
}
.legal-list strong {
  display: block !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--fg-0) !important;
  margin-bottom: 6px !important;
}
.legal-list a:hover strong { color: var(--primary-glow) !important; }
.legal-list span {
  font-size: 13.5px !important;
  color: var(--fg-2) !important;
  line-height: 1.5;
}

/* Contact box at end of legal hub */
.contact {
  margin-top: 40px !important;
  padding-top: 24px !important;
  border-top: 0.5px solid var(--border) !important;
}
.contact p {
  font-size: 14px;
  line-height: 1.6;
}
.contact a { color: var(--primary-glow); }

/* Hide leftover stylesheet decorations from source */
.legal-nav { display: none !important; }


/* Refund page closing meta note */
.refund-meta-note {
  margin-top: 28px !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em;
  color: var(--fg-3) !important;
  border-top: 0.5px solid var(--border);
  padding-top: 16px !important;
}