/* =========================================================
   The Readiness Forum — Legal pages (Privacy Policy, Terms)
   Builds on css/style.css (tokens, type scale, nav, footer).
   ========================================================= */

.legal-page { background: var(--white); color: var(--ink-900); }

/* ---------- Nav: single "Back to home" action ---------- */
.legal-navlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.2rem;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1;
  transition: background-color .3s var(--ease-hover), color .3s var(--ease-hover), border-color .3s var(--ease-hover);
}
.legal-navlink:hover { background: var(--white); color: var(--ink-900); border-color: var(--white); }
.nav.is-scrolled .legal-navlink { background: var(--ink); color: var(--white); border-color: var(--ink); }
.nav.is-scrolled .legal-navlink:hover { background: #000; }

/* ---------- Banner ---------- */
.legal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background:
    radial-gradient(120% 90% at 85% 100%, rgba(174, 217, 191, .95) 0%, rgba(174, 217, 191, 0) 55%),
    linear-gradient(115deg, var(--blue-deep) 0%, #4d70c8 45%, #7fae9f 78%, #a9d6c0 100%);
}

.legal-hero__inner {
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(2.5rem, 7vh, 4.5rem)) var(--gutter) clamp(2.5rem, 6vh, 4rem);
}

.legal-hero__kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}

.legal-hero__title {
  margin: .6rem 0 0;
  font-family: "K2D", var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.05;
  text-transform: uppercase;
}

.legal-hero__meta {
  margin: 1rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  opacity: .92;
}

/* ---------- Body layout ---------- */
.legal {
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--gutter) clamp(3.5rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* Table of contents */
.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  max-height: calc(100vh - var(--nav-h) - 3rem);
  overflow: auto;
}

.legal-toc__label {
  margin: 0 0 .9rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  border-left: 1px solid rgba(20, 30, 45, .12);
}

.legal-toc li { counter-increment: toc; }

.legal-toc a {
  display: block;
  padding: .4rem 0 .4rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--ink-600);
  transition: color .2s var(--ease-hover), border-color .2s var(--ease-hover);
}
.legal-toc a::before { content: counter(toc) ". "; color: var(--mark-blue); font-weight: 600; }
.legal-toc a:hover { color: var(--ink-900); border-left-color: var(--mark-blue); }

/* Content */
.legal-content { max-width: 68ch; }

.legal-intro {
  margin: 0 0 1.25rem;
  font-family: var(--font-ui);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-900);
}

.legal-section { scroll-margin-top: calc(var(--nav-h) + 1.25rem); }
.legal-section + .legal-section,
.legal-intro + .legal-section,
.legal-content > p + .legal-section {
  margin-top: clamp(2rem, 4vh, 2.75rem);
  padding-top: clamp(2rem, 4vh, 2.75rem);
  border-top: 1px solid rgba(20, 30, 45, .1);
}

.legal-content h2 {
  margin: 0 0 1rem;
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--ink-900);
}

.legal-content h3 {
  margin: 1.5rem 0 .5rem;
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h5);
  line-height: 1.3;
  color: var(--ink-900);
}

.legal-content p,
.legal-content li {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-600);
}

.legal-content p { margin: 0 0 1rem; }
.legal-content p:last-child { margin-bottom: 0; }

.legal-content ul,
.legal-content ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.legal-content li + li { margin-top: .4rem; }
.legal-content li::marker { color: var(--mark-blue); }

.legal-content strong { font-weight: 600; color: var(--ink-900); }

.legal-content a {
  color: var(--mark-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-content a:hover { text-decoration-thickness: 2px; }

/* Contact card */
.legal-contact {
  margin-top: 1rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: 14px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
}
.legal-contact p { margin: 0; }
.legal-contact p + p { margin-top: .35rem; }
.legal-contact + p { margin-top: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc {
    position: static;
    max-height: none;
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 14px;
    background: var(--chip-bg);
    border: 1px solid var(--chip-line);
  }
  .legal-toc ol { border-left: 0; columns: 2; column-gap: 1.5rem; }
  .legal-toc a { padding-left: 0; border-left: 0; }
}

@media (max-width: 520px) {
  .legal-toc ol { columns: 1; }
  .legal-hero__title { font-size: clamp(1.9rem, 9vw, 2.5rem); }
}