/* Shared styles for the long-form legal pages (terms.html, privacy.html).
   Reuses the design tokens declared in styles.css (colors, fonts, radii,
   spacing) so the legal pages feel like the same calm, dark product as the
   landing page. Keep this file additive: it must not override the landing. */

.legal-shell {
  position: relative;
  overflow: hidden;
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 1.5rem 0 0;
}

.legal-back {
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color var(--transition);
}

.legal-back:hover,
.legal-back:focus-visible {
  color: var(--text-primary);
}

.legal-main {
  position: relative;
  z-index: 1;
  padding: var(--space-5) 0 var(--space-6);
}

.legal-doc {
  width: min(calc(100% - 2rem), 760px);
  margin: 0 auto;
}

.legal-kicker {
  margin: 0 0 0.75rem;
  color: var(--brand-warm);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal-doc h1 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}

.legal-updated {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.legal-intro {
  margin: 1.75rem 0 0;
  line-height: 1.75;
  font-size: 1.05rem;
}

.legal-note {
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--surface-outline);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.legal-section {
  margin-top: var(--space-4);
}

.legal-section h2 {
  margin: 0 0 0.85rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
}

.legal-section h3 {
  margin: 1.5rem 0 0.6rem;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
}

.legal-section p,
.legal-section li {
  line-height: 1.75;
  font-size: 1.02rem;
  color: var(--text-secondary);
}

.legal-section p {
  margin: 0 0 1rem;
}

.legal-section ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal-section li {
  margin-bottom: 0.5rem;
}

.legal-section li::marker {
  color: var(--brand-primary);
}

.legal-section a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--text-primary);
}

.legal-section strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Placeholder tokens for company details still to be filled in. Rendered with
   a subtle highlight so unfilled values are obvious during review. */
.legal-fill {
  color: var(--brand-warm);
  font-style: normal;
  border-bottom: 1px dashed rgba(219, 203, 163, 0.5);
}

.legal-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--surface-outline);
}

.legal-crosslinks a {
  color: var(--text-primary);
  border: 1px solid var(--surface-outline);
  background: var(--surface-soft);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  transition: border-color var(--transition), background-color var(--transition);
}

.legal-crosslinks a:hover,
.legal-crosslinks a:focus-visible {
  border-color: rgba(141, 184, 212, 0.45);
}

.legal-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 0 2.4rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .legal-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .legal-intro,
  .legal-section p,
  .legal-section li {
    font-size: 1rem;
  }
}