/* Static content pages (support, privacy policy, terms of service, prepaid
   info) - CLAUDE.md §15's own 820-860px "docs" container width, distinct
   from the marketing (1200px) and client-area (1000px) widths landing.css/
   client.css already define. Shares header.site/footer.site chrome from
   landing.css - only the content column between them is new here. */

.docs-wrap{max-width:var(--maxw-docs);margin:0 auto;padding:64px 32px 96px}

.docs-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:9px;margin-bottom:16px}
.docs-wrap h1{font-size:40px;line-height:1.05;letter-spacing:-.02em;margin-bottom:12px}
.docs-lede{font-size:16.5px;line-height:1.6;color:var(--body);max-width:600px;margin:0 0 18px}
.docs-updated{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:36px}

/* Cross-links between the four static pages - lets a visitor who landed on
   one (e.g. via search) discover the others without going back through the
   marketing site. */
.docs-pillnav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.docs-pillnav a{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);color:var(--body);font-size:13.5px;font-weight:600;text-decoration:none}
.docs-pillnav a.active{background:var(--green);border-color:var(--green);color:var(--ink-on-dark)}
.docs-pillnav a:hover:not(.active){border-color:var(--gold);color:var(--ink)}

.docs-content h2{font-size:23px;letter-spacing:-.01em;margin:40px 0 12px}
.docs-content h2:first-child{margin-top:0}
.docs-content h3{font-size:16.5px;margin:26px 0 8px}
.docs-content p{font-size:15.5px;line-height:1.7;color:var(--body);margin:0 0 16px}
.docs-content ul,.docs-content ol{margin:0 0 16px;padding-left:22px;color:var(--body);font-size:15.5px;line-height:1.7}
.docs-content li{margin-bottom:6px}
.docs-content a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.docs-content strong{color:var(--ink)}

/* Support/prepaid contact cards - email + WhatsApp, same visual weight as
   .feature-card (landing.css) so these pages feel like the same product,
   not a bolted-on legal-page template. */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 40px}
.contact-card{background:var(--paper);border:1px solid var(--border-soft);border-radius:16px;padding:26px}
.contact-card .mark{width:40px;height:40px;border-radius:10px;background:var(--green);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:16px}
.contact-card h3{font-size:16px;margin-bottom:6px}
.contact-card p{font-size:13.5px;color:var(--body);margin:0 0 16px;line-height:1.5}
.contact-card a.btn{width:100%;text-decoration:none}

/* Prepaid handoff cities. */
.city-grid{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 32px}
.city-chip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--border-soft);border-radius:12px;padding:12px 18px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
.city-chip i{color:var(--gold-deep);font-size:13px}

@media (max-width:640px){
  .docs-wrap{padding:40px 20px 64px}
  .docs-wrap h1{font-size:29px}
  .contact-grid{grid-template-columns:1fr}
}