.legal-page {
  min-height: 100vh;
  background: #020b1b;
  color: var(--text);
  font-family: "Manrope", sans-serif;
}
.legal-page main {
  background:
    radial-gradient(circle at 85% 8%, rgba(109, 65, 202, 0.1), transparent 25%),
    radial-gradient(
      circle at 8% 42%,
      rgba(33, 157, 196, 0.055),
      transparent 27%
    );
}
.legal-hero {
  position: relative;
  padding: 170px 0 72px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.legal-hero::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -190px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(142, 82, 227, 0.19);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgba(69, 232, 245, 0.025);
  pointer-events: none;
}
.legal-kicker,
.legal-nav > span {
  display: block;
  margin-bottom: 18px;
  color: var(--cyan);
  font: 10px monospace;
  letter-spacing: 0.2em;
}
.legal-hero h1 {
  margin: 0;
  font-size: clamp(3.3rem, 6vw, 6.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.06em;
  animation: slideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.legal-hero p {
  margin: 24px 0 0;
  color: #abb8c9;
  font-size: 16px;
}
.legal-meta {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 11px 18px;
  padding: 23px;
  border: 1px solid var(--line);
  background: rgba(4, 18, 38, 0.58);
  animation: slideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.legal-meta span {
  color: #70839d;
  font: 9px monospace;
  letter-spacing: 0.12em;
}
.legal-meta strong {
  color: #dce4ee;
  font: 10px monospace;
  font-weight: 500;
}

.legal-layout {
  padding: 75px 0 110px;
}
.legal-nav {
  position: sticky;
  top: 112px;
  padding-right: 25px;
}
.legal-nav nav {
  border-top: 1px solid var(--line);
}
.legal-nav nav a {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  color: #9eacbf;
  font-size: 12px;
  text-decoration: none;
  transition:
    color 0.24s ease,
    padding 0.24s ease,
    background 0.24s ease;
}
.legal-nav nav a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(69, 232, 245, 0.7);
  transform: none;
  transition: height 0.24s ease;
}
.legal-nav nav a b {
  color: #536780;
  font: 9px monospace;
  font-weight: 400;
}
.legal-nav nav a:hover {
  padding-left: 10px;
  background: rgba(69, 232, 245, 0.035);
  color: var(--cyan);
}
.legal-nav nav a.active,
.legal-nav nav a[aria-current="location"] {
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(69, 232, 245, 0.09), transparent 75%);
  color: #eefcff;
}
.legal-nav nav a.active::before,
.legal-nav nav a[aria-current="location"]::before {
  height: 100%;
}
.legal-nav nav a.active b,
.legal-nav nav a[aria-current="location"] b {
  color: var(--cyan);
}
.legal-contact {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid rgba(73, 221, 180, 0.2);
  background: rgba(73, 221, 180, 0.025);
}
.legal-contact i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.legal-contact span {
  color: #71849c;
  font: 12px monospace;
  letter-spacing: 0.12em;
}
.legal-contact a {
  display: block;
  margin-top: 9px;
  color: #dce5ef;
  font-size: 12px;
  text-decoration: none;
}

.legal-document {
  max-width: 940px;
  border: 1px solid var(--line);
  background: linear-gradient(
    145deg,
    rgba(5, 20, 42, 0.75),
    rgba(2, 11, 25, 0.68)
  );
  animation: fadeInUp 0.75s ease backwards;
}
.legal-section {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: clamp(20px, 4vw, 50px);
  padding: clamp(35px, 5vw, 68px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.legal-section:last-child {
  border-bottom: 0;
}
.section-index {
  color: #52677f;
  font: 12px monospace;
  padding-top: 8px;
}
.legal-section h2 {
  margin: 0 0 22px;
  color: #f1f5fa;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.legal-section h3 {
  margin: 28px 0 9px;
  color: #d8e1ec;
  font-size: 16px;
  font-weight: 600;
}
.legal-section p,
.legal-section li {
  color: #aebaca;
  font-size: 14px;
  line-height: 1.8;
}
.legal-section .lead {
  max-width: 760px;
  color: #d0d8e3;
  font-size: 17px;
  line-height: 1.75;
}
.legal-section ul {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.legal-section li {
  position: relative;
  padding: 7px 0 7px 22px;
}
.legal-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(69, 232, 245, 0.55);
}
.responsibility-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 35px;
}
.responsibility-grid > div {
  padding: 21px;
  border: 1px solid var(--line);
  background: rgba(2, 12, 28, 0.58);
}
.responsibility-grid small,
.responsibility-grid strong,
.responsibility-grid span,
.responsibility-grid a {
  display: block;
}
.responsibility-grid small {
  margin-bottom: 9px;
  color: var(--cyan);
  font: 9px monospace;
  letter-spacing: 0.13em;
}
.responsibility-grid strong {
  color: #e7edf5;
  font-size: 14px;
  font-weight: 600;
}
.responsibility-grid span,
.responsibility-grid a {
  margin-top: 5px;
  color: #91a1b5;
  font-size: 12px;
  text-decoration: none;
}
.responsibility-grid a:hover {
  color: var(--cyan);
}
.data-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
}
.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 991.98px) {
  .legal-hero {
    padding-top: 135px;
  }
  .legal-nav {
    position: static;
    padding-right: 0;
  }
  .legal-nav nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .legal-contact {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .legal-hero {
    padding: 120px 0 55px;
  }
  .legal-hero h1 {
    font-size: 3rem;
  }
  .legal-meta {
    grid-template-columns: 1fr;
  }
  .legal-layout {
    padding: 45px 0 75px;
  }
  .legal-nav nav {
    grid-template-columns: 1fr;
  }
  .legal-section {
    grid-template-columns: 1fr;
    padding: 30px 21px;
    gap: 9px;
  }
  .section-index {
    padding-top: 0;
  }
  .responsibility-grid,
  .data-list {
    grid-template-columns: 1fr;
  }
  .legal-section p,
  .legal-section li {
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .legal-page *,
  .legal-page *::before,
  .legal-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

.legal-layout {
  border-top: 1px solid rgba(80, 119, 165, 0.22);
  background-image:
    radial-gradient(
      circle at 8% 16%,
      rgba(31, 137, 178, 0.045),
      transparent 24%
    ),
    radial-gradient(
      circle at 90% 48%,
      rgba(104, 60, 191, 0.04),
      transparent 25%
    );
}

/* Shared motion for policy and terms pages */
.legal-kicker {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}

.legal-hero p {
  animation: fadeInUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

.legal-hero::after {
  animation: legalHalo 8s ease-in-out infinite;
}

.legal-meta span,
.legal-meta strong {
  animation: legalMetaEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.legal-meta > :nth-child(1) { animation-delay: 0.2s; }
.legal-meta > :nth-child(2) { animation-delay: 0.25s; }
.legal-meta > :nth-child(3) { animation-delay: 0.3s; }
.legal-meta > :nth-child(4) { animation-delay: 0.35s; }

.legal-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.68s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    border-color 0.24s ease,
    background-color 0.24s ease;
}

.legal-nav.legal-reveal {
  transform: translateX(-24px);
}

.legal-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.legal-section.is-visible .section-index {
  animation: legalIndexGlow 0.8s ease 0.18s backwards;
}

.legal-section.is-visible li::before {
  animation: legalLineGrow 0.5s ease backwards;
}

.responsibility-grid > div {
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.responsibility-grid > div:hover {
  transform: translateY(-3px);
  border-color: rgba(69, 232, 245, 0.42);
  background: rgba(5, 25, 48, 0.72);
}

@keyframes legalMetaEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes legalHalo {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes legalIndexGlow {
  from { opacity: 0; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
  to { opacity: 1; color: #52677f; text-shadow: none; }
}

@keyframes legalLineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}