/* ===== PipTradeDex content pages (docs · brandkit · terms · privacy) · self-contained (dp-*) ===== */
:root{
  --dsp:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --bg:#070a0f; --bg2:#0a0e15; --panel:#10141d; --panel2:#151b26; --glass:rgba(19,24,33,.7);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --ink:#eef2f7; --mut:#9aa5b6; --dim:#616d80;
  --mint:#3ddc97; --mint2:#2bc684; --indigo:#7c8cff; --gold:#f5b544; --down:#ff5d73;
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.dp{margin:0;color:var(--ink);font-family:var(--body);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:radial-gradient(1100px 640px at 82% -8%,rgba(124,140,255,.12),transparent 60%),
             radial-gradient(900px 560px at 3% 4%,rgba(61,220,151,.08),transparent 58%),var(--bg)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--dsp);margin:0;letter-spacing:-.02em;text-wrap:balance;line-height:1.15}
.mono{font-family:var(--mono)}
::selection{background:rgba(61,220,151,.28)}

/* nav */
.dp-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:rgba(7,10,15,.82);border-bottom:1px solid var(--line)}
.dp-nav .in{max-width:1080px;margin:0 auto;padding:0 22px;height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dp-brand{display:flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:700;font-size:18px;letter-spacing:-.02em}
.dp-brand .dex{color:var(--mint)}
.dp-nav nav{display:flex;align-items:center;gap:4px}
.dp-nav nav a{color:var(--mut);font-size:14px;font-weight:500;padding:8px 12px;border-radius:9px;transition:.15s}
.dp-nav nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.dp-nav nav a.here{color:var(--ink)}
.dp-nav nav a.cta{background:linear-gradient(180deg,#46e6a2,#28c07f);color:#04170e;font-family:var(--dsp);font-weight:600;box-shadow:0 8px 22px rgba(61,220,151,.24)}
.dp-nav nav a.cta:hover{transform:translateY(-1px)}
@media(max-width:680px){.dp-nav nav a.hide-sm{display:none}}

.dp-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* hero */
.dp-hero{padding:60px 0 34px}
.dp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mint);background:rgba(61,220,151,.09);border:1px solid rgba(61,220,151,.24);padding:5px 12px;border-radius:100px;margin-bottom:18px}
.dp-hero h1{font-weight:800;font-size:clamp(30px,5.2vw,48px)}
.dp-hero .sub{color:var(--mut);font-size:17px;max-width:660px;margin:16px 0 0}
.dp-updated{margin-top:16px;color:var(--dim);font-family:var(--mono);font-size:12.5px}

/* generic card */
.dp-card{background:linear-gradient(180deg,rgba(19,24,33,.72),rgba(12,16,23,.7));border:1px solid var(--line);border-radius:18px;padding:24px;
  transform-style:preserve-3d;animation:dpFloat 10s ease-in-out infinite}
.dp-card:nth-child(2n){animation-duration:11.5s;animation-delay:.6s}
.dp-card:nth-child(3n){animation-duration:9s;animation-delay:1.1s}
@keyframes dpFloat{0%,100%{transform:perspective(1000px) translateY(0) rotateX(0deg)}50%{transform:perspective(1000px) translateY(-6px) rotateX(.8deg)}}

/* docs layout: sticky TOC + content */
.dp-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding:36px 0 80px;align-items:start}
.dp-toc{position:sticky;top:82px}
.dp-toc .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.dp-toc a{display:block;color:var(--mut);font-size:14px;padding:7px 12px;border-radius:9px;border-left:2px solid transparent;transition:.14s}
.dp-toc a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
.dp-toc a.on{color:var(--mint);border-left-color:var(--mint);background:rgba(61,220,151,.06)}

/* prose */
.dp-prose{max-width:720px}
.dp-prose section{padding:14px 0 26px;border-bottom:1px solid var(--line);scroll-margin-top:82px}
.dp-prose section:last-child{border-bottom:none}
.dp-prose h2{font-size:24px;font-weight:700;margin:8px 0 6px}
.dp-prose h2 .n{color:var(--mint);font-family:var(--mono);font-size:15px;margin-right:10px;font-weight:600}
.dp-prose h3{font-size:16px;font-weight:600;margin:22px 0 6px;color:var(--ink)}
.dp-prose p{color:var(--mut);margin:10px 0}
.dp-prose ul{margin:10px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.dp-prose li{position:relative;padding-left:26px;color:var(--mut)}
.dp-prose li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--mint);transform:rotate(45deg)}
.dp-prose li b,.dp-prose p b{color:var(--ink);font-weight:600}
.dp-prose a.link{color:var(--mint);border-bottom:1px solid rgba(61,220,151,.35)}
.dp-prose code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.dp-note{display:flex;gap:12px;background:rgba(124,140,255,.08);border:1px solid rgba(124,140,255,.24);border-radius:14px;padding:14px 16px;margin:16px 0}
.dp-note svg{flex:none;color:var(--indigo);margin-top:1px}
.dp-note p{margin:0;color:var(--mut);font-size:14px}
.dp-note b{color:var(--ink)}

/* brandkit blocks */
.dp-grid{display:grid;gap:18px}
.dp-grid.g2{grid-template-columns:repeat(2,1fr)}
.dp-grid.g3{grid-template-columns:repeat(3,1fr)}
.dp-grid.g4{grid-template-columns:repeat(4,1fr)}
.dp-sec{padding:34px 0}
.dp-sec .kicker{color:var(--mint);font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.dp-sec h2{font-size:26px;font-weight:700;margin:8px 0 4px}
.dp-sec .lead{color:var(--mut);max-width:640px;margin:0 0 22px}
.dp-logo-box{display:flex;align-items:center;justify-content:center;height:170px;border-radius:16px;border:1px solid var(--line)}
.dp-logo-box.dark{background:#070a0f}.dp-logo-box.light{background:#eef2f7}.dp-logo-box.panel{background:var(--panel)}
.dp-swatch{border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:.16s}
.dp-swatch:hover{transform:translateY(-3px);border-color:var(--line2)}
.dp-swatch .chip{height:86px}
.dp-swatch .meta{padding:12px 14px;background:var(--panel)}
.dp-swatch .meta b{display:block;font-family:var(--dsp);font-weight:600;font-size:14px}
.dp-swatch .meta span{font-family:var(--mono);font-size:12px;color:var(--mut);text-transform:uppercase}
.dp-copy{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:2px}
.dp-type{padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dp-type .fname{font-family:var(--mono);font-size:12px;color:var(--mint);text-transform:uppercase;letter-spacing:.06em}
.dp-type .samp{font-size:34px;margin:8px 0 4px;letter-spacing:-.02em}
.dp-type .role{color:var(--mut);font-size:13px}
.dp-dl{display:inline-flex;align-items:center;gap:8px;font-family:var(--dsp);font-weight:600;font-size:13.5px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:11px;padding:9px 14px;transition:.16s}
.dp-dl:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.dp-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dp-do,.dp-dont{border-radius:14px;padding:16px 18px;border:1px solid var(--line)}
.dp-do{background:rgba(61,220,151,.06);border-color:rgba(61,220,151,.22)}
.dp-dont{background:rgba(255,93,115,.06);border-color:rgba(255,93,115,.22)}
.dp-do h4,.dp-dont h4{font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dp-do h4{color:var(--mint)}.dp-dont h4{color:var(--down)}
.dp-do ul,.dp-dont ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--mut)}

/* CTA band */
.dp-band{margin:20px 0 60px;background:linear-gradient(120deg,rgba(61,220,151,.1),rgba(124,140,255,.08));border:1px solid var(--line2);
  border-radius:20px;padding:32px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dp-band h3{font-size:22px;font-weight:700}
.dp-band p{color:var(--mut);margin:6px 0 0;font-size:14.5px}
.dp-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--dsp);font-weight:600;font-size:14px;padding:12px 20px;border-radius:12px;
  background:linear-gradient(180deg,#46e6a2,#28c07f);color:#04170e;box-shadow:0 10px 28px rgba(61,220,151,.28);transition:.16s}
.dp-btn:hover{transform:translateY(-2px)}
.dp-btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink);box-shadow:none}

/* footer */
.dp-foot{border-top:1px solid var(--line);padding:30px 0 46px;margin-top:20px}
.dp-foot .in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dp-foot .tag{color:var(--dim);font-size:13px}
.dp-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.dp-foot nav a{color:var(--mut);font-size:14px}
.dp-foot nav a:hover{color:var(--mint)}

@media(max-width:820px){
  .dp-doc{grid-template-columns:1fr;gap:8px}
  .dp-toc{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .dp-toc .lbl{display:none}
  .dp-toc a{flex:none;border-left:none;white-space:nowrap;font-size:13px}
  .dp-toc a.on{border-left:none}
  .dp-grid.g2,.dp-grid.g3,.dp-grid.g4,.dp-dos{grid-template-columns:1fr}
  .dp-grid.g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){.dp-grid.g4{grid-template-columns:1fr}.dp-type .samp{font-size:26px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}