.faq-page{}

.faq-hero-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:var(--space-6);
  align-items:center;
}

.faq-hero-text{max-width:650px}
.faq-hero-text p{max-width:60ch}

.faq-hero-image img{border-radius:var(--radius-md);width:100%}

.faq-cta{margin-top:var(--space-3)}

.faq-narrow{
  max-width:800px;
  margin-inline:auto;
  text-align:center;
}

.faq-accordion{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-top:var(--space-4);
}

.faq-item{
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#fff;
}

.faq-question{
  width:100%;
  text-align:left;
  padding:var(--space-4);
  font-weight:600;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  padding-inline:var(--space-4);
  transition:max-height .3s ease,opacity .3s ease;
  opacity:0;
}

.faq-item.active .faq-answer{
  max-height:500px;
  opacity:1;
  padding-bottom:var(--space-4);
}

.faq-visual-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:var(--space-6);
  align-items:center;
}

.faq-visual-text p{max-width:65ch}

.faq-visual-image img{
  border-radius:var(--radius-md);
  width:100%;
}

.faq-disclaimer-box{
  max-width:700px;
  margin-inline:auto;
  border:1px solid var(--color-accent-gold);
  padding:var(--space-5);
  border-radius:var(--radius-md);
  text-align:center;
}

.faq-cta-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-6);
  align-items:center;
}

.faq-cta-text{
  max-width:600px;
  margin-inline:auto;
  text-align:center;
}

.faq-cta-image img{border-radius:var(--radius-md);width:100%}

@media(max-width:900px){
  .faq-hero-grid,
  .faq-visual-grid,
  .faq-cta-wrap{
    grid-template-columns:1fr;
  }

  .faq-hero-text,
  .faq-visual-text,
  .faq-cta-text{
    max-width:100%;
  }
}

@media(max-width:600px){
  .faq-hero-grid,.faq-visual-grid,.faq-cta-wrap{gap:var(--space-4)}
  .faq-hero-text{text-align:center}
  .faq-question{padding:var(--space-3);line-height:1.4}
  .faq-answer{padding-inline:var(--space-3)}
  .faq-item.active .faq-answer{padding-bottom:var(--space-3)}
  .faq-disclaimer-box{padding:var(--space-3)}
}