:root {
  --legal-ink: #071827;
  --legal-copy: #3f556a;
  --legal-muted: #6c7e90;
  --legal-line: #dce6ed;
  --legal-green: #11bfa0;
  --legal-blue: #159fd8;
  --legal-soft: #f4f8fa;
}

.legal-page { margin: 0; color: var(--legal-ink); background: var(--legal-soft); }
.legal-main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 44px 0 70px; }
.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 28px;
  align-items: end;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 8px;
  color: #fff;
  background: #071827;
  box-shadow: 0 22px 55px rgba(7, 24, 39, .13);
}
.legal-eyebrow { margin: 0; color: #53e5cb; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.legal-hero h1 { max-width: 760px; margin: 9px 0 0; color: #fff; font-size: 3.4rem; line-height: 1.02; }
.legal-hero p { max-width: 720px; margin: 14px 0 0; color: #b5c8d5; line-height: 1.65; }
.legal-hero aside { padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.055); }
.legal-hero aside span, .legal-hero aside strong, .legal-hero aside small { display: block; }
.legal-hero aside span { color: #8fa7b8; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.legal-hero aside strong { margin-top: 8px; color: #fff; font-size: 1rem; }
.legal-hero aside small { margin-top: 6px; color: #9fb4c3; font-size: .7rem; line-height: 1.5; }

.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.legal-nav { position: sticky; top: 110px; padding: 16px; border: 1px solid var(--legal-line); border-radius: 8px; background: #fff; }
.legal-nav strong { display: block; margin-bottom: 10px; font-size: .72rem; }
.legal-nav a { display: block; min-height: 44px; padding: 12px 10px; border-radius: 6px; color: #486076; font-size: .68rem; font-weight: 800; text-decoration: none; }
.legal-nav a:hover { color: #087b6b; background: #effbf8; }
.legal-document { padding: clamp(20px, 4vw, 40px); border: 1px solid var(--legal-line); border-radius: 8px; background: #fff; box-shadow: 0 16px 38px rgba(7, 24, 39, .055); }
.legal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
.legal-summary article { padding: 14px; border-left: 3px solid var(--legal-green); background: #f4fbf9; }
.legal-summary article:nth-child(2) { border-color: var(--legal-blue); background: #f3f9fc; }
.legal-summary article:nth-child(3) { border-color: #e4b631; background: #fffaf0; }
.legal-summary strong, .legal-summary span { display: block; }
.legal-summary strong { font-size: .74rem; }
.legal-summary span { margin-top: 5px; color: var(--legal-muted); font-size: .64rem; line-height: 1.45; }
.legal-section { padding: 24px 0; scroll-margin-top: 110px; }
.legal-section + .legal-section { border-top: 1px solid #e7edf1; }
.legal-section h2 { margin: 0; color: var(--legal-ink); font-size: 1.18rem; }
.legal-section h3 { margin: 20px 0 0; font-size: .85rem; }
.legal-section p, .legal-section li { color: var(--legal-copy); font-size: .78rem; line-height: 1.72; }
.legal-section p { margin: 10px 0 0; }
.legal-section ul { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 20px; }
.legal-contact { margin-top: 24px; padding: 18px; border: 1px solid rgba(17,191,160,.27); border-radius: 8px; background: #effbf8; }
.legal-contact strong, .legal-contact span { display: block; }
.legal-contact span { margin-top: 5px; color: var(--legal-copy); font-size: .72rem; line-height: 1.5; }
.legal-contact a { display: inline-flex; min-height: 42px; align-items: center; margin-top: 12px; padding: 0 16px; border-radius: 6px; color: #fff; background: #087b6b; font-size: .72rem; font-weight: 900; text-decoration: none; }

@media (max-width: 800px) {
  .legal-main { width: min(100% - 1rem, 680px); padding-top: 18px; }
  .legal-hero, .legal-layout { grid-template-columns: 1fr; }
  .legal-hero h1 { font-size: 2.6rem; }
  .legal-nav { position: static; display: flex; gap: 5px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .legal-nav::-webkit-scrollbar { display: none; }
  .legal-nav strong { display: none; }
  .legal-nav a { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 560px) {
  .legal-hero { padding: 22px 18px; }
  .legal-hero h1 { font-size: 2.05rem; }
  .legal-summary { grid-template-columns: 1fr; }
  .legal-document { padding: 18px; }
}