.legal-page{min-height:100vh;background:radial-gradient(circle at 15% 5%,rgba(94,69,222,.17),transparent 30%),radial-gradient(circle at 88% 20%,rgba(0,183,255,.08),transparent 25%),#050815;color:#fff}.legal-shell{width:min(1380px,92%);margin:0 auto;padding:62px 0 70px}.legal-hero{text-align:center;max-width:920px;margin:0 auto 38px}.legal-kicker{display:inline-flex;gap:8px;align-items:center;color:#a79cff;font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.legal-hero h1{font-size:clamp(42px,5vw,70px);line-height:1;margin:13px 0 17px;letter-spacing:-.045em;font-weight:950}.legal-hero h1 span{background:linear-gradient(90deg,#8d79ff,#33c8ff);-webkit-background-clip:text;background-clip:text;color:transparent}.legal-hero p{max-width:760px;margin:auto;color:#aeb8cf;font-size:17px;line-height:1.7}.legal-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}.legal-pill{border:1px solid rgba(139,153,214,.18);background:rgba(13,20,43,.76);padding:8px 12px;border-radius:999px;color:#aab6cf;font-size:12px}.legal-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;align-items:start}.legal-nav{position:sticky;top:86px;border:1px solid rgba(132,147,210,.16);border-radius:22px;background:rgba(12,18,39,.84);padding:18px;box-shadow:0 18px 45px rgba(0,0,0,.18)}.legal-nav b{display:block;font-size:13px;letter-spacing:.11em;color:#9e94ff;margin:2px 8px 12px}.legal-nav a{display:block;color:#aeb9d0;text-decoration:none;padding:10px 11px;border-radius:10px;font-size:13px;transition:.18s}.legal-nav a:hover{background:rgba(100,87,232,.13);color:#fff}.legal-nav .trust{margin-top:14px;padding:14px;border-radius:14px;background:linear-gradient(135deg,rgba(89,67,210,.14),rgba(22,33,68,.35));color:#8795b3;font-size:12px;line-height:1.55}.legal-content{display:grid;gap:16px}.legal-card{scroll-margin-top:100px;border:1px solid rgba(132,147,210,.16);background:linear-gradient(145deg,rgba(14,21,45,.91),rgba(8,13,29,.88));border-radius:22px;padding:25px 27px;box-shadow:0 16px 42px rgba(0,0,0,.14)}.legal-card h2{font-size:22px;margin:0 0 11px}.legal-card h3{font-size:15px;margin:18px 0 8px;color:#d8dcff}.legal-card p,.legal-card li{color:#aab6cf;font-size:14px;line-height:1.75}.legal-card p{margin:8px 0}.legal-card ul{margin:8px 0 0;padding-left:20px}.legal-card a{color:#a99fff}.legal-callout{border-color:rgba(117,103,255,.34);background:linear-gradient(120deg,rgba(86,62,190,.17),rgba(10,17,37,.9))}.legal-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.legal-link{display:block;text-decoration:none;color:#fff;border:1px solid rgba(132,147,210,.16);background:rgba(13,20,43,.74);border-radius:18px;padding:18px;transition:.2s}.legal-link:hover{transform:translateY(-3px);border-color:rgba(111,124,255,.55)}.legal-link b{display:block;margin-bottom:5px}.legal-link small{color:#8e9bb7}.legal-note{font-size:12px!important;color:#7f8da9!important}@media(max-width:900px){.legal-layout{grid-template-columns:1fr}.legal-nav{position:relative;top:auto}.legal-links{grid-template-columns:1fr}}@media(max-width:620px){.legal-shell{padding-top:42px}.legal-card{padding:20px}.legal-hero p{font-size:15px}}



/* BeatlePlay V3.3.1 — Legal & Trust Visual Showcase */
.legal-page{
  background:
    radial-gradient(circle at 17% 9%,rgba(87,54,226,.20),transparent 28%),
    radial-gradient(circle at 82% 10%,rgba(0,166,255,.13),transparent 30%),
    #030714;
}
.legal-shell{width:min(1500px,94%);padding:42px 0 56px}
.legal-hero-v331{
  max-width:none;
  min-height:245px;
  margin:0 0 28px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);
  align-items:center;
  text-align:left;
  overflow:hidden;
  border-bottom:1px solid rgba(71,124,255,.10);
  position:relative;
}
.legal-hero-copy{padding:24px 20px 30px 34px;position:relative;z-index:2}
.legal-hero-v331 h1{font-size:clamp(44px,4.7vw,74px);margin:12px 0 13px}
.legal-hero-v331 p{margin:0;max-width:760px}
.legal-hero-v331 .legal-meta{justify-content:flex-start;margin-top:20px}
.legal-hero-art{
  height:240px;position:relative;display:grid;place-items:center;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.35));
}
.hero-glow{position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,226,255,.32),rgba(99,48,255,.20) 42%,transparent 72%);
  box-shadow:0 0 70px rgba(31,119,255,.28)}
.hero-symbol{
  width:145px;height:145px;display:grid;place-items:center;position:relative;z-index:3;
  border-radius:34% 34% 44% 44%;
  font-size:70px;line-height:1;
  background:linear-gradient(145deg,rgba(14,38,98,.95),rgba(64,25,147,.92));
  border:3px solid #1be4ff;
  box-shadow:inset 0 0 30px rgba(63,173,255,.38),0 0 0 7px rgba(104,55,255,.20),0 0 42px rgba(0,191,255,.38);
}
.legal-hero-art.controller .hero-symbol{border-radius:50px;transform:rotate(-5deg)}
.legal-hero-art.cookie .hero-symbol{border-radius:50%;font-size:0}
.legal-hero-art.cookie .hero-symbol:before{content:"";width:105px;height:105px;border-radius:50%;
 background:radial-gradient(circle at 30% 25%,#ffcf66,#ff8b35 55%,#9b46ff 100%);
 box-shadow:inset -12px -15px 24px rgba(61,20,106,.42)}
.legal-hero-art.cookie .hero-symbol:after{content:"•••  •";position:absolute;color:#392056;font-size:35px;letter-spacing:9px;transform:rotate(-20deg)}
.orbit{position:absolute;border:2px solid rgba(42,210,255,.45);border-radius:50%;transform:rotate(-8deg)}
.orbit-a{width:245px;height:72px;bottom:27px}
.orbit-b{width:190px;height:48px;bottom:39px;border-color:rgba(137,71,255,.55)}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#54e8ff;box-shadow:0 0 14px #54e8ff}
.s1{top:42px;left:20%}.s2{top:70px;right:18%;background:#9c67ff}.s3{bottom:55px;right:10%}

.legal-layout{grid-template-columns:250px minmax(0,1fr);gap:18px}
.legal-nav{top:76px;border-radius:18px;padding:16px;background:linear-gradient(180deg,rgba(9,18,43,.96),rgba(7,13,31,.93))}
.legal-nav a{padding:9px 10px;border-left:2px solid transparent}
.legal-nav a:hover,.legal-nav a:focus{border-left-color:#7b61ff;background:linear-gradient(90deg,rgba(92,68,236,.23),transparent)}
.legal-content{gap:10px}
.legal-card{
  position:relative;display:grid;grid-template-columns:66px minmax(0,1fr);gap:18px;
  border-radius:16px;padding:17px 20px;
  border-color:rgba(51,130,221,.22);
  background:linear-gradient(145deg,rgba(8,24,53,.96),rgba(5,15,35,.96));
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.legal-card:hover{transform:translateY(-2px);border-color:rgba(62,174,255,.45);box-shadow:0 16px 34px rgba(0,0,0,.23)}
.policy-icon{
  width:58px;height:58px;border-radius:15px;display:grid;place-items:center;
  font-size:29px;font-weight:900;color:#8cf5ff;
  background:linear-gradient(145deg,#4934db,#0b67dc);
  border:1px solid rgba(111,213,255,.38);
  box-shadow:inset 0 0 18px rgba(90,228,255,.20),0 0 20px rgba(63,70,255,.22);
}
.policy-card-body{min-width:0}
.legal-card h2{font-size:20px;margin:1px 0 7px}
.legal-card p,.legal-card li{font-size:13px;line-height:1.62}
.legal-callout{border-color:rgba(60,168,255,.32)}
.legal-links{gap:10px;margin-top:14px}
.legal-link{border-radius:14px;padding:15px 16px;background:linear-gradient(145deg,rgba(10,24,54,.94),rgba(8,15,36,.94))}
.legal-link b{color:#ff56f7}
.legal-link:hover{border-color:#4fd7ff;box-shadow:0 10px 28px rgba(37,91,224,.18)}

@media(max-width:980px){
 .legal-hero-v331{grid-template-columns:1fr;text-align:center}
 .legal-hero-copy{padding:20px}
 .legal-hero-v331 p{margin:auto}
 .legal-hero-v331 .legal-meta{justify-content:center}
 .legal-hero-art{height:190px}
 .legal-layout{grid-template-columns:1fr}
 .legal-nav{position:relative;top:auto}
}
@media(max-width:620px){
 .legal-shell{padding-top:26px}
 .legal-hero-v331 h1{font-size:42px}
 .legal-card{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px}
 .policy-icon{width:46px;height:46px;font-size:22px;border-radius:12px}
 .legal-links{grid-template-columns:1fr}
}



/* V3.3.2 exact-layout correction */
@media (min-width:981px){
  .legal-shell{width:min(1420px,92%)!important;margin:0 auto!important}
  .legal-hero-v331{display:grid!important;grid-template-columns:minmax(0,1.15fr) 420px!important;min-height:270px!important}
  .legal-hero-copy{padding:30px 26px 34px 20px!important}
  .legal-hero-v331 h1{font-size:clamp(48px,4.25vw,70px)!important}
  .legal-meta{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
  .legal-pill{display:inline-flex!important;padding:8px 13px!important;border:1px solid rgba(104,127,210,.34)!important;border-radius:999px!important;background:rgba(8,17,42,.72)!important}
  .legal-layout{display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:18px!important;align-items:start!important}
  .legal-nav{display:flex!important;flex-direction:column!important;position:sticky!important;top:84px!important;height:auto!important}
  .legal-nav b{display:block!important;margin:2px 8px 10px!important}
  .legal-nav a{display:block!important;width:100%!important;box-sizing:border-box!important}
  .legal-nav .trust{display:block!important;margin-top:12px!important;padding:13px!important;border-radius:12px!important;background:rgba(60,63,150,.16)!important}
  .legal-content{display:flex!important;flex-direction:column!important;gap:10px!important}
  .legal-card{display:grid!important;grid-template-columns:66px minmax(0,1fr)!important;width:100%!important;box-sizing:border-box!important}
  .legal-links{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .legal-link{display:flex!important;flex-direction:column!important;gap:6px!important}
}

/* BeatlePlay V3.3.3 — desktop recreation of approved policy-page reference */
.legal-page{background:
 radial-gradient(circle at 17% 9%,rgba(69,42,202,.25),transparent 30%),
 radial-gradient(circle at 86% 13%,rgba(0,164,255,.15),transparent 27%),
 linear-gradient(180deg,#050919 0%,#020713 100%)!important}
.legal-shell{width:min(1480px,94%)!important;padding:34px 0 48px!important}
.legal-hero-v331{
 grid-template-columns:minmax(0,1.12fr) 430px!important;
 min-height:290px!important;margin-bottom:22px!important;
 border-bottom:0!important;overflow:visible!important}
.legal-hero-copy{padding:24px 20px 25px 18px!important}
.legal-kicker{font-size:12px!important;color:#b39cff!important}
.legal-hero-v331 h1{font-size:clamp(52px,4.4vw,72px)!important;line-height:.98!important;margin:13px 0 16px!important}
.legal-hero-v331 p{font-size:15px!important;line-height:1.65!important;max-width:720px!important}
.legal-hero-art{height:280px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.legal-hero-art img{width:min(420px,100%)!important;height:270px!important;object-fit:contain!important;filter:drop-shadow(0 0 22px rgba(26,164,255,.26))}
.legal-meta{margin-top:20px!important;gap:9px!important}
.legal-pill{font-size:11px!important;padding:7px 12px!important;color:#d2dcf3!important;border-color:rgba(95,151,240,.32)!important;background:#071329!important}

@media (min-width:981px){
 .legal-layout{grid-template-columns:255px minmax(0,1fr)!important;gap:16px!important;align-items:start!important}
 .legal-nav{top:78px!important;padding:15px 13px!important;border-radius:16px!important;background:linear-gradient(180deg,#07142e,#061027)!important;border:1px solid rgba(31,112,208,.30)!important}
 .legal-nav b{font-size:11px!important;color:#c0c8ff!important;letter-spacing:.08em!important;margin:0 9px 8px!important}
 .legal-nav a{font-size:12px!important;padding:9px 10px!important;border-radius:7px!important;color:#c4cee3!important;border-left:3px solid transparent!important}
 .legal-nav a:first-of-type,.legal-nav a:hover{background:linear-gradient(90deg,rgba(78,66,218,.46),rgba(30,64,152,.24))!important;border-left-color:#a15cff!important;color:white!important}
 .legal-nav .trust{font-size:11px!important;line-height:1.45!important;color:#91a0bf!important;padding:12px!important}
 .legal-content{gap:9px!important}
 .legal-card{grid-template-columns:58px minmax(0,1fr)!important;gap:16px!important;padding:14px 17px!important;border-radius:14px!important;background:linear-gradient(145deg,#071a38,#051329)!important;border:1px solid rgba(23,112,202,.34)!important;min-height:88px!important}
 .policy-icon{width:54px!important;height:54px!important;border-radius:13px!important;font-size:27px!important;background:linear-gradient(145deg,#5234df,#086de2)!important;box-shadow:inset 0 0 20px rgba(64,230,255,.24),0 0 18px rgba(65,50,238,.24)!important}
 .legal-card h2{font-size:18px!important;margin:1px 0 5px!important}
 .legal-card p,.legal-card li{font-size:12px!important;line-height:1.48!important;color:#bdc9df!important}
 .legal-card p{margin:5px 0!important}.legal-card ul{margin:5px 0 0!important}
 .legal-links{margin-top:18px!important;gap:10px!important}
 .legal-link{min-height:58px!important;padding:12px 14px!important;border-radius:12px!important;background:linear-gradient(145deg,#081730,#071127)!important;border:1px solid rgba(34,112,203,.28)!important}
 .legal-link b{font-size:13px!important;color:#ff55e9!important}.legal-link small{font-size:11px!important}
}
@media (min-width:1450px){
 .legal-shell{width:1380px!important}
 .legal-layout{grid-template-columns:250px 1fr!important}
}
@media(max-width:980px){
 .legal-hero-art img{height:210px!important}
}

/* V3.3.4 — Full-width desktop composition + reference-matched privacy hero */
.legal-shell{
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:30px clamp(28px,3.2vw,64px) 48px!important;
}
.legal-hero-v331{
  width:100%!important;
  grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr)!important;
  min-height:285px!important;
}
.legal-hero-copy{padding-left:0!important}
.legal-hero-art{justify-content:flex-end!important;height:285px!important}
.legal-hero-art img{width:min(560px,100%)!important;height:285px!important}
.legal-layout{width:100%!important;grid-template-columns:255px minmax(0,1fr)!important}
.legal-content{width:100%!important}
.legal-card{width:100%!important}
.legal-links{width:100%!important}
@media(min-width:1700px){
 .legal-shell{padding-left:70px!important;padding-right:70px!important}
 .legal-hero-v331{grid-template-columns:minmax(0,1.35fr) 570px!important}
 .legal-layout{grid-template-columns:270px minmax(0,1fr)!important}
}
@media(max-width:980px){
 .legal-shell{padding-left:20px!important;padding-right:20px!important}
 .legal-hero-v331{grid-template-columns:1fr!important}
 .legal-hero-art{justify-content:center!important}
 .legal-layout{grid-template-columns:1fr!important}
}

/* V3.3.5 — remove visible side/background gutters completely */
html,body.legal-page{background:#020713!important}
body.legal-page{
  background-image:
    radial-gradient(circle at 18% 8%,rgba(72,42,210,.20),transparent 32%),
    radial-gradient(circle at 82% 9%,rgba(0,145,255,.14),transparent 30%),
    linear-gradient(180deg,#050919 0%,#020713 100%)!important;
  background-attachment:fixed!important;
}
.legal-shell{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding-left:clamp(24px,2.5vw,48px)!important;
  padding-right:clamp(24px,2.5vw,48px)!important;
  background:transparent!important;
}
.site-header,.site-footer{width:100%!important;max-width:none!important}
@media(min-width:1200px){
 .legal-shell{padding-left:40px!important;padding-right:40px!important}
}

/* V3.3.6 — approved Privacy hero asset integration */
.legal-hero-art{
  overflow:hidden!important;
  border-radius:22px!important;
  background:#020817!important;
}
.legal-hero-art img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  filter:none!important;
}
@media(min-width:981px){
  .legal-hero-v331{
    grid-template-columns:minmax(0,1.15fr) minmax(500px,.85fr)!important;
    min-height:300px!important;
  }
  .legal-hero-art{
    height:300px!important;
    min-width:500px!important;
  }
}
@media(max-width:980px){
  .legal-hero-art{
    width:100%!important;
    height:240px!important;
  }
}

/* V3.3.7 — Privacy hero seamless background blend */
.legal-hero-art{
  overflow:visible!important;
  border-radius:0!important;
  background:transparent!important;
  position:relative!important;
}
.legal-hero-art::before{
  content:""!important;
  position:absolute!important;
  inset:5% 3% 3%!important;
  background:radial-gradient(ellipse at center,rgba(8,69,160,.16) 0%,rgba(5,24,67,.08) 48%,transparent 76%)!important;
  filter:blur(18px)!important;
  pointer-events:none!important;
}
.legal-hero-art img{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:0!important;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 7%,#000 78%,transparent 100%)!important;
  -webkit-mask-composite:source-in!important;
  mask-image:
    linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 7%,#000 78%,transparent 100%)!important;
  mask-composite:intersect!important;
  filter:drop-shadow(0 0 22px rgba(0,127,255,.12))!important;
}
@media(min-width:981px){
  .legal-hero-art{height:300px!important}
}

/* V3.3.8 — refined policy icons + full Privacy artwork fit */

/* Show the COMPLETE approved hero image instead of cropping it. */
.legal-hero-art{
  background:transparent!important;
  overflow:visible!important;
}
.legal-hero-art img{
  object-fit:contain!important;
  object-position:center center!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
}

/* Replace the mixed emoji/glyph look with a consistent neon icon family. */
.policy-icon{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  font-size:0!important;
  color:transparent!important;
  background:linear-gradient(145deg,#304ee8 0%,#126bdc 55%,#4430d5 100%)!important;
  border:1px solid rgba(71,219,255,.58)!important;
  box-shadow:
    inset 0 0 18px rgba(64,225,255,.22),
    0 0 16px rgba(45,79,255,.20)!important;
}
.policy-icon::before{
  content:""!important;
  width:30px!important;
  height:30px!important;
  display:block!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  filter:drop-shadow(0 0 5px rgba(67,242,255,.65))!important;
}

/* Document */
.legal-card:nth-child(1) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='7' y='4' width='18' height='24' rx='2' fill='none' stroke='%2367F5FF' stroke-width='2.4'/%3E%3Cpath d='M11 10h10M11 15h10M11 20h10' stroke='%23B8FFFF' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
/* Game controller */
.legal-card:nth-child(2) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8 12c-3 1-5 10-3 13 2 3 5-1 8-4h6c3 3 6 7 8 4 2-3 0-12-3-13-3-1-5 1-8 1s-5-2-8-1Z' fill='none' stroke='%2367F5FF' stroke-width='2.3'/%3E%3Cpath d='M10 15v6M7 18h6' stroke='%23B8FFFF' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='17' r='1.6' fill='%23FF5EEB'/%3E%3Ccircle cx='25' cy='20' r='1.6' fill='%2367F5FF'/%3E%3C/svg%3E")!important;
}
/* Community user */
.legal-card:nth-child(3) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='10' r='5' fill='none' stroke='%2367F5FF' stroke-width='2.4'/%3E%3Cpath d='M7 27c.8-6 4-9 9-9s8.2 3 9 9' fill='none' stroke='%23B8FFFF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
/* Analytics */
.legal-card:nth-child(4) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5' y='18' width='5' height='9' rx='1' fill='%2367F5FF'/%3E%3Crect x='13.5' y='11' width='5' height='16' rx='1' fill='%238E7CFF'/%3E%3Crect x='22' y='5' width='5' height='22' rx='1' fill='%2367F5FF'/%3E%3C/svg%3E")!important;
}
/* Advertising megaphone */
.legal-card:nth-child(5) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 14v6h5l12 6V8l-12 6H5Z' fill='none' stroke='%2367F5FF' stroke-width='2.3' stroke-linejoin='round'/%3E%3Cpath d='M11 21l2 6' stroke='%23FF62EA' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M25 12c2 2 2 6 0 8' fill='none' stroke='%23B8FFFF' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
/* Settings */
.legal-card:nth-child(6) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='5' fill='none' stroke='%23B8FFFF' stroke-width='2.4'/%3E%3Cpath d='M16 4v4M16 24v4M4 16h4M24 16h4M7.5 7.5l3 3M21.5 21.5l3 3M24.5 7.5l-3 3M10.5 21.5l-3 3' stroke='%2367F5FF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
/* Security */
.legal-card:nth-child(7) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4l10 4v7c0 7-4 11-10 14C10 26 6 22 6 15V8l10-4Z' fill='none' stroke='%2367F5FF' stroke-width='2.3'/%3E%3Cpath d='m11 16 3 3 7-8' fill='none' stroke='%23B8FFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
/* Update */
.legal-card:nth-child(8) .policy-icon::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25 10V5l-4 4a10 10 0 1 0 3 12' fill='none' stroke='%2367F5FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}

@media(min-width:981px){
 .legal-hero-art{height:315px!important}
 .legal-hero-art img{height:315px!important}
}

/* =========================================================
   BeatlePlay V3.3.9 — Privacy Reference UI Rebuild
   Desktop interpretation of the approved mobile reference.
   ========================================================= */

body.legal-page{
  background:
    radial-gradient(circle at 16% 8%,rgba(55,34,160,.20),transparent 31%),
    radial-gradient(circle at 83% 10%,rgba(0,110,230,.12),transparent 28%),
    linear-gradient(180deg,#050919 0%,#020713 100%)!important;
}

/* Reference uses a deliberately composed central canvas, not edge-to-edge cards. */
.legal-shell{
  width:min(1320px,calc(100% - 48px))!important;
  max-width:1320px!important;
  margin:0 auto!important;
  padding:36px 0 46px!important;
}

/* Hero: copy and artwork behave like one visual composition. */
.legal-hero-v331{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.72fr)!important;
  gap:34px!important;
  min-height:260px!important;
  align-items:center!important;
  margin:0 0 22px!important;
  overflow:visible!important;
}
.legal-hero-copy{
  padding:12px 0 16px!important;
}
.legal-kicker{
  display:block!important;
  margin:0 0 12px!important;
  color:#b68aff!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.14em!important;
}
.legal-hero-v331 h1{
  margin:0 0 14px!important;
  font-size:clamp(48px,4vw,64px)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
}
.legal-hero-v331 h1 span{
  background:linear-gradient(90deg,#8067ff,#19c9ff)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.legal-hero-v331 p{
  max-width:650px!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.62!important;
  color:#b8c3dc!important;
}
.legal-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:18px!important;
}
.legal-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:5px 11px!important;
  border:1px solid rgba(73,131,210,.34)!important;
  border-radius:999px!important;
  background:#071329!important;
  color:#c9d4ea!important;
  font-size:10px!important;
}

/* Artwork is smaller and fully visible, like the supplied reference. */
.legal-hero-art{
  width:100%!important;
  height:245px!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.legal-hero-art::before{display:none!important}
.legal-hero-art img{
  width:100%!important;
  height:245px!important;
  max-width:500px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)!important;
  filter:drop-shadow(0 0 20px rgba(21,119,255,.13))!important;
}

/* Main reference layout: compact left rail + readable card column. */
.legal-layout{
  display:grid!important;
  grid-template-columns:235px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
  width:100%!important;
}
.legal-nav{
  position:sticky!important;
  top:78px!important;
  display:flex!important;
  flex-direction:column!important;
  padding:14px 12px!important;
  border:1px solid rgba(34,105,190,.34)!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#08152f 0%,#071128 100%)!important;
  box-shadow:0 16px 35px rgba(0,0,0,.16)!important;
}
.legal-nav b{
  margin:1px 8px 8px!important;
  color:#c3c8ff!important;
  font-size:10px!important;
  letter-spacing:.10em!important;
}
.legal-nav a{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  padding:8px 9px!important;
  border-left:3px solid transparent!important;
  border-radius:7px!important;
  color:#c3cde0!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.legal-nav a:first-of-type,
.legal-nav a:hover{
  color:#fff!important;
  border-left-color:#a95dff!important;
  background:linear-gradient(90deg,rgba(78,65,218,.50),rgba(25,70,159,.34))!important;
}
.legal-nav .trust{
  margin-top:10px!important;
  padding:11px!important;
  border-radius:10px!important;
  background:rgba(58,70,153,.17)!important;
  color:#93a1bd!important;
  font-size:10px!important;
  line-height:1.45!important;
}

.legal-content{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  width:100%!important;
}
.legal-card{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:15px!important;
  width:100%!important;
  min-height:88px!important;
  box-sizing:border-box!important;
  padding:13px 16px!important;
  border:1px solid rgba(24,104,192,.38)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#071a38 0%,#06152e 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.015)!important;
}
.policy-icon{
  width:52px!important;
  height:52px!important;
  align-self:start!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#3c42e8 0%,#0875e0 58%,#492fd2 100%)!important;
  border:1px solid rgba(65,216,255,.55)!important;
  box-shadow:inset 0 0 18px rgba(71,236,255,.22),0 0 13px rgba(40,62,242,.20)!important;
}
.policy-icon::before{
  width:29px!important;
  height:29px!important;
}
.policy-card-body{min-width:0!important}
.legal-card h2{
  margin:1px 0 5px!important;
  color:#fff!important;
  font-size:17px!important;
  line-height:1.2!important;
}
.legal-card p,
.legal-card li{
  color:#bac7dc!important;
  font-size:11px!important;
  line-height:1.48!important;
}
.legal-card p{margin:4px 0!important}
.legal-card ul{
  margin:5px 0 4px 17px!important;
  padding:0!important;
}

/* Related pages exactly as compact three-card row from the reference. */
.legal-links{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:18px 0 0 249px!important;
  width:auto!important;
}
.legal-link{
  min-height:62px!important;
  box-sizing:border-box!important;
  padding:11px 13px!important;
  border:1px solid rgba(30,105,190,.30)!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#08172f,#071127)!important;
}
.legal-link b{
  color:#ff56e8!important;
  font-size:12px!important;
}
.legal-link small{
  color:#9cabc5!important;
  font-size:10px!important;
  line-height:1.35!important;
}

/* Large desktops retain the same composed proportions instead of stretching. */
@media(min-width:1600px){
  .legal-shell{max-width:1380px!important}
  .legal-layout{grid-template-columns:245px minmax(0,1fr)!important}
  .legal-links{margin-left:259px!important}
}

/* Responsive collapse follows the same reference hierarchy. */
@media(max-width:980px){
  .legal-shell{
    width:min(94%,760px)!important;
    padding:24px 0 34px!important;
  }
  .legal-hero-v331{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .legal-hero-art{
    height:220px!important;
  }
  .legal-hero-art img{
    height:220px!important;
    max-width:470px!important;
  }
  .legal-layout{grid-template-columns:1fr!important}
  .legal-nav{position:relative!important;top:auto!important}
  .legal-links{
    grid-template-columns:1fr!important;
    margin-left:0!important;
  }
}

/* =========================================================
   BeatlePlay V3.3.10 — Exact Privacy Hero Blend + Premium Icons
   ========================================================= */

/* 1. HERO ART — remove every visible rectangular edge.
   The PNG remains unchanged; CSS masks all four sides into the page BG. */
.legal-hero-art{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.legal-hero-art::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:9% 5% 7%!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse at center,
      rgba(9,64,154,.20) 0%,
      rgba(8,38,102,.12) 45%,
      rgba(5,9,25,0) 76%)!important;
  filter:blur(22px)!important;
  pointer-events:none!important;
}
.legal-hero-art img{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:245px!important;
  max-width:500px!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 16px rgba(0,117,255,.12))!important;

  /* Four-edge feather: stronger at left/right/bottom so no image box is visible. */
  -webkit-mask-image:radial-gradient(
    ellipse 76% 82% at 50% 47%,
    #000 0%,
    #000 61%,
    rgba(0,0,0,.92) 69%,
    rgba(0,0,0,.58) 78%,
    rgba(0,0,0,.18) 89%,
    transparent 100%
  )!important;
  mask-image:radial-gradient(
    ellipse 76% 82% at 50% 47%,
    #000 0%,
    #000 61%,
    rgba(0,0,0,.92) 69%,
    rgba(0,0,0,.58) 78%,
    rgba(0,0,0,.18) 89%,
    transparent 100%
  )!important;
}

/* 2. ICON TILES — solid premium pictograms like the supplied reference. */
.policy-icon{
  width:52px!important;
  height:52px!important;
  border-radius:12px!important;
  border:1px solid rgba(67,197,255,.58)!important;
  background:
    radial-gradient(circle at 28% 22%,rgba(91,115,255,.72),transparent 42%),
    linear-gradient(145deg,#3a35db 0%,#087be5 60%,#3d29c7 100%)!important;
  box-shadow:
    inset 0 0 18px rgba(77,232,255,.25),
    0 0 15px rgba(28,72,255,.24)!important;
}
.policy-icon::before{
  content:""!important;
  width:32px!important;
  height:32px!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  filter:drop-shadow(0 0 6px rgba(51,239,255,.55))!important;
}

/* Overview — filled document */
.legal-card:nth-child(1) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='7' y='4' width='18' height='24' rx='2.5' fill='%2356EFFF'/%3E%3Crect x='10' y='8' width='12' height='2.2' rx='1' fill='%231C4CCF'/%3E%3Crect x='10' y='13' width='12' height='2.2' rx='1' fill='%231C4CCF'/%3E%3Crect x='10' y='18' width='12' height='2.2' rx='1' fill='%231C4CCF'/%3E%3Crect x='10' y='23' width='8' height='2.2' rx='1' fill='%231C4CCF'/%3E%3C/svg%3E")!important;
}
/* Browser & game data — filled controller */
.legal-card:nth-child(2) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M8.2 11.5c-3.4 1.4-5.7 11.3-3.2 14.1 2.5 2.9 6.3-1.4 9-4.4h4c2.7 3 6.5 7.3 9 4.4 2.5-2.8.2-12.7-3.2-14.1-2.5-1-4.9.6-7.8.6s-5.3-1.6-7.8-.6Z' fill='%2358EEFF'/%3E%3Cpath d='M10 15v6M7 18h6' stroke='%231B47C8' stroke-width='2.3' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='16.5' r='1.8' fill='%23FF4EEA'/%3E%3Ccircle cx='25' cy='20' r='1.8' fill='%231B47C8'/%3E%3C/svg%3E")!important;
}
/* Community — filled person */
.legal-card:nth-child(3) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='10' r='6' fill='%2358EEFF'/%3E%3Cpath d='M5.5 28c.8-7.2 4.5-11 10.5-11s9.7 3.8 10.5 11Z' fill='%2358EEFF'/%3E%3C/svg%3E")!important;
}
/* Analytics — filled bars */
.legal-card:nth-child(4) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5' y='18' width='5' height='9' rx='1.5' fill='%2358EEFF'/%3E%3Crect x='13.5' y='11' width='5' height='16' rx='1.5' fill='%237E6BFF'/%3E%3Crect x='22' y='5' width='5' height='22' rx='1.5' fill='%2358EEFF'/%3E%3C/svg%3E")!important;
}
/* Advertising — filled megaphone */
.legal-card:nth-child(5) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 13.5v7h5l13 6.2V7.3L10 13.5Z' fill='%23F052E8'/%3E%3Cpath d='m10 21 2.6 6' stroke='%2358EEFF' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M26 12c2.5 2.5 2.5 5.5 0 8' stroke='%2358EEFF' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")!important;
}
/* Choices — filled gear */
.legal-card:nth-child(6) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m13.6 3 4.8 0 .9 3.2 2.1.9 2.9-1.6 3.4 3.4-1.6 2.9.9 2.1 3.2.9v4.8l-3.2.9-.9 2.1 1.6 2.9-3.4 3.4-2.9-1.6-2.1.9-.9 3.2h-4.8l-.9-3.2-2.1-.9-2.9 1.6-3.4-3.4 1.6-2.9-.9-2.1-3.2-.9v-4.8l3.2-.9.9-2.1-1.6-2.9 3.4-3.4 2.9 1.6 2.1-.9Z' fill='%2358EEFF'/%3E%3Ccircle cx='16' cy='16' r='5' fill='%231D49C9'/%3E%3C/svg%3E")!important;
}
/* Retention/security — shield + check */
.legal-card:nth-child(7) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 27 7v8c0 7.8-4.5 12.2-11 15C9.5 27.2 5 22.8 5 15V7Z' fill='%2358EEFF'/%3E%3Cpath d='m10.5 16 3.5 3.5 7.8-8.2' fill='none' stroke='%231C48C8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
/* Changes — filled refresh */
.legal-card:nth-child(8) .policy-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25.5 9V4.5L21 9a10.8 10.8 0 1 0 3.6 12.5' fill='none' stroke='%2358EEFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}

@media(min-width:981px){
  .legal-hero-art{height:245px!important}
  .legal-hero-art img{height:245px!important}
}