/* ============================================================
 * page-faq.css — Help & FAQ, /faq/ (mobile screen 1p · desktop pattern D2).
 *
 * D2 "article + rail": the FAQ list sits in the measure, the "Still stuck?"
 * contact card in the 420 rail; under 1280 the rail stacks beneath the list
 * (reflow.md). Mobile is screen 1p: eyebrow · h1 · updated pill · hairline
 * FAQ rows (first open) · dark contact card · legal link row.
 *
 * Token-only — every value is a var(--cap-*); the design lives in
 * components.css and this file only positions it. Scoped `.cap-shell …`
 * because Elementor's kit styles bare a/p/summary at (0,1,1).
 * ============================================================ */

.cap-shell .cap-faq-page { padding-bottom: var(--cap-space-xl); }

/* D2 grid — measure + rail, 80px gutter. */
.cap-shell .cap-faq-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cap-rail);
  gap: var(--cap-gutter-rail);
  align-items: start;
  padding-top: var(--cap-space-after-header);
}
.cap-shell .cap-faq-page__main { max-width: var(--cap-measure); }

/* head */
.cap-shell .cap-faq-page__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-md); }
.cap-shell .cap-faq-page__head .cap-h1 { margin: 0; }
.cap-shell .cap-faq-page__updated { align-self: flex-start; }

/* the list — components owns the row; the page owns the spacing and the
   rule under an OPEN question (screen 1p draws one, the component does not). */
.cap-shell .cap-faq-page__list { margin-top: var(--cap-space-lg); }
.cap-shell .cap-faq-page__list .cap-faq__item[open] > .cap-faq__q { border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-faq-page__list .cap-faq__q { list-style: none; }
.cap-shell .cap-faq-page__list .cap-faq__a { padding-top: var(--cap-space-md); }
.cap-shell .cap-faq-page__list .cap-faq__a a { border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); }
/* the six sections (owner 2026-09-28): the section heading over its own list; "Something else?" closes the page apart */
.cap-shell .cap-faq-page__group { margin: var(--cap-space-lg) 0 var(--cap-space-sm); }
.cap-shell .cap-faq-page__list > .cap-faq-page__group:first-child { margin-top: 0; }
.cap-shell .cap-faq-page__last { margin-top: var(--cap-space-lg); }

/* rail — the dark "Still stuck?" card. The cream-on-ink button is the one
   variant components.css does not carry (it has violet-on-ink only). */
.cap-shell .cap-faq-page__rail { display: flex; flex-direction: column; gap: var(--cap-space-md); }
.cap-shell .cap-faq-page__contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-sm); }
.cap-shell .cap-faq-page__contact .cap-lede { color: var(--cap-color-on-ink-3); }
.cap-shell .cap-faq-page__contact .cap-btn { margin-top: var(--cap-space-xs); }
/* the cream pill on the ink "Something else?" box — the same look as components .cap-btn--on-ink, with its states (round 23:
   the page rule painted only the rest, so the pill had no hover and a click left the generic ink focus look on the ink box) */
.cap-shell .cap-faq-page__contact .cap-btn, .cap-shell .cap-faq-page__contact .cap-btn:focus:not(:hover):not(:active) { background: var(--cap-color-bg); color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-faq-page__contact .cap-btn:hover { background: var(--cap-color-primary); color: var(--cap-color-surface); } }
.cap-shell .cap-faq-page__contact .cap-btn:active { background: var(--cap-color-primary); color: var(--cap-color-surface); }
@media (hover: hover) { .cap-shell .cap-faq-page__contact .cap-btn:hover { background: var(--cap-color-primary); color: var(--cap-color-bg); } }

/* legal link row */
.cap-shell .cap-faq-page__legal { display: flex; flex-wrap: wrap; gap: var(--cap-space-sm) var(--cap-space-md); margin-top: var(--cap-space-lg); padding-top: var(--cap-space-md); }
.cap-shell .cap-faq-page__legal a { color: var(--cap-color-muted); }
@media (hover: hover) { .cap-shell .cap-faq-page__legal a:hover { color: var(--cap-color-text); } }

@media (max-width: 1279px) {
  .cap-shell .cap-faq-page__grid { grid-template-columns: 1fr; gap: var(--cap-space-lg); }
  .cap-shell .cap-faq-page__main { max-width: none; }
}
@media (max-width: 699px) {
  .cap-shell .cap-faq-page__grid { padding-top: var(--cap-space-lg); }
  .cap-shell .cap-faq-page__head { gap: var(--cap-space-sm); }
  .cap-shell .cap-faq-page__list { margin-top: var(--cap-space-card-pad); }
  /* 1p, 28 Sep sheet (CD's markup at 388): the eyebrow 12 / .2em, 14 to the h1; the list 24 under the head; questions
     16 / 1.3 / .04em, answers 15 / 1.65 with 12 over and 16 under; the dark card on the text column (26 in), 20 pads,
     16 apart; the legal row 20 under the card, 8 / 18 gaps, 10 / .12em caption grey */
  .cap-shell .cap-faq-page__head { gap: var(--cap-space-gap-7); }
  .cap-shell .cap-faq-page__head .cap-eyebrow { line-height: normal; }
  .cap-shell .cap-faq-page__list { margin-top: var(--cap-space-lg); }
  .cap-shell .cap-faq-page__list .cap-faq-q { font-size: var(--cap-mp-type-gyr-faq-q); line-height: var(--cap-mp-leading-gyr-faq-q); letter-spacing: var(--cap-mp-track-gyr-faq-q); }
  .cap-shell .cap-faq-page__list .cap-faq__a { font-size: var(--cap-mp-type-gyr-faq-a); line-height: var(--cap-mp-leading-sub); padding: var(--cap-space-gap-6) 0 var(--cap-space-md); }
  .cap-shell .cap-faq-page__grid { gap: var(--cap-space-lg); }
  .cap-shell .cap-faq-page__contact { padding: var(--cap-space-panel-pad); gap: var(--cap-space-md); }
  .cap-shell .cap-faq-page__contact .cap-h3-card { color: var(--cap-color-on-ink-heading); line-height: var(--cap-leading-serif-title); letter-spacing: 0; }
  .cap-shell .cap-faq-page__contact .cap-lede { font-size: var(--cap-type-card-value); line-height: var(--cap-leading-small); }
  .cap-shell .cap-faq-page__contact .cap-btn { margin-top: var(--cap-space-gap-1); }
  .cap-shell .cap-faq-page__legal { gap: var(--cap-space-sm) var(--cap-mp-gyr-contract-split); margin-top: 0; padding-top: var(--cap-space-panel-pad); }
  .cap-shell .cap-faq-page__legal a { letter-spacing: var(--cap-track-feature); color: var(--cap-color-caption); line-height: normal; }
}
/* round 31 (a 320 phone): the legal links wrap to a second line — the lines 44 apart, as on the legal pages, so no two tap bands
   meet (they were 20 apart); the row is set in its links' size and line, so 1lh is theirs. One line (360 and up) is unchanged. */
@media (max-width: 699px) { .cap-shell .cap-faq-page__legal { font-family: var(--cap-font-ui); font-size: var(--cap-type-meta); line-height: normal; row-gap: calc(var(--cap-tap-min) - 1lh); } }   /* the links' face too: a "normal" line is the font's own */

/* the "Help" eyebrow: the standard purple eyebrow at every width (owner 2026-10-01; it was grey — the sheets catch up) */
.cap-shell .cap-faq-page__head .cap-eyebrow { font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); color: var(--cap-color-primary); }

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone — the
   token's pair (--cap-space-footer-gap). Appended last so it wins over the page's earlier end spacing. */
.cap-shell .cap-faq-page { padding-bottom: var(--cap-space-footer-gap); }