/* =========================================================
   FAQ + CTA — Editorial, Calm, Operational
========================================================= */

.faq-section {
   position: relative;
}

.faq-list {
   margin-top: 2.5rem;
   display: grid;
   gap: 1.5rem;
}

.faq-item {
   padding: 2.25rem 1rem;
   border-top: 1px solid var(--border-primary);
   transition: transform var(--transition-medium), background var(--transition-medium);
}

.faq-item:hover {
   transform: translateX(6px);
}

.faq-q {
   display: block;
   width: 100%;
   text-align: left;
   background: none;
   border: none;
   font-family: var(--font-display);
   font-size: clamp(1.35rem, 2.8vw, 1.8rem);
   line-height: 1.1;
   font-weight: 600;
   color: var(--text-primary);
   padding: 0;
   cursor: pointer;
   transition: color var(--transition-medium);
}

.faq-q[aria-expanded="false"] { color: var(--text-primary); }
.faq-q[aria-expanded="true"] { color: var(--text-primary); }

.faq-a {
   margin-top: 1rem;
   color: var(--text-secondary);
   font-size: 1.05rem;
   line-height: 1.9;
}

/* CTA Section — small, calm, centered */
.cta-section {
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent 50%);
   padding-block: 10vh;
}

.cta-content {
   text-align: center;
   max-width: 880px;
}

.cta-title {
   font-size: clamp(2rem, 4.4vw, 3.6rem);
   line-height: 1.03;
   margin-top: 0.6rem;
}

.cta-description {
   margin-top: 1.25rem;
   color: var(--text-secondary);
   max-width: 60ch;
   margin-left: auto;
   margin-right: auto;
}

.cta-actions {
   display: flex;
   gap: 1rem;
   justify-content: center;
   margin-top: 2rem;
}

.btn-primary {
   background: var(--accent-primary);
   color: #fff;
   padding: 12px 20px;
   border-radius: var(--radius-full);
   box-shadow: var(--shadow-soft);
}

.btn-secondary {
   background: var(--surface-primary);
   border: 1px solid var(--border-primary);
   color: var(--text-primary);
   padding: 11px 18px;
   border-radius: var(--radius-full);
}

@media (max-width: 768px) {
   .faq-list { gap: 1rem; }
   .faq-item { padding: 1.6rem 0.6rem; }
   .faq-q { font-size: clamp(1rem, 5.6vw, 1.25rem); }
   .cta-content { padding-inline: 12px; }
   .cta-actions { flex-direction: column; }
   .btn-primary, .btn-secondary { width: 100%; }
}