/* ============================================================
   PlayBox — shared styles for legal pages
   (privacy-policy.html · terms.html · refund-policy.html)
   ============================================================ */
:root{
  --paper:#F6F6F2; --surface:#FFFFFF; --surface-2:#FBFBF8;
  --ink:#13151E; --muted:#63677A; --line:#E6E6DE;
  --accent:#1B44FF; --accent-deep:#0C2BB8; --accent-soft:rgba(27,68,255,.07);
  --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'Space Mono',monospace;
  --maxw:1000px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:var(--accent);color:#fff;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(246,246,242,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:15px 28px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--ink);display:flex;align-items:center;justify-content:center;}
.brand-mark span{width:11px;height:11px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px rgba(27,68,255,.25);}
.brand-name{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);}
.brand-name b{color:var(--accent);}
.brand:hover{text-decoration:none;}
.nav-back{font-size:14px;font-weight:600;color:var(--ink);padding:9px 16px;border:1px solid var(--line);border-radius:9px;transition:border-color .18s,color .18s;}
.nav-back:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}

/* HEADER */
.doc-head{padding:64px 0 40px;border-bottom:1px solid var(--line);}
.doc-head .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;}
.doc-head .eyebrow::before{content:'';width:26px;height:1px;background:var(--accent);}
.doc-head h1{font-size:clamp(34px,5vw,52px);margin-bottom:16px;}
.updated{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);padding:6px 13px;border-radius:100px;}
.updated .d{width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* LAYOUT: content + sticky TOC */
.doc-body{display:grid;grid-template-columns:1fr 232px;gap:56px;padding:48px 0 40px;align-items:start;}
.doc-main{min-width:0;}
.intro{font-size:17px;color:var(--muted);margin-bottom:14px;}

.toc{position:sticky;top:96px;font-size:13.5px;}
.toc h4{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.toc a{display:block;color:var(--muted);padding:6px 0 6px 14px;border-left:2px solid var(--line);transition:color .18s,border-color .18s;}
.toc a:hover{color:var(--accent);border-color:var(--accent);text-decoration:none;}

/* SECTIONS */
section.s{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:90px;}
section.s:first-of-type{border-top:none;padding-top:6px;}
section.s h2{font-size:22px;margin-bottom:14px;display:flex;gap:12px;align-items:baseline;}
section.s h2 .n{font-family:var(--mono);font-size:14px;color:var(--accent);font-weight:700;flex-shrink:0;}
section.s h3{font-size:16px;margin:18px 0 8px;}
section.s p{margin-bottom:14px;color:#2b2e3a;}
section.s ul{list-style:none;margin:4px 0 16px;}
section.s ul li{position:relative;padding-left:22px;margin-bottom:9px;color:#2b2e3a;}
section.s ul li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:2px;background:var(--accent);}
section.s ul li b{color:var(--ink);}
.mono{font-family:var(--mono);font-size:.92em;background:var(--accent-soft);color:var(--accent-deep);padding:2px 7px;border-radius:5px;}

/* CALLOUT */
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:18px 22px;margin:6px 0 18px;}
.callout p{margin:0;font-size:14.5px;color:var(--muted);}
.callout p b{color:var(--ink);}

/* CONTACT BLOCK */
.contact-box{background:var(--ink);color:#EDEDF2;border-radius:16px;padding:30px 32px;margin-top:14px;}
.contact-box h3{color:#fff;font-size:19px;margin-bottom:8px;}
.contact-box p{color:#A6A9B6;font-size:14.5px;margin-bottom:14px;}
.contact-box .mail{font-family:var(--mono);font-size:16px;font-weight:700;}
.contact-box .mail a{color:#8FA6FF;}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:20px;}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
footer .legal{display:flex;gap:20px;}
footer .legal a{color:var(--ink);}

@media(max-width:820px){
  .doc-body{grid-template-columns:1fr;gap:0;}
  .toc{display:none;}
}
@media(max-width:560px){
  .wrap{padding:0 20px;}
  .doc-head{padding:44px 0 32px;}
  footer .wrap{flex-direction:column;text-align:center;}
}