.newsletter-page{display:block}

.newsletter-hero{position:relative;padding-top:var(--space-6)}
.newsletter-hero-bg{position:absolute;inset:0;z-index:0}
.newsletter-hero-bg img{width:100%;height:100%;object-fit:cover;border-radius:0}
.newsletter-hero-content{position:relative;z-index:1;max-width:600px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}
.newsletter-hero-cta{display:flex;flex-direction:column;gap:var(--space-2);align-items:center}

.newsletter-benefits{align-items:stretch}

.newsletter-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:center}
.newsletter-style-text{max-width:620px}
.newsletter-style-preview img{border-radius:var(--radius-card)}

.newsletter-featured{position:relative;overflow:hidden;border-radius:var(--radius-card)}
.newsletter-featured img{width:100%;height:100%;object-fit:cover}
.newsletter-featured-content{position:absolute;bottom:0;left:0;padding:var(--space-4);max-width:500px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.6))}

.newsletter-wide-text{max-width:800px}
.newsletter-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}

.newsletter-center{text-align:center;max-width:700px;margin-inline:auto}

.newsletter-timeline{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap}
.timeline-item{background:var(--gradient-brand-cyan);color:#fff;padding:var(--space-3);border-radius:var(--radius-card);min-width:140px;text-align:center}

.newsletter-signup{max-width:420px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}
.newsletter-form{display:flex;flex-direction:column;gap:var(--space-2)}

.newsletter-faq{display:flex;flex-direction:column;gap:var(--space-2)}
.faq-item{border-radius:var(--radius-card);background:#fff;box-shadow:var(--shadow-soft);overflow:hidden}
.faq-question{width:100%;text-align:left;padding:var(--space-3);font-weight:600}
.faq-answer{display:none;padding:var(--space-3)}
.faq-item.active .faq-answer{display:block}

.newsletter-final-cta{padding-block:var(--space-5)}

@media(max-width:768px){
.newsletter-style-grid{grid-template-columns:1fr}
.newsletter-hero-content{max-width:100%}
}