/* blz_faq — asymmetric FAQ band with a native <details> accordion, ported
   from editorial-tech-green.html (FAQ block + the faq-grid collapse from the
   RESPONSIVE block), tokens → --blz-*. Design inner class names kept for
   pixel/DOM parity, scoped under the module root (.blz-faq) because .faq is
   generic. The #fff on the open +/× toggle is text-on-copper, not a card
   background — it stays literal. */

.blz-faq .faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.blz-faq .faq { border-top: 1px solid var(--blz-line); }
.blz-faq .faq details { border-bottom: 1px solid var(--blz-line); }
.blz-faq .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; font-weight: 600; font-size: 16.5px; transition: color .3s; }
.blz-faq .faq summary::-webkit-details-marker { display: none; }
.blz-faq .faq summary:hover { color: var(--blz-accent); }
.blz-faq .faq summary .pl { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--blz-line); display: flex; align-items: center; justify-content: center; flex: none; font-weight: 400; font-size: 16px; color: var(--blz-accent-2); transition: transform .35s, background .3s, color .3s; }
.blz-faq .faq details[open] summary .pl { transform: rotate(45deg); background: var(--blz-accent-2); color: #fff; border-color: var(--blz-accent-2); }
.blz-faq .faq .a { padding: 0 44px 24px 4px; font-size: 14.5px; color: var(--blz-mute); line-height: 1.75; }

/* the design sets this inline on the intro paragraph; a class rule keeps
   render markup style-free */
.blz-faq .faq-grid .blz-sec-side { margin-top: 20px; }
.blz-faq .faq-cta { margin-top: 26px; }

@media (max-width: 900px) {
	.blz-faq .faq-grid { grid-template-columns: 1fr; gap: 44px; }
}