/* ============================================================
   PROMPTBITE — Document pages (Support, Privacy)
   Lightweight, no-JS layout for the legal/help pages.
   Reuses tokens.css for fonts + the color system.
   Discipline holds: green = the brand mark only; everything
   else is black, white or glass.
   ============================================================ */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body{ background:var(--bg); }
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink-0); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--savings); color:#fff; }

.wrap{ width:100%; max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; }
.nav-inner{
  display:flex; align-items:center; gap:18px;
  max-width:1240px; margin:0 auto; padding:16px 24px;
  background:rgba(8,8,10,.72); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
}
.nav-brand{ font-size:20px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.nav-brand i{ color:var(--savings-bright); font-style:normal; }
.nav-back{ margin-left:auto; font-size:14px; font-weight:500; color:var(--ink-60); transition:color .18s; }
.nav-back:hover{ color:#fff; }

/* ---------- header ---------- */
.doc-head{ padding:clamp(56px,9vw,104px) 0 clamp(28px,4vw,44px); }
.doc-eyebrow{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--savings-bright); margin-bottom:18px;
}
.doc-title{
  font-weight:800; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(36px,5.4vw,56px); color:#fff;
}
.doc-sub{ margin-top:18px; font-size:18px; line-height:1.55; color:var(--ink-60); max-width:34em; }
.doc-meta{ margin-top:22px; font-size:14px; color:var(--ink-40); }

/* ---------- body content ---------- */
.doc-body{ padding-bottom:clamp(72px,10vw,128px); }
.doc-body h2{
  font-size:clamp(22px,2.6vw,28px); font-weight:800; letter-spacing:-.02em;
  color:#fff; margin:48px 0 8px;
}
.doc-body h2:first-child{ margin-top:0; }
.doc-body h3{ font-size:18px; font-weight:700; color:#fff; margin:28px 0 6px; }
.doc-body p{ color:var(--ink-60); margin:12px 0; }
.doc-body strong{ color:#fff; font-weight:600; }
.doc-body a.inline{ color:var(--savings-bright); text-decoration:underline; text-underline-offset:3px; }
.doc-body ul{ margin:12px 0; padding-left:22px; color:var(--ink-60); }
.doc-body li{ margin:8px 0; }
.doc-body li::marker{ color:var(--ink-40); }
.doc-divider{ height:1px; background:var(--glass-border); border:0; margin:44px 0; }

/* ---------- FAQ accordion (Support) ---------- */
.faq-cat{ margin-top:52px; }
.faq-cat-label{
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-40); margin-bottom:14px;
}
details.faq{
  border:1px solid var(--glass-border); border-radius:var(--r-md);
  background:var(--glass-fill); margin:10px 0; overflow:hidden;
  transition:border-color .18s, background .18s;
}
details.faq[open]{ border-color:var(--glass-border-strong); background:var(--glass-fill-2); }
details.faq summary{
  list-style:none; cursor:pointer; padding:18px 20px;
  font-size:16px; font-weight:600; color:#fff;
  display:flex; align-items:center; gap:14px;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{
  content:""; margin-left:auto; flex:none; width:11px; height:11px;
  border-right:2px solid var(--ink-40); border-bottom:2px solid var(--ink-40);
  transform:rotate(45deg); transition:transform .2s var(--ease-out);
}
details.faq[open] summary::after{ transform:rotate(-135deg); }
details.faq .faq-a{ padding:0 20px 20px; color:var(--ink-60); font-size:15.5px; line-height:1.62; }
details.faq .faq-a p{ margin:0 0 10px; }
details.faq .faq-a p:last-child{ margin-bottom:0; }
details.faq .faq-a strong{ color:#fff; font-weight:600; }
details.faq .faq-a ul{ margin:6px 0; padding-left:20px; }

/* ---------- contact card ---------- */
.contact-card{
  margin:44px 0 8px; padding:32px;
  border:1px solid var(--glass-border-strong); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.contact-card h2{ margin:0 0 6px; font-size:22px; }
.contact-card p{ color:var(--ink-60); margin:0 0 18px; }
.contact-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:var(--r-pill);
  background:#fff; color:#000; font-weight:700; font-size:15px;
  transition:transform .16s var(--ease-out);
}
.contact-btn:hover{ transform:translateY(-1px); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--glass-border); padding:40px 0; }
.foot-inner{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
}
.foot-wm{ font-size:18px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.foot-wm i{ color:var(--savings-bright); font-style:normal; }
.foot-links{ display:flex; gap:22px; margin-left:auto; }
.foot-links a{ font-size:14px; color:var(--ink-60); transition:color .18s; }
.foot-links a:hover{ color:#fff; }
.foot-copy{ width:100%; font-size:13px; color:var(--ink-40); }

@media (max-width:560px){
  .foot-links{ margin-left:0; width:100%; }
}