/* =====================================================================
   ICVFXTOOLS - LEGAL PAGE LAYOUT
   Shared by terms / privacy / refund / contact pages.
   Pair with tokens.css and components.css.
   ===================================================================== */

.legal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--c-line);
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: var(--z-raised);
}
.legal-topbar .nav { display: flex; gap: var(--s-5); }
.legal-topbar .nav a {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--c-text-dim); text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.legal-topbar .nav a:hover { color: var(--c-primary); }

.legal-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6) var(--s-9);
}

.legal-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-primary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.legal-shell h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  letter-spacing: var(--tracking-display);
  color: var(--c-text);
  margin: 0 0 var(--s-3);
  line-height: var(--leading-tight);
}

.legal-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.legal-meta strong { color: var(--c-text-muted); }

.legal-lede {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  color: var(--c-text-dim);
  margin: 0 0 var(--s-6);
  line-height: var(--leading-normal);
}

.legal-toc {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-7);
}
.legal-toc h2 {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--s-3);
}
.legal-toc ol {
  margin: 0; padding-left: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-dim);
  line-height: var(--leading-loose);
}
.legal-toc ol a { color: var(--c-text-muted); text-decoration: none; }
.legal-toc ol a:hover { color: var(--c-primary); text-decoration: underline; }

.legal-shell section {
  margin-bottom: var(--s-7);
  scroll-margin-top: 80px;
}

.legal-shell h2 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  letter-spacing: var(--tracking-display);
}
.legal-shell h2 .num {
  color: var(--c-primary);
  margin-right: var(--s-2);
  font-weight: 700;
}

.legal-shell h3 {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--c-text);
  margin: var(--s-5) 0 var(--s-3);
  letter-spacing: var(--tracking-display);
}

.legal-shell p,
.legal-shell li {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  color: var(--c-text-muted);
  line-height: var(--leading-normal);
}

.legal-shell p { margin: 0 0 var(--s-3); }

.legal-shell ul,
.legal-shell ol {
  margin: 0 0 var(--s-4);
  padding-left: var(--s-5);
}
.legal-shell ul li,
.legal-shell ol li { margin-bottom: var(--s-2); }

.legal-shell ul li::marker { color: var(--c-primary); }
.legal-shell ol li::marker { color: var(--c-text-dim); }

.legal-shell strong { color: var(--c-text); font-weight: 600; }
.legal-shell em     { color: var(--c-text-muted); font-style: normal; text-decoration: underline; text-decoration-color: var(--c-line-strong); }

.legal-shell a {
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-glow-soft);
}
.legal-shell a:hover { color: #ff5683; }

/* Tinted call-outs */
.callout {
  display: block;
  background: var(--c-bg-1);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-dim);
  line-height: var(--leading-normal);
}
.callout strong { color: var(--c-text); }
.callout p { margin: 0 0 var(--s-3) 0; }
.callout p:last-child { margin-bottom: 0; }

.callout-warn {
  border-left-color: var(--c-warn);
}
.callout-warn strong { color: var(--c-warn); }

/* Definition list */
.dl {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
.dl dt {
  color: var(--c-text);
  font-weight: 600;
}
.dl dd {
  color: var(--c-text-dim);
  margin: 0;
  line-height: var(--leading-normal);
}
@media (max-width: 600px) {
  .dl { grid-template-columns: 1fr; gap: var(--s-1) 0; }
  .dl dt { margin-top: var(--s-3); }
}

/* Contact card grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
.contact-card {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-primary);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.contact-card .role {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--s-1);
}
.contact-card .email {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  color: var(--c-text);
  margin-bottom: var(--s-1);
}
.contact-card .desc {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-text-dim);
  line-height: var(--leading-normal);
}

.legal-footer {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-text-faint);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}
.legal-footer a { color: inherit; margin: 0 var(--s-2); }
.legal-footer a:hover { color: var(--c-primary); }