/* FAQ: 2-column teaser grid (sales) + accordion (FAQ page). */

.faq-teaser__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-7);
  max-width: var(--container-lg);
  margin: 0 auto var(--space-5);
}

/* The question is a HEADING, not an accent: black, on the type scale, and at
   the size a sub-heading gets. It used to be 1.5rem in the brand purple, which
   read as a link and made a wall of purple down the page. Purple is a
   highlight here — it stays on the glyph and on real links inside the answer. */
.faq-teaser__item dt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

/* The glyph keeps its OWN 1em box. Theme icons are CSS masks sized 1em and
   filled with currentColor, so setting a height here stretches the mask until
   the icon is unreadable — the same mistake as the About page's icon ring.
   It is nudged down instead, to sit on the question's first line. */
.faq-teaser__item dt i {
  color: var(--color-primary);
  flex: none;
  font-size: 1.125rem;
  margin-top: 0.22em;
}

.faq-teaser__item dd {
  margin: 0 0 0 calc(1.125rem + var(--space-2));
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text);
}

.faq-teaser__more {
  text-align: center;
  margin: 0;
}

/* Button a touch larger so it holds its own against the block (em padding
   grows with the font-size). */
.faq-teaser__more .btn {
  font-size: var(--text-btn);
  padding: 0.85em 2.6em;
}

/* accordion variant (FAQ page) — a PORT of the design
   (.local/simoptions.com/FAQ.dc.html). Declarations are the design's, verbatim;
   the brand hex resolves through the token rather than being restated. Our
   markup uses native <details>, which is the design's button + panel with the
   open state handled by the browser instead of JS. */
.faq-list {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.faq-list__group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.faq-list__group-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tint-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.faq-list__group-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  margin: 0;
}

.faq-list__group > details + details { margin-top: 12px; }

.faq-list details {
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  box-shadow: 1px 4px 15px 0 rgba(0, 0, 0, .05);
  overflow: hidden;
}

.faq-list summary {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  color: var(--color-text);
}

.faq-list summary i {
  color: var(--color-primary);
  font-size: var(--text-2xl);
  flex-shrink: 0;
  margin-left: auto;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list details[open] summary i { transform: rotate(180deg); }

.faq-list__answer {
  padding: 0 24px 22px;
  font-size: var(--text-base);
  color: var(--ink-600);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .faq-list { gap: 32px; }
  .faq-list__group-title { font-size: var(--text-xl); }
  .faq-list summary { padding: 16px 18px; font-size: var(--text-base); }
  .faq-list__answer { padding: 0 18px 18px; }
}

@media (max-width: 767px) {
  .faq-teaser__grid {
    grid-template-columns: 1fr;
  }
}