/* ============================================================
   HiveMind Landing Page — §9 FAQ + §10 Final CTA (HM-443 / LP-11)
   Owns the #faq disclosures and the closing CTA block only.
   Colors/type from css/tokens.css. The FAQ is native <details>/
   <summary> (keyboard + a11y for free); the chevron rotates in CSS
   on [open]; js/sections/faq.js only smooths the expand/collapse.
   ============================================================ */

/* ---------------------------------------------------------------
   §9 · FAQ — a hairline-ruled list of disclosures on the --ink ground
   --------------------------------------------------------------- */
.faq__inner {
  max-width: var(--prose);            /* 68ch — a comfortable Q&A reading column */
}

.faq__title {
  margin-bottom: var(--space-xl);
}

/* 1px --line-dark rules between items: a top rule on the list, a bottom rule
   on every item — so the list reads as a bounded, evenly-ruled stack. */
.faq__list {
  border-top: 1px solid var(--line-dark);
}

.faq__item {
  border-bottom: 1px solid var(--line-dark);
}

/* The clickable question row. Native marker suppressed; our chevron replaces it. */
.faq__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  font-family: var(--font-sans);
  font-weight: 600;                   /* Inter 600 */
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--offwhite);
  cursor: pointer;
  list-style: none;                   /* Firefox: drop the disclosure triangle */
  -webkit-tap-highlight-color: transparent;
}

.faq__summary::-webkit-details-marker {
  display: none;                      /* Safari/Chrome: drop the disclosure triangle */
}

.faq__summary:hover .faq__q {
  color: var(--white);
}

/* Keyboard focus uses the global :focus-visible outline (--hive-300). Pull the
   offset inward so the ring hugs the question row rather than the section edge. */
.faq__summary:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-button);
}

.faq__q {
  text-wrap: balance;
}

/* Chevron: Sage — the token's designated icon colour. Points right when closed,
   rotates down when open. The global reduced-motion rule freezes the transition. */
.faq__chevron {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2em;                  /* optically centre on the first question line */
  color: var(--hive-300);
  transition: transform 0.2s ease-out;
}

.faq__item[open] .faq__chevron {
  transform: rotate(90deg);
}

/* Answer wrapper is the JS height-animation target, so it carries no padding of its
   own (clean collapse to height 0); the inner <p> holds the spacing and measure. */
.faq__answer {
  color: var(--muted-dark);
}

.faq__answer p {
  max-width: 62ch;
  padding-bottom: var(--space-lg);
}

/* ---------------------------------------------------------------
   §10 · Final CTA — "Intelligence, assembled." on the --ink ground,
   with the hero's breathing teal radial echoed faintly behind it.
   --------------------------------------------------------------- */
.cta {
  position: relative;
  overflow-x: clip;                   /* the glow can never spawn a horizontal scrollbar */
  background-color: var(--ink);
  text-align: center;
}

/* Faint echo of the hero radial (hero.css:15), softer here; it breathes on the
   same slow cadence as the hero glow (hero.js: sine.inOut, 3.8s). The global
   prefers-reduced-motion rule neutralises the animation to a static glow. */
.cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(92vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%,
                rgba(31, 122, 130, 0.16),   /* --hive-500, echoed faintly */
                rgba(7, 38, 43, 0) 70%);
  pointer-events: none;
  animation: cta-breathe 3.8s ease-in-out infinite alternate;
}

@keyframes cta-breathe {
  from { opacity: 0.7; transform: translate(-50%, -50%) scale(0.94); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

.cta__inner {
  position: relative;                 /* sit above the glow */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta__body {
  margin-top: var(--space-lg);
  max-width: 46ch;
  color: var(--muted-dark);
}

.cta__button {
  margin-top: var(--space-xl);
}

.cta__microcopy {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--muted-dark);
}