/*
 * faq.html — page-specific modules.
 *
 * The page sits on the default dark surface and reuses the shared chrome
 * (<site-header>/<site-footer>), the industry-hero content classes
 * (.hero__content--industry / .hero__heading--industry / .hero__subheading),
 * the .bracket corner primitive and the .book-demo CTA. New to this page:
 *   .faq-eyebrow — square + mono label section eyebrow (mirrors .about-eyebrow)
 *   .hero--faq   — compact, left-aligned dark hero (no background image)
 *   .faq         — the FAQ accordion section + <faq-list> rows
 */

/* The <faq-list> host adds no box; its .faq__* children flow in the section. */
faq-list { display: contents; }

/* ── Section eyebrow — filled square + mono label ──────────────────────────── */
.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 26px;
}
.faq-eyebrow::before {
  content: '';
  width: 9px;
  height: 9px;
  background: currentColor;
  flex: none;
}

/* ── Hero ───────────────────────────────────────────────────────────────────
 * Compact and left-aligned (the page is content-led, so no full-height hero).
 * Reuses the industry hero's content/heading/subheading classes; only the
 * modifier's own spacing is new. The base .hero rule supplies margin-top + the
 * bottom full-bleed rule + corner-bracket positioning.
 */
.hero--faq {
  padding-top: 92px;
  padding-bottom: 76px;
}
/* Centre the hero block (overrides the left-aligned industry content classes). */
.hero--faq .hero__content--industry {
  align-items: center;
  text-align: center;
}
.hero--faq .hero__subheading {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ── FAQ accordion ──────────────────────────────────────────────────────────
 * Inset to --content-edge so the rows line up with the hero text. Each row is a
 * native <details>; a 1px rule separates rows (top on every item, bottom on the
 * last) to read as a continuous list.
 */
.faq {
  padding: 80px var(--content-edge) 120px;
}
/* Intro row: prompt text on the left, a Contact-us button pushed to the right. */
.faq__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 48px;
}
.faq__intro-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: #A2A2A2;
  margin: 0;
  max-width: 600px;
}
.faq__intro .btn { flex: none; }

.faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.faq__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* The clickable question row. Grid: mono index | question | chevron. */
.faq__summary {
  list-style: none;            /* hide the default disclosure triangle … */
  cursor: pointer;
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: start;
  gap: 8px;
  padding: 26px 4px 26px 0;
  transition: color 0.18s ease;
}
.faq__summary::-webkit-details-marker { display: none; }  /* … incl. Safari */

.faq__num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--orange);
  padding-top: 3px;
}

.faq__question {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--white);
}

/* Chevron sits to the right and rotates when the row opens. */
.faq__chevron {
  color: var(--orange);
  margin-top: 9px;
  justify-self: end;
  transition: transform 0.25s ease;
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

/* Hover affordance on the whole row. */
.faq__summary:hover .faq__question { color: var(--orange); }
.faq__summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Answer — aligned under the question column (skips the index gutter). */
.faq__answer {
  padding: 0 28px 30px 64px;
  max-width: 880px;
}
.faq__answer p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: #A2A2A2;
  margin: 0 0 16px;
}
.faq__answer p:last-child { margin-bottom: 0; }

/* Embedded lists (deployment models, data-sovereignty tiers, timeline, the
   three differentiators) — orange markers, matching the site's accent. */
.faq__answer ol,
.faq__answer ul {
  margin: 0 0 16px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq__answer li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #A2A2A2;
}
.faq__answer li::marker { color: var(--orange); }
.faq__answer strong { color: var(--white); font-weight: 600; }

/* ── Closing CTA banner ─────────────────────────────────────────────────────
 * Reuses .book-demo (background cta-image.png), shorter than the 930px default.
 */
.book-demo--banner { min-height: 560px; }

/* ══ Responsive ════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  .faq { padding-left: 38px; padding-right: 38px; }
}

@media (max-width: 620px) {
  .hero--faq { padding-top: 60px; padding-bottom: 48px; }
  .faq { padding: 56px 20px 80px; }
  .faq__intro { flex-direction: column; align-items: flex-start; gap: 22px; }
  .faq__summary {
    grid-template-columns: 1fr 24px;
    gap: 6px 12px;
  }
  /* Drop the index gutter on phones; tuck the [NN] above the question instead. */
  .faq__num { grid-column: 1 / -1; padding-top: 0; }
  .faq__question { font-size: 18px; }
  .faq__answer { padding: 0 0 26px; max-width: none; }
}