/* Shared styling for legal content pages */
.legal-hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.85);
}

body.articles-page {
  background:
    radial-gradient(circle at 18% 18%, rgba(110, 84, 255, 0.26), transparent 58%),
    radial-gradient(circle at 82% 8%, rgba(236, 72, 153, 0.18), transparent 52%),
    linear-gradient(135deg, #140b29 0%, #0d071e 45%, #080312 100%);
  color: #ede9ff;
}

body.articles-page .legal-hero-tag {
  background: rgba(129, 140, 248, 0.18);
  border-color: rgba(129, 140, 248, 0.35);
  color: rgba(226, 232, 255, 0.9);
}

body.articles-page .policy-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 20px 55px -32px rgba(12, 10, 35, 0.65);
}

body.articles-page .policy-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow:
    0 32px 70px -32px rgba(17, 12, 48, 0.6),
    0 24px 68px -34px rgba(99, 102, 241, 0.45),
    0 0 10px rgba(167, 139, 250, 0.32);
}

.policy-card {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(172, 148, 255, 0.28);
  background: linear-gradient(150deg, rgb(36 25 57), rgb(79 33 151), rgb(25 12 41));
  padding: 2.5rem;
  overflow: hidden;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 18px 42px -28px rgba(15, 23, 42, 0.55);
}

.policy-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 4%, rgba(186, 172, 255, 0.45), transparent 55%),
    radial-gradient(circle at 85% 18%, rgba(251, 191, 36, 0.22), transparent 48%),
    linear-gradient(165deg, rgba(41, 24, 95, 0.4), transparent 60%);
  opacity: 0.72;
  pointer-events: none;
}

.policy-card > * {
  position: relative;
  z-index: 1;
}

.policy-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.9), rgba(99, 102, 241, 0.9));
  box-shadow: 0 10px 25px -12px rgba(124, 58, 237, 0.8);
}

.legal-prose {
  color: rgb(226, 232, 240);
}

.legal-prose h3 {
  color: #fff;
}

.legal-prose a {
  color: #fcd34d;
}

.legal-prose a:hover {
  color: #fde68a;
}

.legal-prose ul {
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  padding-left: 1.25rem;
}

.legal-prose li::marker {
  color: rgba(196, 181, 253, 0.8);
}

.article-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--article-rail-gap, clamp(1.75rem, 2vw, 2.5rem));
  margin-top: var(--article-rail-align, 0px);
  padding-bottom: var(--article-rail-pad, 0px);
}

.article-rail__card {
  position: relative;
  z-index: 0;
}

@media (min-width: 1024px) {
  .article-rail__card {
    position: relative;
    top: auto;
  }
}

@media (max-width: 1023px) {
  .article-rail {
    margin-top: 2.5rem;
    padding-bottom: 0;
  }
}

.article-scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(248, 191, 36, 0.5);
  background: linear-gradient(140deg, rgba(248, 191, 36, 0.15), rgba(124, 58, 237, 0.15));
  color: #fcd34d;
  box-shadow: 0 20px 35px -20px rgba(168, 85, 247, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.article-scroll-top:is(:hover, :focus-visible) {
  color: #fde68a;
  transform: translateY(-2px);
  outline: none;
}

.article-scroll-top--visible {
  opacity: 1;
  pointer-events: auto;
}

[data-article-filter][aria-pressed='true'] {
  background: rgba(248, 191, 36, 0.18) !important;
  border-color: rgba(248, 191, 36, 0.35) !important;
  color: #fde68a !important;
}

.article-page [data-article-meta] h1,
.article-page [data-article-meta] h2,
.article-page [data-article-meta] h3,
.article-page [data-article-meta] h4 {
  font-family: 'Playfair Display', serif;
}

body.articles-page h1,
body.articles-page h2,
body.articles-page h3,
body.articles-page h4 {
  font-family: 'Playfair Display', serif;
}