.faq { padding-top: 112px; padding-bottom: 112px; display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }

.faq-head { flex: 1 1 300px; }
.faq-head a { font-weight: 600; }
.faq-title { font: 700 clamp(32px, 3.6vw, 48px)/1.05 var(--sans); letter-spacing: -1.6px; color: var(--title); }

.faq-list { flex: 2 1 560px; min-width: 0; max-width: 100%; border-top: 1px solid rgba(10, 10, 10, .1); }
.faq-list details { border-bottom: 1px solid rgba(10, 10, 10, .1); }
.faq-list summary { min-height: 72px; padding: 16px 0; display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none; font: 600 18px/1.4 var(--sans); color: var(--title); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 24px; height: 24px; margin-left: auto; background: linear-gradient(var(--brand), var(--brand)) center / 16px 2px no-repeat, linear-gradient(var(--brand), var(--brand)) center / 2px 16px no-repeat; transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { max-width: 680px; padding: 0 48px 24px 0; font: 400 16px/1.65 var(--sans); color: var(--text-2); text-wrap: pretty; }

.final { padding-bottom: 112px; }
.final-card { position: relative; overflow: hidden; border-radius: 32px; background: var(--dark); padding: clamp(40px, 6vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.final-card::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; height: 220%; background: radial-gradient(closest-side, rgba(220, 38, 38, .35), transparent); pointer-events: none; }
.final-copy { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.final-copy h2 { font: 700 clamp(36px, 4.6vw, 60px)/1 var(--sans); letter-spacing: -2px; color: var(--on-dark); }
.final-copy p { font: 400 18px/1.55 var(--sans); color: var(--on-dark-2); }
.final-cta { position: relative; height: 56px; background: #FFFFFF; color: var(--title); }
.final-cta:hover { background: var(--brand-soft); color: var(--title); }

@media (max-width: 479px) {
  .faq { padding-top: 72px; padding-bottom: 72px; }
  .faq-list p { padding-right: 0; }
  .final { padding-bottom: 72px; }
}