html, body { height: 100%; overflow: hidden; }
.glow {
  background: radial-gradient(closest-side, rgba(253, 155, 0, 0.28), rgba(253, 155, 0, 0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 700ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Legal pages (privacy_policy.html, terms_and_conditions.html), marked
   <html class="legal">. Plain CSS only: the app shows them with JavaScript
   off, so Tailwind never runs there. */
html.legal, html.legal body { height: auto; overflow: visible; }
.legal { -webkit-text-size-adjust: 100%; }
.legal body {
  margin: 0;
  min-height: 100vh;
  background: #FFFFFF;
  color: #14213D;
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
.legal *, .legal *::before, .legal *::after { box-sizing: border-box; }
.legal .hero {
  position: relative;
  text-align: center;
  padding: 32px 16px 8px;
  overflow: hidden;
}
.legal .hero::before {
  content: "";
  position: absolute;
  inset: -60px 20% auto;
  height: 200px;
  background: radial-gradient(closest-side, rgba(253, 155, 0, 0.28), rgba(253, 155, 0, 0) 100%);
  pointer-events: none;
}
.legal h1 {
  position: relative;
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  color: #0F48B0;
}
.legal .date {
  position: relative;
  margin: 8px 0 0;
  font-weight: 600;
  color: rgba(20, 33, 61, .7);
}
.legal main {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.legal section {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-inline-start: 4px solid #FD9B00;
  border-radius: 16px;
  padding: 8px 20px 12px;
  margin-bottom: 16px;
}
.legal h2 { margin: 12px 0 4px; font-size: 1.2rem; font-weight: 700; line-height: 1.9; color: #0F48B0; }
.legal p { margin: 8px 0; }
.legal ul { margin: 8px 0; padding-inline-start: 22px; list-style: disc; }
.legal li { margin: 4px 0; }
.legal li::marker { color: #FD9B00; }
.legal strong { font-weight: 700; }
.legal a { color: #0F48B0; font-weight: 600; text-decoration: underline; }
@media (min-width: 640px) {
  .legal h1 { font-size: 3rem; }
  .legal .hero { padding-top: 48px; }
}