/* ============================================================================
   Likidera — FAQ page layer
   Consumes tokens/base/components. The hero is .page-head, #what-happens-next
   is .questions__layout wrapping the shared .steps, the closing card is
   .cta__card. This file carries the flat list and the cross-link row.

   The <details> collapse is native browser behaviour, not a .js rule, so every
   question opens with scripts off. Nothing here may hide an answer.
   ============================================================================ */

/* ═══════════════ The sixteen — one continuous list ═══════════════
   The accordion keeps its own surface so the rows read as one object, and the
   items lose theirs so they read as rows rather than as sixteen cards. */
.faq-list { display: block; }
.faq-list .accordion__item {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.faq-list .accordion__item:last-child { border-bottom: 0; }
.faq-list .accordion__question { width: 100%; padding-block: var(--space-4); }

/* An answer is a paragraph, not a label. The row runs the container — the hit
   target, the hairline and the + icon all span it — and the answer inside it is
   held to the body measure. A full-container answer would run about 145
   characters at 1440, twice the site's measure; a centred narrow column would
   put empty gutters on both sides, which the standing layout rule excludes.
   The space to the right of an open answer is bounded above and below by
   full-width rules: the shape of a block that moved on to a narrower element,
   not a hole. */
.faq-list .accordion__answer > * { max-width: 70ch; }


/* ═══════════════ The cross-link row ═══════════════
   Two across from 900: the only arrangement that holds the longest label,
   "Where it runs, and what protects the data", on one line without shortening
   it. Below 900 it stacks to one column. */
.faq-more {
  display: grid;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-7);
  justify-items: start;
}
@media (min-width: 900px) {
  .faq-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}