/*
 * Local legal-page shell. Policy text comes from current WithViv main;
 * this file styles navigation and a clearly separate preview-only notice.
 */

.legal-page {
  --legal-paper: #FDF8F5;
  --legal-ink: #5D4037;
  --legal-coral: #C4756B;
  --legal-sage: #C9D8C5;
  --legal-sand: #F5E6D3;
  --legal-charcoal: #2C2C2C;
  --legal-line: rgba(93, 64, 55, .2);
  padding-block: clamp(42px, 7vw, 92px) clamp(70px, 11vw, 150px);
}

.local-preview-notice {
  display: grid;
  grid-template-columns: minmax(145px, .27fr) minmax(0, 1fr);
  gap: 18px 30px;
  max-width: 920px;
  margin: 0 0 clamp(46px, 7vw, 88px);
  padding: 20px 23px;
  border: 1px solid var(--legal-line);
  border-left: 4px solid var(--legal-coral);
  background: color-mix(in srgb, var(--legal-sage) 58%, var(--legal-paper));
}

.local-preview-notice p {
  margin: 0;
  color: var(--legal-ink);
  font-size: 13px;
  line-height: 1.58;
}

.legal-kicker {
  margin: 0;
  color: var(--legal-coral);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.38;
  text-transform: uppercase;
}

.legal-page__header {
  max-width: 830px;
  padding-bottom: clamp(35px, 5vw, 65px);
  border-bottom: 1px solid var(--legal-line);
}

.legal-page__header h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--legal-charcoal);
  font-family: Playfair, Georgia, serif;
  font-size: clamp(52px, 7vw, 98px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .96;
}

.legal-page__header p {
  max-width: 61ch;
  margin: 25px 0 0;
  color: var(--legal-ink);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
}

.legal-page__layout {
  display: grid;
  grid-template-columns: minmax(190px, .32fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 130px);
  align-items: start;
  max-width: 1110px;
  margin-top: clamp(38px, 6vw, 76px);
}

.legal-toc {
  position: sticky;
  top: 24px;
  padding: 2px 0 4px;
}

.legal-toc > .legal-kicker {
  margin-bottom: 13px;
}

.legal-toc > div {
  display: grid;
  border-top: 1px solid var(--legal-line);
}

.legal-toc a {
  display: block;
  min-height: 43px;
  padding: 11px 0;
  border-bottom: 1px solid var(--legal-line);
  color: var(--legal-ink);
  font-size: 12px;
  line-height: 1.34;
  text-decoration: none;
  transition: color 160ms ease, padding-left 160ms ease;
}

.legal-toc a:hover {
  padding-left: 7px;
  color: var(--legal-coral);
}

.legal-document {
  min-width: 0;
  color: var(--legal-charcoal);
}

.legal-document__section {
  padding: 0 0 clamp(33px, 5vw, 58px);
  scroll-margin-top: 30px;
}

.legal-document__section + .legal-document__section {
  padding-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--legal-line);
}

.legal-document h2,
.legal-document h3 {
  margin: 0;
  color: var(--legal-ink);
  font-family: Outfit, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.legal-document h2 {
  max-width: 28ch;
  font-size: clamp(28px, 3vw, 42px);
}

.legal-document h3 {
  margin-top: 29px;
  color: var(--legal-coral);
  font-size: clamp(20px, 2.2vw, 28px);
}

.legal-document p,
.legal-document li {
  max-width: 72ch;
  color: var(--legal-charcoal);
  font-size: 16px;
  line-height: 1.72;
}

.legal-document h2 + p,
.legal-document h2 + ul,
.legal-document h2 + ol,
.legal-document h3 + p,
.legal-document h3 + ul,
.legal-document h3 + ol {
  margin-top: 17px;
}

.legal-document p + p {
  margin-top: 17px;
}

.legal-document ul,
.legal-document ol {
  display: grid;
  gap: 10px;
  max-width: 75ch;
  margin: 19px 0 0;
  padding-left: 24px;
}

.legal-document li::marker {
  color: var(--legal-coral);
  font-weight: 700;
}

.legal-document a {
  color: var(--legal-ink);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--legal-coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.legal-document__section--level-3 {
  padding: 0;
  border: 0;
}

.legal-document__section--level-3 + .legal-document__section--level-3 {
  padding-top: 0;
  border-top: 0;
}

.legal-document__updated {
  max-width: none !important;
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--legal-line);
  color: var(--legal-ink) !important;
  font-size: 12px !important;
  font-weight: 650;
  letter-spacing: .01em;
}

@media (max-width: 760px) {
  .legal-page {
    padding-block: 32px 70px;
  }

  .local-preview-notice {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 44px;
    padding: 17px;
  }

  .local-preview-notice p {
    font-size: 12px;
  }

  .legal-page__header {
    padding-bottom: 33px;
  }

  .legal-page__header h1 {
    font-size: clamp(48px, 13vw, 68px);
  }

  .legal-page__header p {
    margin-top: 19px;
    font-size: 16px;
  }

  .legal-page__layout {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 31px;
  }

  .legal-toc {
    position: static;
    overflow: hidden;
  }

  .legal-toc > div {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--legal-line);
    scrollbar-width: thin;
  }

  .legal-toc a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 15px;
    border-top: 1px solid var(--legal-line);
    border-right: 1px solid var(--legal-line);
    border-bottom: 0;
    white-space: nowrap;
  }

  .legal-toc a:first-child {
    border-left: 1px solid var(--legal-line);
  }

  .legal-toc a:hover {
    padding-left: 15px;
  }

  .legal-document__section {
    padding-bottom: 33px;
    scroll-margin-top: 15px;
  }

  .legal-document__section + .legal-document__section {
    padding-top: 32px;
  }

  .legal-document h2 {
    font-size: 29px;
  }

  .legal-document h3 {
    margin-top: 24px;
    font-size: 22px;
  }

  .legal-document p,
  .legal-document li {
    font-size: 15px;
    line-height: 1.68;
  }

  .legal-document ul,
  .legal-document ol {
    gap: 9px;
    padding-left: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-toc a {
    transition: none;
  }
}

.legal-preview h1,.legal-preview h2,.legal-preview h3,.legal-page h1,.legal-page h2,.legal-page h3{font-family:Outfit,Arial,sans-serif;color:var(--cocoa)}