/* ============================================================
   JungleCart — shared styles for legal / support pages
   Matches the design tokens of the marketing index.html.
   ============================================================ */
:root{
  --bg:#060610;
  --card:#0E0E1A;
  --card2:#141422;
  --white:#F0F0F8;
  --gray:#6A6A82;
  --gray2:#AAAAC0;
  --border2:rgba(255,255,255,0.07);
  --accent:#22C55E;
  --accent2:#4ade80;
  --accent-dim:rgba(34,197,94,0.10);
  --border:rgba(34,197,94,0.22);
  --orange:#ff6a00;
  --gold:#ffd84d;
  --jungle:#0d4f3c;
  --jungle2:#093b2d;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--accent);font-weight:inherit}
h1,h2,h3,h4,.display{font-family:'DM Sans',sans-serif;font-weight:600}

.eyebrow{
  font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:16px;display:block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 34px;border-radius:6px;font-weight:700;font-size:.88rem;
  font-family:'Inter',sans-serif;cursor:pointer;border:1px solid transparent;
  transition:all .25s ease;white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,106,0,0.35)}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--white)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:11px 22px;font-size:.8rem}

/* ---------- Nav (identical to index.html) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;height:72px;z-index:100;
  background:rgba(6,6,16,0.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border2);
  display:flex;align-items:center;padding:0 6%;
}
.nav-inner{
  max-width:1100px;margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-0.5px;
  display:flex;align-items:center;gap:8px;
}
.logo .leaf{font-size:1.25rem}
.logo .logo-img{width:34px;height:34px;border-radius:9px;object-fit:cover;display:block;box-shadow:0 2px 8px rgba(0,0,0,0.45)}
.logo .j{color:var(--accent)}
.logo .c{color:var(--white)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a.link{color:var(--gray2);font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a.link:hover{color:var(--white)}
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.hamburger span{width:24px;height:2px;background:var(--white);transition:.3s}
.mobile-menu{
  display:none;position:fixed;top:72px;left:0;right:0;z-index:99;
  background:rgba(6,6,16,0.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border2);padding:20px 6%;flex-direction:column;gap:6px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 4px;color:var(--gray2);font-size:.95rem;border-bottom:1px solid var(--border2)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu .btn{margin-top:12px;justify-content:center}

/* ---------- Legal hero header ---------- */
.legal-main{max-width:1100px;margin:0 auto;padding:0 6%}
.legal-hero{
  padding:130px 0 40px;border-bottom:1px solid var(--border2);margin-bottom:48px;
  position:relative;
}
.legal-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 400px at 15% -20%, rgba(34,197,94,0.10), transparent 60%);
}
.legal-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-1px;line-height:1.05;margin-bottom:16px}
.legal-sub{color:var(--gray2);font-size:1.05rem;line-height:1.7;max-width:640px}
.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:100px;font-size:.72rem;font-weight:700;
  letter-spacing:.5px;background:var(--accent-dim);border:1px solid var(--border);color:var(--accent2);
}
.pill.ghost{background:transparent;border:1px solid var(--border2);color:var(--gray2)}

/* ---------- Layout: sticky TOC + article ---------- */
.legal-layout{display:grid;grid-template-columns:236px 1fr;gap:56px;align-items:start;padding-bottom:40px}
.legal-toc{position:sticky;top:100px}
.legal-toc .toc-title{
  font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray);
  font-weight:700;margin-bottom:14px;
}
.legal-toc nav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border2)}
.legal-toc a{
  color:var(--gray2);font-size:.84rem;line-height:1.4;padding:7px 0 7px 16px;
  margin-left:-1px;border-left:2px solid transparent;transition:all .2s;
}
.legal-toc a:hover{color:var(--white)}
.legal-toc a.active{color:var(--accent2);border-left-color:var(--accent)}

/* ---------- Article prose ---------- */
.legal-article{max-width:760px;font-size:.98rem}
.legal-article section{padding-top:14px;margin-bottom:34px;scroll-margin-top:96px}
.legal-article h2{
  font-size:1.4rem;letter-spacing:-0.4px;margin-bottom:14px;line-height:1.2;
  display:flex;gap:10px;align-items:baseline;
}
.legal-article h2 .n{color:var(--accent);font-size:1rem;font-weight:700;font-family:'Inter',sans-serif}
.legal-article h3{font-size:1.08rem;margin:22px 0 8px;color:var(--white)}
.legal-article p{color:var(--gray2);line-height:1.8;margin-bottom:14px}
.legal-article ul,.legal-article ol{color:var(--gray2);line-height:1.8;margin:0 0 16px 0;padding-left:22px}
.legal-article li{margin-bottom:8px}
.legal-article li::marker{color:var(--accent)}
.legal-article a.inline{color:var(--accent2);border-bottom:1px solid rgba(74,222,128,0.35)}
.legal-article a.inline:hover{border-bottom-color:var(--accent2)}
.legal-article strong{color:var(--white);font-weight:700}

/* callouts */
.tldr{
  background:var(--accent-dim);border:1px solid var(--border);border-radius:14px;
  padding:22px 24px;margin-bottom:34px;
}
.tldr .k{
  font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);
  font-weight:700;margin-bottom:10px;display:block;
}
.tldr p{color:var(--gray2);margin:0;line-height:1.75}
.tldr p+p{margin-top:10px}

.callout{
  background:var(--card);border:1px solid var(--border2);border-left:3px solid var(--accent);
  border-radius:10px;padding:16px 20px;margin:0 0 20px;
}
.callout.warn{border-left-color:var(--orange)}
.callout.warn::before{content:"⚠️ "}
.callout p{margin:0;color:var(--gray2)}
.callout strong{color:var(--white)}

/* definition/data tables */
.legal-article table{
  width:100%;border-collapse:collapse;margin:6px 0 22px;font-size:.9rem;
  border:1px solid var(--border2);border-radius:10px;overflow:hidden;
}
.legal-article th,.legal-article td{
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--border2);vertical-align:top;
}
.legal-article th{background:var(--card2);color:var(--white);font-weight:700;font-size:.82rem;letter-spacing:.3px}
.legal-article tr:last-child td{border-bottom:none}
.legal-article td{color:var(--gray2)}

kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;
  background:var(--card2);border:1px solid var(--border2);border-radius:5px;padding:2px 7px;color:var(--white);
}

/* FAQ (support page) */
.faq{border-top:1px solid var(--border2)}
.faq details{border-bottom:1px solid var(--border2)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 2px;font-family:'DM Sans',sans-serif;
  font-weight:600;font-size:1.02rem;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--gray2);line-height:1.8;padding:0 2px 22px;margin:0}
.faq details p+p{padding-top:0;margin-top:-8px;margin-bottom:14px}

/* contact cards (support page) */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:8px 0 12px}
.contact-card{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:24px}
.contact-card .ic{font-size:1.5rem;margin-bottom:12px}
.contact-card h3{font-size:1.05rem;margin-bottom:6px}
.contact-card p{color:var(--gray2);font-size:.9rem;margin-bottom:10px;line-height:1.65}
.contact-card a{color:var(--accent2);font-size:.9rem;font-weight:600}

.back-top{display:inline-block;margin-top:8px;color:var(--gray2);font-size:.85rem}
.back-top:hover{color:var(--accent)}

/* editable placeholder the site owner should fill in before launch */
.ph{color:var(--gold);background:rgba(255,216,77,0.08);border-bottom:1px dashed rgba(255,216,77,0.5);padding:0 3px;border-radius:3px;font-style:normal}

/* ---------- Footer (identical to index.html) ---------- */
footer{padding:56px 6% 48px;border-top:1px solid var(--border2);text-align:center;margin-top:40px}
footer .flinks{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
footer .flinks a{color:var(--gray2);font-size:.88rem;transition:color .2s}
footer .flinks a:hover{color:var(--accent)}
footer .contact{color:var(--accent);font-size:.9rem;margin-bottom:14px}
footer .disclaimer{color:var(--gray);font-size:.78rem;line-height:1.7;max-width:560px;margin:0 auto 10px}
footer .copy{color:var(--gray);font-size:.78rem}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .legal-layout{grid-template-columns:1fr;gap:0}
  .legal-toc{display:none}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .legal-hero{padding:110px 0 32px}
}