<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>GirlTREK Help Center – Preview (Minimal)</title>
<style>
:root{--gt-blue:#2628cc;--gt-orange:#fa8320;--gt-yellow:#ffff00;--gt-orange-strong:#ff4713;--gt-blue-bright:#0765ff;--gt-amber:#ffb607;--gt-lime:#e9f504;--gt-teal:#00adca;--gt-sand:#f0e6d0;--gt-ink:#333132;--gt-black:#000000;--gt-white:#ffffff;--surface-hero:#f6f7ff;--surface-1:#f9fafb;--surface-2:#f3f4f6;--bg:var(--gt-white);--text:var(--gt-ink);--muted:#6b7280;--card:#ffffff;--card-border:#e5e7eb;--ring:var(--gt-yellow);--link:var(--gt-blue);--link-hover:#fa8320;--btn:var(--gt-blue);--btn-hover:#1b1da4;--btn-primary-text:#ffffff;--chip-bg:#f8fafc;--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 10px 16px rgba(0,0,0,.08);--radius:16px;--radius-sm:10px}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.55}
h1,[class*="Docs"] h1{color:var(--gt-blue);font-weight:800;letter-spacing:-.01em}
.DocsSearchHero h1{font-size:clamp(2rem,4.5vw,3.25rem)}
h2{color:var(--gt-blue);font-weight:700}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover);text-decoration:underline}
:focus{outline:3px solid var(--ring)!important;outline-offset:2px}
/* Header */
.DocsHeader{background:var(--gt-blue)!important;color:var(--gt-white)!important;border-bottom:4px solid var(--gt-orange)}
.DocsHeader .container{min-height:96px;display:flex;align-items:center;justify-content:space-between}
.DocsHeader a{color:var(--gt-white)!important}
.DocsHeader a:hover{opacity:.9}
.DocsHeader .Logo img{max-height:54px}
/* Layout helpers */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/* Search Hero */
.DocsSearchHero{background:var(--surface-hero);padding:60px 20px;color:var(--gt-blue)}
.DocsSearchHero .title{color:var(--gt-blue)}
.DocsSearch-form{display:flex;gap:12px;max-width:760px;margin:24px auto 0}
.DocsSearch-input{flex:1 1 auto;background:var(--gt-white);border:1.5px solid var(--card-border);border-radius:10px;padding:14px 16px;font-size:1rem;box-shadow:var(--shadow-sm)}
.DocsSearch-input::placeholder{color:#9ca3af}.DocsSearch-input:focus{border-color:var(--gt-blue);box-shadow:0 0 0 4px rgba(38,40,204,.08)}
.DocsSearch-submit{background:var(--btn);color:var(--btn-primary-text);border-radius:10px;padding:12px 18px;border:none;font-weight:800;letter-spacing:.2px;transition:background .2s}
.DocsSearch-submit:hover{background:var(--btn-hover)}
/* Categories Grid */
.DocsHome-categories{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;max-width:1100px;margin:36px auto;padding:0 20px}
.DocsCategoryList-item{grid-column:span 4 / span 4;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:20px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;text-decoration:none;color:inherit}
.DocsCard-icon{width:56px;height:56px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;box-shadow:var(--shadow-sm);background:var(--gt-blue);color:#fff}
.DocsCard-icon span{font-size:28px;line-height:1}
.DocsCard-title{font-weight:800;color:var(--gt-ink);margin:2px 0 6px;font-size:1.05rem}
.DocsCard-desc{color:var(--muted);font-size:.92rem;min-height:38px}
.DocsCard-count{display:inline-block;margin-top:10px;font-size:.95rem;text-decoration:underline;color:var(--gt-blue)}
.DocsCategoryList-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--gt-blue);background:var(--surface-1)}
@media (max-width:1024px){.DocsCategoryList-item{grid-column:span 6 / span 6}}
@media (max-width:640px){.DocsHome-categories{gap:16px}.DocsCategoryList-item{grid-column:1 / -1}}
/* Popular */
.DocsHome-popular{max-width:1100px;margin:8px auto 48px;padding:0 20px}
.DocsHome-popular h2{margin:6px 0 12px;color:var(--gt-ink)}
.DocsPopular-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.DocsPopular-list a{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border-radius:8px}
.DocsPopular-list a:hover{background:var(--surface-1);text-decoration:none}
.DocsPopular-list a::before{content:"📄";font-size:1rem}
/* Footer */
.DocsFooter{background:var(--gt-blue);color:var(--gt-white);border-top:4px solid var(--gt-orange)}
.DocsFooter a{color:var(--gt-white)}.DocsFooter a:hover{color:var(--gt-yellow)}
</style>
</head>
<body>
  <!-- Header -->
  <header class="DocsHeader">
    <div class="container">
      <a href="#" class="Logo" style="display:flex;align-items:center;gap:10px;text-decoration:none">
        <span style="display:inline-block;background:#ffff00;color:#2628cc;font-weight:900;padding:10px 12px;border-radius:10px;line-height:1;font-size:18px">Girl</span>
        <span style="color:#fa8320;font-weight:900;letter-spacing:.5px;font-size:22px">TREK</span>
      </a>
      <nav><a href="#">Contact</a></nav>
    </div>
  </header>

  <!-- Search Hero -->
  <section class="DocsSearchHero">
    <div class="container">
      <h1>How can we help?</h1>
      <form class="DocsSearch-form" onsubmit="return false">
        <input class="DocsSearch-input" type="search" placeholder="Search in our Help Center" />
        <button class="DocsSearch-submit" type="submit">Search</button>
      </form>
    </div>
  </section>

  <!-- Categories -->
  <section class="DocsHome-categories">
    <!-- Cards with icons + short descriptions to match the reference -->
    <a class="DocsCategoryList-item" href="#">
      <div class="DocsCard-icon"><span>✅</span></div>
      <div class="DocsCard-title">Getting Started</div>
      <p class="DocsCard-desc">First steps, setup, and the basics for new sisters.</p>
      <div class="DocsCard-count">6 Articles</div>
    </a>
    <a class="DocsCategoryList-item" href="#">
      <div class="DocsCard-icon"><span>🔐</span></div>
      <div class="DocsCard-title">Account Management</div>
      <p class="DocsCard-desc">Update your profile, password, and notification settings.</p>
      <div class="DocsCard-count">6 Articles</div>
    </a>
    <a class="DocsCategoryList-item" href="#">
      <div class="DocsCard-icon"><span>💳</span></div>
      <div class="DocsCard-title">Payment & Billing</div>
      <p class="DocsCard-desc">Donations, receipts, refunds, and payment options.</p>
      <div class="DocsCard-count">6 Articles</div>
    </a>
    <a class="DocsCategoryList-item" href="#">
      <div class="DocsCard-icon"><span>👤</span></div>
      <div class="DocsCard-title">User Management</div>
      <p class="DocsCard-desc">Invitations, roles, and access for your crew.</p>
      <div class="DocsCard-count">6 Articles</div>
    </a>
    <a class="DocsCategoryList-item" href="#">
      <div class="DocsCard-icon"><span>⚙️</span></div>
      <div class="DocsCard-title">Integrations</div>
      <p class="DocsCard-desc">Connect GirlTREK tools with your favorite apps.</p>
      <div class="DocsCard-count">6 Articles</div>
    </a>
    <a class="DocsCategoryList-item" href="#">
      <div class="DocsCard-icon"><span>➕</span></div>
      <div class="DocsCard-title">Others</div>
      <p class="DocsCard-desc">Everything else—tips, troubleshooting, and more.</p>
      <div class="DocsCard-count">6 Articles</div>
    </a>
  </section>

  <!-- Popular Articles -->
  <section class="DocsHome-popular">
    <div class="container">
      <h2>Popular Questions</h2>
      <div class="DocsPopular-list">
        <a href="#">National Resource Toolkit: Support for Black Women's Mental Wellness</a>
        <a href="#">Self‑Care School 2025 | FAQS</a>
        <a href="#">Find a Walk</a>
        <a href="#">Mental Health First Aid Volunteers and Training FAQs</a>
        <a href="#">Self‑Care School | Study Guide</a>
        <a href="#">Off‑Season Self‑Care Toolkit</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="DocsFooter">
    <div class="container" style="display:flex;justify-content:space-between;align-items:center;padding:24px 0">
      <div>© GirlTREK</div>
      <div><a href="#">Privacy</a> &nbsp;•&nbsp; <a href="#">Terms</a></div>
    </div>
  </footer>
</body>
</html>
