/* ═══════════════════════════════════════════════════════════════
   Pickly — shared styles for content/legal pages
   (landing page has its own inline styles; this keeps the
    sub-pages consistent and easy to maintain in one place)
══════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0a1f; --bg2:#11112e; --sf:rgba(255,255,255,.05); --sfh:rgba(255,255,255,.09);
  --bd:rgba(255,255,255,.1); --tx:#f4f4fb; --mt:#9a9ab5;
  --pk:#FF2060; --or:#FF8C00; --yl:#FFD600; --cy:#00E5FF; --pu:#B061FF; --gr:#00E676;
  --rs:16px; --rl:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',sans-serif;background:var(--bg);color:var(--tx);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx::before{
  content:'';position:absolute;inset:-20%;
  background:
    radial-gradient(40% 50% at 12% 8%,rgba(176,97,255,.16),transparent 70%),
    radial-gradient(45% 55% at 88% 14%,rgba(255,32,96,.14),transparent 70%);
}
.wrap{position:relative;z-index:2;max-width:840px;margin:0 auto;padding:0 22px}

/* Nav (shared) */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,10,31,.72);border-bottom:1px solid var(--bd)}
.nav-in{max-width:1180px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand-mark{width:38px;height:38px;flex-shrink:0}
.brand-name{font-family:'Fredoka',sans-serif;font-weight:700;font-size:25px;letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--pk),var(--or) 55%,var(--yl));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--mt);text-decoration:none;font-weight:700;font-size:14.5px;transition:color .15s}
.nav-links a:hover{color:var(--tx)}
@media(max-width:640px){.nav-links{display:none}}

/* Page header */
.page-head{padding:60px 0 26px;text-align:center}
.page-head h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(34px,6vw,54px);letter-spacing:-1px;margin-bottom:10px}
.page-head .upd{color:var(--mt);font-size:14px;font-weight:700}

/* Legal / article body */
.doc{padding:16px 0 40px}
.doc h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:25px;margin:38px 0 12px;letter-spacing:-.4px}
.doc h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:19px;margin:24px 0 8px}
.doc p{color:var(--mt);font-size:16px;font-weight:600;margin-bottom:16px}
.doc ul{color:var(--mt);font-size:16px;font-weight:600;margin:0 0 16px 22px}
.doc li{margin-bottom:8px}
.doc a{color:var(--cy);text-decoration:none;font-weight:700}
.doc a:hover{text-decoration:underline}
.doc strong{color:var(--tx)}
.callout{background:var(--sf);border:1px solid var(--bd);border-left:3px solid var(--or);border-radius:var(--rs);padding:18px 22px;margin:22px 0}
.callout p{margin:0}

/* Buttons */
.btn{font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;padding:14px 32px;border-radius:100px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:transform .2s,box-shadow .2s}
.btn-primary{background:linear-gradient(135deg,var(--pk),var(--or));color:#fff;box-shadow:0 8px 32px rgba(255,32,96,.42)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 42px rgba(255,32,96,.55)}
.btn-ghost{background:var(--sf);color:var(--tx);border:1.5px solid var(--bd)}
.btn-ghost:hover{background:var(--sfh)}

/* Footer (shared) */
footer{border-top:1px solid var(--bd);margin-top:60px;padding:48px 0 60px}
.foot-in{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-col h5{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;margin-bottom:14px;color:var(--tx)}
.foot-col a{display:block;color:var(--mt);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:9px;transition:color .15s}
.foot-col a:hover{color:var(--tx)}
.foot-brand{max-width:260px}
.foot-brand p{color:var(--mt);font-size:14px;font-weight:600;margin-top:12px}
.copy{max-width:1180px;margin:40px auto 0;padding:24px 22px 0;border-top:1px solid var(--bd);text-align:center;color:var(--mt);font-size:13px;font-weight:600}