/* Shared by privacy-policy.html and terms-of-service.html. Colours and fonts match index.html. */
:root {
  --navy-deep: #0d1550;
  --navy: #14206b;
  --panel-edge: #4fb3ff;
  --text: #ffffff;
  --muted: #b9c6f5;
  --gold: #ffd24d;
  --display: "Baloo Bhaijaan 2", "Fredoka", system-ui, sans-serif;
  --body: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--navy-deep); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 500 17px/1.6 var(--body);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(79, 179, 255, 0.28), transparent 70%),
    url("img/background.jpg") center top / cover fixed,
    linear-gradient(var(--navy), var(--navy-deep));
  overflow-x: hidden;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}

.studio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font: 700 14px/1 var(--body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.studio img { width: 28px; height: auto; }

h1 {
  margin: 36px 0 6px;
  text-align: center;
  font: 800 clamp(32px, 6vw, 44px)/1.1 var(--display);
  color: var(--gold);
  text-shadow: 0 3px 0 #7a4a00, 0 6px 14px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.meta { margin: 0 0 24px; text-align: center; color: var(--muted); }

/* Same navy panel with a glowing blue rim as the home page. */
.panel {
  background: linear-gradient(rgba(40, 60, 150, 0.9), rgba(22, 34, 110, 0.94));
  border: 2px solid var(--panel-edge);
  border-radius: 22px;
  box-shadow: 0 0 18px rgba(79, 179, 255, 0.35), inset 0 0 22px rgba(79, 179, 255, 0.18);
  padding: 8px clamp(18px, 4vw, 32px) 24px;
}
.panel h2 {
  margin: 26px 0 6px;
  font: 800 22px/1.2 var(--display);
  color: var(--gold);
  text-transform: uppercase;
}
.panel p, .panel ul { margin: 0 0 12px; }
.panel ul { padding-left: 1.2em; }
.panel li { margin-bottom: 6px; }
.panel a { color: var(--gold); overflow-wrap: anywhere; }

footer {
  margin-top: 32px;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}
footer a { color: var(--gold); }
.panel > p:first-child { margin-top: 22px; }
footer nav { margin-bottom: 6px; }