/* RevMatic AI | questions.css
   The Questions page (/questions/). Loads after site.css and uses only its tokens and patterns:
   the inner hero, the section head, the sticky numbered index and phone jump row from the Services
   accordion (.acc-layout, .acc-index, .jump), native details (.faq) and the quiet image band.
   Page parts:
     .qa-lead   the most searched question, answered first (a big question beside its answer)
     .qa-help   "How can AI help my business?" as three editorial rows (no cards)
     .qa-ch     a chapter of questions: an outlined number that lights up while you read it, a title,
                a serif line, then the questions
   Without JavaScript every answer shows open (see the end of this file). */

/* ------------------------------------------------ the short answer */
.qa-short { overflow: hidden; }
.qa-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.qa-lead__q { max-width: 15em; }
.qa-lead__a {
  position: relative; max-width: 34em; padding-left: 22px;
  font: 400 clamp(1.1rem, 0.98rem + 0.5vw, 1.32rem)/1.55 var(--font-text); color: var(--ink-88);
}
.qa-lead__a::before { content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 1px; background: linear-gradient(180deg, var(--plasma-soft), rgba(140, 112, 255, 0)); }
@media (min-width: 1100px) {
  .qa-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 72px; align-items: end; }
  .qa-lead__a { padding-bottom: 4px; }
}

.qa-help { margin-top: clamp(56px, 2rem + 4vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.qa-help__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-bottom: 20px; }
.qa-help__q {
  font-family: var(--font-display); font-weight: 800; font-stretch: 106%; letter-spacing: -0.02em;
  font-size: var(--fs-h3); line-height: 1.08; color: var(--platinum);
}
.qa-help__lead { font: 400 clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem)/1.2 var(--font-sig); font-style: italic; color: var(--plasma-soft); }
.qa-rows { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.qa-rows__i { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.qa-rows__i::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 1px; background: var(--afterglow); }
.qa-rows__k { font: 400 clamp(1.6rem, 1.15rem + 1.2vw, 2.35rem)/1.1 var(--font-sig); font-style: italic; color: var(--platinum); }
.qa-rows__p { max-width: 36em; font: 400 16.5px/1.6 var(--font-text); color: var(--ink-88); }
.qa-help__foot { margin-top: 22px; max-width: 40em; font: 400 16px/1.6 var(--font-text); color: var(--smoke); }
@media (min-width: 768px) {
  .qa-rows__i { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; align-items: baseline; padding: 26px 0 28px; }
  .qa-rows__p { font-size: 17px; }
}
@media (min-width: 1100px) {
  /* question on the left, its answer in the right column, the same as the block above */
  .qa-help { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 72px; align-items: start; }
  .qa-help__head { grid-column: 1; grid-row: 1 / span 2; display: block; padding: 0; }
  .qa-help__lead { margin-top: 12px; }
  .qa-rows { grid-column: 2; grid-row: 1; }
  .qa-rows__i { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 24px 22px; }
  .qa-rows__i::before { left: 22px; }
  .qa-rows__p { font-size: 16.5px; }
  .qa-help__foot { grid-column: 2; grid-row: 2; padding-left: 22px; }
}

/* ------------------------------------------------ the chapters */
.qa-col { min-width: 0; }
.qa-ch { position: relative; }
.qa-ch + .qa-ch, .qa-band + .qa-ch { margin-top: clamp(40px, 1.5rem + 3vw, 88px); }
.qa-ch__head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 0 0 26px; }
.qa-ch__num {
  justify-self: start; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 66px; line-height: 0.8;
  letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.2px rgba(187, 169, 255, 0.5);
  transition: -webkit-text-stroke-color 0.3s;
}
.qa-ch.is-on .qa-ch__num, html:not(.js) .qa-ch__num {
  background: var(--afterglow); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0 transparent;
}
.qa-ch__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: 106%; letter-spacing: -0.02em;
  font-size: var(--fs-h3); line-height: 1.08; color: var(--platinum);
}
.qa-ch__line { margin-top: 10px; max-width: 34em; font: 400 clamp(1.2rem, 1.05rem + 0.45vw, 1.45rem)/1.3 var(--font-sig); font-style: italic; color: rgba(243, 240, 248, 0.84); }
.qa-ch .faq__a { padding-bottom: 28px; }
.qa-ch .faq__h { max-width: 34em; }
.qa-band { margin-top: clamp(40px, 1.5rem + 3vw, 72px); margin-bottom: 0; }
@media (min-width: 768px) {
  .qa-ch .faq { margin-left: 124px; }
}
@media (max-width: 767px) {
  .qa-ch__head { grid-template-columns: minmax(0, 1fr); padding-bottom: 20px; }
  .qa-ch__num { font-size: 30px; line-height: 0.9; -webkit-text-stroke-width: 1px; margin-bottom: 10px; }
  .qa-ch__title { font-size: 26px; line-height: 1.12; letter-spacing: -0.015em; font-stretch: 102%; }
  .qa-ch__line { margin-top: 8px; font-size: 1.2rem; }
  .qa-rows__k { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
  .qa-layout { padding-top: 6px; }
}

/* without JavaScript every answer shows open: site.css section 15 (shared by every FAQ) */