.legal-page-shell {
  --legal-accent: #1a4fd8;
  --legal-accent-strong: #1a4fd8;
  --legal-accent-soft: rgba(79, 140, 255, 0.14);
  --legal-accent-warm: #3b82f6;
  --legal-accent-fresh: #10b981;
  --legal-panel: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  --legal-border: color-mix(in srgb, var(--line-color) 82%, var(--legal-accent));
  display: grid;
  gap: 1rem;
  width: min(100%, 74rem);
  margin-inline: auto;
}

.legal-page-privacy {
  --legal-accent: #10b981;
  --legal-accent-strong: #10b981;
  --legal-accent-soft: rgba(36, 197, 139, 0.15);
  --legal-accent-warm: #1a4fd8;
  --legal-accent-fresh: #3b82f6;
}

.legal-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.15rem;
  border: 1px solid var(--legal-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--legal-accent-soft), transparent 44%),
    linear-gradient(160deg, color-mix(in srgb, var(--panel-bg-strong) 88%, transparent), var(--legal-panel));
  padding: clamp(1.15rem, 3vw, 1.75rem);
  box-shadow:
    0 22px 50px rgba(2, 6, 23, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.legal-hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--legal-accent), var(--legal-accent-warm), var(--legal-accent-fresh));
}

.legal-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.legal-hero-icon,
.legal-intro-icon,
.legal-section-mark,
.legal-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legal-hero-icon {
  width: clamp(3.5rem, 8vw, 4.6rem);
  height: clamp(3.5rem, 8vw, 4.6rem);
  border: 1px solid color-mix(in srgb, var(--legal-accent) 38%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--legal-accent) 22%, transparent), transparent),
    color-mix(in srgb, var(--panel-bg-strong) 82%, transparent);
  color: var(--legal-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.legal-hero-icon svg {
  width: 2.05rem;
  height: 2.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-eyebrow {
  margin: 0 0 0.42rem;
  color: color-mix(in srgb, var(--legal-accent) 72%, var(--text-muted));
  font-size: 0.82rem;
  font-weight: 850;
}

.legal-hero h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.75rem, 4vw, 2.85rem);
  line-height: 1.32;
}

.legal-hero-lead {
  margin: 0.52rem 0 0;
  max-width: 44rem;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 2;
}

.legal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.legal-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--legal-accent) 22%, var(--line-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--legal-accent) 9%, transparent);
  color: var(--text-muted);
  padding: 0.45rem 0.78rem;
  font-size: 0.8rem;
  font-weight: 750;
}

.legal-meta-chip svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--legal-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--legal-accent-warm) 10%, transparent), transparent 38%),
    var(--legal-panel);
  padding: clamp(1rem, 2.4vw, 1.35rem);
}

.legal-intro-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--legal-accent-warm) 14%, transparent);
  color: var(--legal-accent-warm);
}

.legal-intro-icon svg {
  width: 1.28rem;
  height: 1.28rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-intro-copy {
  display: grid;
  gap: 0.72rem;
}

.legal-intro p,
.legal-section p {
  margin: 0;
  color: var(--text-muted);
  line-height: 2;
}

.legal-document-grid {
  display: grid;
  grid-template-columns: minmax(13rem, 0.3fr) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.legal-index-panel {
  position: sticky;
  top: 5.75rem;
  display: grid;
  gap: 0.78rem;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background: var(--legal-panel);
  padding: 1rem;
}

.legal-index-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 850;
}

.legal-index-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 8px;
  background: var(--legal-accent-soft);
  color: var(--legal-accent);
}

.legal-index-title svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-index-list {
  display: grid;
  gap: 0.35rem;
}

.legal-index-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.52rem;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  padding: 0.48rem 0.55rem;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.legal-index-link:hover,
.legal-index-link:focus-visible {
  border-color: color-mix(in srgb, var(--legal-accent) 24%, transparent);
  background: var(--legal-accent-soft);
  color: var(--text-primary);
}

.legal-index-link em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--legal-accent) 12%, transparent);
  color: var(--legal-accent);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.legal-index-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
}

.legal-section-list {
  display: grid;
  gap: 0.85rem;
}

.legal-section {
  scroll-margin-top: 6.5rem;
  display: grid;
  gap: 0.72rem;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background:
    linear-gradient(130deg, color-mix(in srgb, var(--legal-accent) 7%, transparent), transparent 44%),
    var(--legal-panel);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.09);
}

.legal-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
}

.legal-section-mark {
  width: 2.18rem;
  height: 2.18rem;
  border: 1px solid color-mix(in srgb, var(--legal-accent) 28%, transparent);
  border-radius: 8px;
  background: var(--legal-accent-soft);
  color: var(--legal-accent);
  font-weight: 900;
  line-height: 1;
}

.legal-section h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.65;
}

.legal-section ul {
  display: grid;
  gap: 0.52rem;
  margin: 0.18rem 0 0;
  padding: 0;
  list-style: none;
}

.legal-section li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.56rem;
  color: var(--text-muted);
  line-height: 1.9;
}

.legal-item-icon {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.27rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--legal-accent-fresh) 14%, transparent);
  color: var(--legal-accent-fresh);
}

.legal-item-icon svg {
  width: 0.78rem;
  height: 0.78rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme="light"] .legal-hero,
:root[data-theme="light"] .legal-intro,
:root[data-theme="light"] .legal-index-panel,
:root[data-theme="light"] .legal-section {
  box-shadow: 0 18px 38px rgba(16, 32, 58, 0.08);
}

@media (max-width: 900px) {
  .legal-document-grid {
    grid-template-columns: 1fr;
  }

  .legal-index-panel {
    position: static;
  }

  .legal-index-list {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.12rem;
  }

  .legal-index-link {
    min-width: 12rem;
  }
}

@media (max-width: 640px) {
  .legal-hero-main,
  .legal-intro,
  .legal-section-head {
    grid-template-columns: 1fr;
  }

  .legal-hero-icon,
  .legal-intro-icon,
  .legal-section-mark {
    justify-self: start;
  }
}