/* =============================================================================
   Pep Research -- legal pages (terms.html), on the V3 design: a quiet
   header and a readable document. An "On this page" index sits beside the
   document on wide screens. The legal text is unchanged; only its setting is.
   Navy foundation, one glass panel, compact technical type, the locked palette.
   ============================================================================= */

/* ---- header: the neural scene, quietly ---- */
.v3-legal-hero { padding-bottom: 48px; }
.v3-legal-updated { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-on-dark-soft); }

/* ---- the index and the document ---- */
.v3-legal-sec { padding: 40px 0 96px; }
.v3-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.v3-legal-toc { position: sticky; top: calc(var(--v3-header-h) + 24px); display: flex; flex-direction: column; gap: 12px; }
.v3-legal-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--v3-line-dark); }
.v3-legal-toc a {
  display: flex;
  gap: 10px;
  padding: 6px 12px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13px;
  line-height: 18px;
  color: var(--v3-on-dark-muted);
  text-decoration: none;
  transition: color 300ms var(--v3-ease-out), border-color 300ms var(--v3-ease-out);
}
.v3-legal-toc a span { min-width: 16px; font-variant-numeric: tabular-nums; color: var(--v3-on-dark-soft); }
.v3-legal-toc a:hover { color: var(--v3-on-dark); border-left-color: var(--pv-periwinkle); }
.v3-legal-toc a:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 2px; }

.v3-legal-doc {
  max-width: 760px;
  padding: 8px 36px;
  border-radius: var(--v3-radius-card);
  background: var(--v3-glass-card);
  border: 1px solid var(--v3-card-line);
}
.v3-legal-item { padding: 26px 0; border-top: 1px solid var(--v3-line-dark); scroll-margin-top: calc(var(--v3-header-h) + 24px); }
.v3-legal-item:first-child { border-top: 0; }
.v3-legal-item h2 { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--v3-on-dark); }
.v3-legal-num { margin-right: 4px; font-variant-numeric: tabular-nums; color: var(--pv-periwinkle); }
.v3-legal-item p { margin-top: 10px; font-size: 15px; line-height: 26px; color: var(--v3-on-dark-muted); }
.v3-legal-item a { color: var(--pv-lavender); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 22, 64, 0.2); }
.v3-legal-item a:hover { color: var(--v3-on-dark); }
/* inside a section: sub-headings, lists and the contact address */
.v3-legal-sub { margin-top: 22px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-lavender); }
.v3-legal-sub + p { margin-top: 6px; }
.v3-legal-list { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.v3-legal-list li { list-style: disc; font-size: 15px; line-height: 25px; color: var(--v3-on-dark-muted); }
.v3-legal-list li::marker { color: var(--pv-periwinkle); }
.v3-legal-address { margin-top: 10px; font-style: normal; font-size: 15px; line-height: 25px; color: var(--v3-on-dark-muted); }

/* ---- responsive ---- */
@media (max-width: 1023px) {
  .v3-legal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .v3-legal-toc { position: static; }
  .v3-legal-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; border-left: 0; }
  .v3-legal-toc a { margin-left: 0; padding-left: 0; border-left: 0; }
  .v3-legal-doc { max-width: none; }
}
@media (max-width: 639px) {
  .v3-legal-sec { padding: 28px 0 72px; }
  .v3-legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .v3-legal-doc { padding: 4px 20px; }
  .v3-legal-item { padding: 22px 0; }
  .v3-legal-item p, .v3-legal-list li, .v3-legal-address { font-size: 14.5px; line-height: 25px; }
}

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