FAQ 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="faq_component">
  <div class="faq_inner">
    <div class="faq_header">
      <div class="faq_chip">Good to know</div>
      <h2 class="faq_title">Questions? We've got answers.</h2>
      <p class="faq_subtitle">Everything you might wonder about before jumping in. Still stuck? Our team replies in minutes.</p>
    </div>
    <ul class="faq_grid">
      <li class="faq_card">
        <div class="faq_badge">01</div>
        <h3 class="faq_question">How fast can I get started?</h3>
        <p class="faq_answer">Under two minutes. Sign up with email or Google, pick a template, and you're live — no card, no setup calls, no fine print.</p>
      </li>
      <li class="faq_card">
        <div class="faq_badge">02</div>
        <h3 class="faq_question">Can I cancel anytime?</h3>
        <p class="faq_answer">Always. There are no contracts and no cancellation fees. Downgrade or leave in one click and keep access until your period ends.</p>
      </li>
      <li class="faq_card">
        <div class="faq_badge">03</div>
        <h3 class="faq_question">Do you offer a free plan?</h3>
        <p class="faq_answer">Yep — free forever for solo creators, with generous limits. Upgrade only when your projects and team start to grow.</p>
      </li>
      <li class="faq_card">
        <div class="faq_badge">04</div>
        <h3 class="faq_question">Is my data safe with you?</h3>
        <p class="faq_answer">Rock solid. Everything is encrypted in transit and at rest, backed up daily, and never sold. You own your work, full stop.</p>
      </li>
    </ul>
    <div class="faq_footer">
      <p class="faq_footer_text">Still have a question rattling around?</p>
      <a class="faq_footer_button" href="#contact">Chat with us →</a>
    </div>
  </div>
</section>

<style>
.faq_component {
  width:100%;
  background:#fff9f2;
  padding:96px 24px;
  font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;
  box-sizing:border-box;
}

.faq_inner {
  max-width:1080px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:56px;
}

.faq_header {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:20px;
}

.faq_chip {
  display:inline-flex;
  align-items:center;
  background:#ff5a5f;
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  border-radius:999px;
  padding:8px 18px;
}

.faq_title {
  color:#1a1614;
  font-size:46px;
  line-height:1.05;
  font-weight:800;
  max-width:620px;
  margin:0;
  letter-spacing:-0.02em;
}

.faq_subtitle {
  color:#6b625c;
  font-size:18px;
  line-height:1.5;
  max-width:480px;
  margin:0;
}

.faq_grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  list-style:none;
  padding:0;
  margin:0;
}

.faq_card {
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#ffffff;
  border-radius:28px;
  padding:36px;
  border:2px solid #1a1614;
  box-shadow:6px 6px 0 #ff5a5f;
  box-sizing:border-box;
}

.faq_badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  background:#fff1ec;
  color:#ff5a5f;
  font-size:18px;
  font-weight:800;
}

.faq_question {
  color:#1a1614;
  font-size:21px;
  font-weight:700;
  line-height:1.25;
  margin:0;
}

.faq_answer {
  color:#6b625c;
  font-size:15px;
  line-height:1.6;
  margin:0;
}

.faq_footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.faq_footer_text {
  color:#1a1614;
  font-size:16px;
  font-weight:600;
  margin:0;
}

.faq_footer_button {
  display:inline-flex;
  align-items:center;
  background:#ff5a5f;
  color:#ffffff;
  font-size:15px;
  font-weight:700;
  border-radius:999px;
  padding:12px 26px;
  border:2px solid #1a1614;
  text-decoration:none;
  box-shadow:4px 4px 0 #1a1614;
}
</style>