/* ============================================================================
   LEGAL.CSS — Spearn Privacy Policy & Terms of Service pages
   Layers on top of home.css (tokens, wordmark, footer). Adds a clean, readable
   legal-document layout and turns the fixed hero nav into a simple sticky bar.
   ========================================================================== */

/* The homepage nav is fixed & transparent (it floats over the hero video). On a
   plain document there's no hero, so make it a sticky, self-contained bar with a
   warm translucent backdrop that stays legible over the scrolling text. */
.nav {
  position: sticky;
  background: rgba(244, 239, 229, 0.86);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.legal {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(20px, 5vw, 40px) clamp(60px, 9vw, 100px);
}

/* — Header block — */
.legal-head { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.legal-kicker {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}
.legal-title {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink); margin: 0.42em 0 0.34em;
}
.legal-updated { font-family: var(--sans); font-size: 0.86rem; color: var(--ink-dim); }

/* — "This is a general template" callout — */
.legal-note {
  margin-top: 26px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; background: var(--panel);
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.62; color: var(--ink-dim);
}
.legal-note strong { color: var(--ink); font-weight: 600; }

/* — Sections — */
.legal section { margin-top: clamp(30px, 5vw, 44px); }
.legal h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--head); font-weight: 700;
  font-size: clamp(1.16rem, 2.6vw, 1.4rem); letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 12px;
}
.legal h2 .s-n {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent-soft); transform: translateY(-0.15em);
}
.legal p, .legal li {
  font-family: var(--sans); font-size: 1rem; line-height: 1.72; color: var(--ink-dim);
}
.legal p + p { margin-top: 14px; }
.legal ul { margin: 12px 0 0; padding-left: 20px; }
.legal li { margin-top: 9px; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a {
  color: var(--accent-soft); font-weight: 600;
  border-bottom: 1px solid rgba(124, 94, 16, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.legal a:hover { color: var(--accent); border-color: var(--accent); }

/* — Small "back home" affordance under the article — */
.legal-back {
  margin-top: clamp(40px, 6vw, 60px); padding-top: 26px; border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.9rem;
}
.legal-back a { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 820px) {
  .nav { padding: 14px 20px; }
}