/* ByteWork legal pages: dedicated glass layer, loaded after style.css.
   Kept separate so browser/server caches cannot mask legal page changes. */

body:has(.legal-content) {
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 106, 0, .12), transparent 30%),
    radial-gradient(circle at 88% 24%, rgba(139, 61, 255, .15), transparent 34%),
    #04040d;
}

.legal-container {
  width: min(1180px, 88vw) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

/* HERO: same orange / purple atmosphere as the home page, but frosted. */
.legal-hero {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 540px !important;
  padding: 150px 0 68px !important;
  display: flex !important;
  align-items: center !important;
  background:
    radial-gradient(ellipse at 23% 54%, rgba(255, 106, 0, .20) 0, rgba(255, 106, 0, .07) 24%, transparent 48%),
    radial-gradient(ellipse at 78% 48%, rgba(139, 61, 255, .24) 0, rgba(139, 61, 255, .08) 26%, transparent 51%),
    linear-gradient(135deg, #05050e 0%, #090817 48%, #070512 100%) !important;
}

.legal-hero::before,
.legal-hero::after {
  content: "" !important;
  position: absolute !important;
  width: 650px !important;
  height: 650px !important;
  top: 48% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: transparent !important;
  filter: none !important;
  z-index: -1 !important;
}

.legal-hero::before {
  left: -330px !important;
  border: 2px solid rgba(255, 106, 0, .48) !important;
  box-shadow:
    0 0 80px rgba(255, 106, 0, .28),
    inset 0 0 90px rgba(255, 106, 0, .10) !important;
  transform: translateY(-50%) !important;
}

.legal-hero::after {
  right: -330px !important;
  border: 2px solid rgba(139, 61, 255, .55) !important;
  box-shadow:
    0 0 90px rgba(139, 61, 255, .32),
    inset 0 0 100px rgba(139, 61, 255, .11) !important;
  transform: translateY(-50%) !important;
}

.legal-title-panel {
  position: relative !important;
  overflow: hidden !important;
  width: min(900px, 100%) !important;
  padding: 44px 48px 46px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.135), rgba(255,255,255,.045) 42%, rgba(139,61,255,.07) 100%),
    rgba(8, 10, 26, .42) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 -1px 0 rgba(139,61,255,.08),
    0 0 60px rgba(139,61,255,.08) !important;
}

.legal-title-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 18%, transparent 36%),
    radial-gradient(circle at 88% 14%, rgba(139,61,255,.20), transparent 31%),
    radial-gradient(circle at 4% 92%, rgba(255,106,0,.14), transparent 36%) !important;
}

.legal-title-panel::after {
  content: "" !important;
  position: absolute !important;
  width: 310px !important;
  height: 1px !important;
  left: 48px !important;
  bottom: 0 !important;
  background: linear-gradient(90deg, rgba(255,106,0,.9), rgba(196,77,255,.72), transparent) !important;
  box-shadow: 0 0 18px rgba(196,77,255,.35) !important;
}

.legal-title-panel > * { position: relative !important; z-index: 1 !important; }
.legal-eyebrow {
  display: inline-block !important;
  color: #d8c1ff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.legal-title-panel h1 {
  margin: 10px 0 14px !important;
  font-size: clamp(54px, 6.2vw, 88px) !important;
  line-height: .96 !important;
  letter-spacing: -.065em !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.legal-title-panel p {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(235,237,247,.77) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}
.legal-dot {
  color: #ff6a00 !important;
  text-shadow: 0 0 20px rgba(255,106,0,.58) !important;
}

/* CONTENT: visible gradient mesh behind transparent cards. */
.legal-content {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: 54px 0 100px !important;
  background:
    radial-gradient(circle at 5% 14%, rgba(255,106,0,.17), transparent 24%),
    radial-gradient(circle at 95% 26%, rgba(139,61,255,.20), transparent 27%),
    radial-gradient(circle at 44% 72%, rgba(196,77,255,.11), transparent 25%),
    linear-gradient(180deg, #060612 0%, #080b19 42%, #04040d 100%) !important;
}

.legal-content::before,
.legal-content::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
}
.legal-content::before {
  width: 570px !important;
  height: 570px !important;
  left: -290px !important;
  top: 17% !important;
  border: 1px solid rgba(255,106,0,.38) !important;
  background: radial-gradient(circle, rgba(255,106,0,.11), transparent 66%) !important;
  box-shadow: 0 0 100px rgba(255,106,0,.16), inset 0 0 90px rgba(255,106,0,.08) !important;
}
.legal-content::after {
  width: 650px !important;
  height: 650px !important;
  right: -330px !important;
  top: 48% !important;
  border: 1px solid rgba(139,61,255,.43) !important;
  background: radial-gradient(circle, rgba(139,61,255,.12), transparent 66%) !important;
  box-shadow: 0 0 110px rgba(139,61,255,.18), inset 0 0 100px rgba(139,61,255,.09) !important;
}

.legal-board {
  position: relative !important;
  overflow: hidden !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 48%, rgba(139,61,255,.05)),
    rgba(7,10,25,.30) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  box-shadow:
    0 35px 110px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 80px rgba(139,61,255,.055) !important;
}

.legal-board::before,
.legal-board::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  filter: blur(8px) !important;
}
.legal-board::before {
  width: 520px !important;
  height: 360px !important;
  left: -190px !important;
  top: -170px !important;
  background: radial-gradient(circle, rgba(255,106,0,.23), transparent 67%) !important;
}
.legal-board::after {
  width: 600px !important;
  height: 390px !important;
  right: -220px !important;
  bottom: -190px !important;
  background: radial-gradient(circle, rgba(139,61,255,.25), transparent 67%) !important;
}

.legal-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.legal-card--wide { grid-column: 1 / -1 !important; }

.legal-card,
.legal-card + .legal-card {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 26px 27px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.125) 0%, rgba(255,255,255,.045) 42%, rgba(139,61,255,.055) 100%),
    rgba(10,13,30,.38) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(139,61,255,.07) !important;
}

.legal-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,.025) 23%, transparent 42%),
    radial-gradient(circle at 96% 0%, rgba(139,61,255,.10), transparent 28%) !important;
}
.legal-card::after {
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  top: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent) !important;
}
.legal-card > * { position: relative !important; z-index: 1 !important; }

.legal-card--accent {
  border-color: rgba(199,133,255,.30) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(139,61,255,.22), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(255,106,0,.14), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%),
    rgba(10,13,30,.38) !important;
}
.legal-card--quiet { opacity: .92 !important; }

.legal-card-head {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  margin-bottom: 17px !important;
}
.legal-icon {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  border: 1px solid rgba(203,151,255,.33) !important;
  background: linear-gradient(145deg, rgba(196,77,255,.24), rgba(139,61,255,.08)), rgba(255,255,255,.05) !important;
  color: #eadbff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 24px rgba(139,61,255,.10) !important;
}
.legal-kicker {
  display: block !important;
  margin: 1px 0 4px !important;
  color: #cfa8ff !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.legal-card h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  font-weight: 650 !important;
}
.legal-card p,
.legal-card li {
  color: rgba(232,235,246,.74) !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}
.legal-card p { margin: 0 !important; }
.legal-card p + p { margin-top: 12px !important; }
.legal-card a { color: #d8b7ff !important; text-decoration: none !important; }
.legal-card a:hover { color: #ff8b36 !important; }
.legal-card strong { color: #fff !important; font-weight: 600 !important; }

.legal-data-list {
  display: grid !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.legal-data-row {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.018)), rgba(2,5,16,.28) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
.legal-data-row > span {
  color: rgba(198,204,222,.58) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}
.legal-data-row strong {
  min-width: 0 !important;
  color: rgba(255,255,255,.90) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

.legal-board-footer {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 17px 10px 3px !important;
  color: rgba(206,211,228,.55) !important;
  font-size: 12px !important;
}
.legal-board-footer a { color: rgba(224,205,255,.75) !important; }

/* Light mode keeps the frosted hierarchy, rather than turning into flat white boxes. */
[data-theme="light"] body:has(.legal-content),
[data-theme="light"] .legal-content {
  background:
    radial-gradient(circle at 7% 15%, rgba(255,106,0,.11), transparent 25%),
    radial-gradient(circle at 94% 30%, rgba(139,61,255,.12), transparent 28%),
    linear-gradient(180deg, #f3f5fa, #e9edf5) !important;
}
[data-theme="light"] .legal-hero {
  background:
    radial-gradient(circle at 23% 48%, rgba(255,106,0,.15), transparent 35%),
    radial-gradient(circle at 78% 42%, rgba(139,61,255,.16), transparent 36%),
    linear-gradient(135deg, #f7f8fc, #eef0f7 50%, #f5efff) !important;
}
[data-theme="light"] .legal-title-panel,
[data-theme="light"] .legal-board,
[data-theme="light"] .legal-card {
  border-color: rgba(36,45,66,.11) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.46)) !important;
  box-shadow: 0 24px 70px rgba(37,45,64,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
[data-theme="light"] .legal-title-panel h1,
[data-theme="light"] .legal-card h2,
[data-theme="light"] .legal-card strong { color: #151827 !important; }
[data-theme="light"] .legal-title-panel p,
[data-theme="light"] .legal-card p,
[data-theme="light"] .legal-card li { color: #586174 !important; }
[data-theme="light"] .legal-data-row {
  border-color: rgba(36,45,66,.08) !important;
  background: rgba(255,255,255,.52) !important;
}
[data-theme="light"] .legal-data-row strong { color: #252a38 !important; }

@media (hover: hover) {
  .legal-card {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
  }
  .legal-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(196,77,255,.31) !important;
    box-shadow:
      0 27px 68px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.26),
      0 0 36px rgba(139,61,255,.08) !important;
  }
}

@media (max-width: 800px) {
  .legal-container { width: min(92vw, 1180px) !important; }
  .legal-hero { min-height: 430px !important; padding: 126px 0 40px !important; }
  .legal-title-panel { padding: 30px 26px 32px !important; border-radius: 26px !important; }
  .legal-title-panel::after { left: 26px !important; width: 220px !important; }
  .legal-title-panel h1 { font-size: clamp(44px, 13vw, 64px) !important; }
  .legal-title-panel p { font-size: 15px !important; }
  .legal-content { padding: 30px 0 72px !important; }
  .legal-board { padding: 11px !important; border-radius: 27px !important; }
  .legal-grid { grid-template-columns: 1fr !important; gap: 11px !important; }
  .legal-card--wide { grid-column: auto !important; }
  .legal-card, .legal-card + .legal-card { padding: 21px !important; border-radius: 20px !important; }
  .legal-data-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .legal-board-footer { flex-direction: column !important; gap: 5px !important; }
}