/* =========================================================================
   LEGAL PAGES — privacy, terms, responsible gaming

   These get read by somebody who is worried or annoyed, on a phone, and
   who wants one specific answer. So: short line length, numbered sections
   they can scan, and the important sentence pulled out rather than buried
   in a paragraph.
   ========================================================================= */

.legal{ padding:100px 0 60px; }
@media (min-width:900px){ .legal{ padding:118px 0 80px; } }

.legal-in{ max-width:760px; }

.legal h1{
  font:800 clamp(30px,6vw,44px)/1.15 'Outfit',system-ui,sans-serif;
  margin:6px 0 8px; color:var(--ink,#e8eef7);
}
.legal-date{
  font-size:13px; color:var(--ink-mute,#9fb0c6); margin:0 0 22px;
}

/* The summary at the top. Most people read this and nothing else, so it
   says the real answer rather than "please read the following". */
.legal-lede{
  padding:16px 18px; margin-bottom:34px; border-radius:14px;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.24);
  border-left:3px solid var(--sea,#38bdf8);
}
.legal-lede p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink,#e8eef7); }

.legal-sec{ margin-bottom:34px; }
.legal-sec h2{
  display:flex; align-items:center; gap:11px;
  font:800 19px/1.3 'Outfit',system-ui,sans-serif;
  color:var(--ink,#e8eef7); margin:0 0 12px;
}
.legal-sec h2 i{
  flex:0 0 28px; height:28px; border-radius:9px;
  display:grid; place-items:center; font-style:normal;
  background:rgba(251,191,36,.14); color:var(--gold,#fbbf24);
  font:800 13px/1 'Outfit',system-ui,sans-serif;
}
.legal-sec h3{
  font:800 15px/1.3 'Outfit',system-ui,sans-serif;
  margin:16px 0 8px; color:var(--ink,#e8eef7);
}
.legal p{ font-size:15px; line-height:1.72; color:var(--ink-mute,#9fb0c6); margin:0 0 13px; }
.legal p b, .legal li b{ color:var(--ink,#e8eef7); }
.legal a{ color:var(--sea,#38bdf8); }
.legal ul{ margin:0 0 13px; padding-left:20px; }
.legal li{ font-size:15px; line-height:1.7; color:var(--ink-mute,#9fb0c6); margin-bottom:7px; }

/* The one sentence that matters in a section. */
.legal-flag{
  padding:13px 16px; border-radius:12px;
  background:rgba(251,191,36,.09);
  border:1px solid rgba(251,191,36,.26);
  color:var(--ink,#e8eef7) !important;
}

.legal-tbl{
  width:100%; border-collapse:collapse; margin:4px 0 16px;
  border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden;
}
.legal-tbl th{
  text-align:left; padding:10px 13px; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mute,#9fb0c6);
  background:rgba(255,255,255,.05);
}
.legal-tbl td{
  padding:11px 13px; font-size:14.5px; line-height:1.6;
  color:var(--ink-mute,#9fb0c6);
  border-top:1px solid rgba(255,255,255,.07);
}
.legal-tbl td:first-child{ color:var(--ink,#e8eef7); font-weight:600; width:38%; }

/* Do / do not, side by side — the fastest way to answer "is this your
   fault or theirs?" */
.legal-two{ display:grid; gap:12px; margin:4px 0 16px; }
@media (min-width:640px){ .legal-two{ grid-template-columns:1fr 1fr; } }
.legal-col{ padding:15px 17px; border-radius:13px; }
.legal-col h3{ margin-top:0; }
.legal-col ul{ padding-left:18px; margin-bottom:0; }
.legal-col li{ font-size:14.5px; }
.legal-yes{ background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.26); }
.legal-yes h3{ color:#34d399; }
.legal-no{ background:rgba(248,113,113,.07); border:1px solid rgba(248,113,113,.24); }
.legal-no h3{ color:#f87171; }

/* ── Responsible gaming: help first ──────────────────────────────────
   Above everything, before any of our own words. Somebody arriving here
   in trouble should not have to read a paragraph about our commitment
   before they find a number. */
.rg-help{
  padding:22px; margin-bottom:34px; border-radius:16px;
  background:linear-gradient(160deg,rgba(239,68,68,.14),rgba(239,68,68,.06));
  border:1px solid rgba(248,113,113,.36);
}
.rg-help h2{
  font:800 20px/1.3 'Outfit',system-ui,sans-serif;
  color:#fff; margin:0 0 6px;
}
.rg-help > p{ margin-bottom:15px; color:#fecaca; }
.rg-lines{ display:grid; gap:10px; }
@media (min-width:640px){ .rg-lines{ grid-template-columns:repeat(3,1fr); } }
.rg-line{
  display:block; padding:13px 15px; border-radius:12px; text-decoration:none;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12);
  transition:border-color .16s, transform .16s, background .16s;
}
.rg-line:hover{
  border-color:#fca5a5; transform:translateY(-2px); background:rgba(0,0,0,.4);
}
.rg-line b{
  display:block; font:800 17px/1.2 'Outfit',system-ui,sans-serif; color:#fff;
}
.rg-line span{ display:block; margin-top:3px; font-size:12.5px; color:#fca5a5; }
.rg-note{ margin:14px 0 0 !important; font-size:13px !important; color:#fca5a5 !important; }

.rg-signs li{ margin-bottom:9px; }
.rg-myth{
  padding:12px 15px; margin-bottom:10px; border-radius:11px;
  background:rgba(255,255,255,.04); border-left:3px solid rgba(248,113,113,.5);
}
.rg-myth b{ display:block; color:#f87171; font-size:15px; margin-bottom:4px; }
.rg-myth p{ margin:0; font-size:14.5px; }

/* ── Foot ─────────────────────────────────────────────────────────── */
.legal-foot{
  margin-top:44px; padding-top:26px; text-align:center;
  border-top:1px solid rgba(255,255,255,.09);
}
.legal-foot p{ margin-bottom:16px; }

.ftr-legal{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:10px; }
.ftr-legal a{ font-size:13px; color:var(--ink-mute,#9fb0c6); }
.ftr-legal a:hover{ color:var(--gold,#fbbf24); }