/* Quick guide: built on the area2 system (white ↔ green sections, reveal) */
.gq-hero { display: grid; gap: 22px; min-height: min(62vh, 560px); align-content: center; }
.gq-hero .a2-h1 { max-width: 14ch; }
.gq-lede { margin: 0 0 clamp(24px, 3vw, 40px); max-width: 52ch; font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--fm-sans); }
.gq-bars { display: grid; gap: 18px; max-width: 980px; }
.gq-time { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 18px; font: 500 12px var(--fm-sans); letter-spacing: .14em; text-transform: uppercase; }
.gq-time i { display: block; height: 10px; border-radius: 6px; background: var(--acc); width: calc(var(--w) * 100%); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--fm-ease); transition-delay: calc(var(--d) * .18s + .2s); }
.gq-time.in i { transform: none; }
.gq-time b { font: 400 clamp(20px, 1.8vw, 28px)/1 var(--fm-serif); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.gq-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.gq-step { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 20px; padding: clamp(26px, 3vw, 44px) 0; border-top: 1px solid var(--line); }
.gq-step .a2-code { font-size: 13px; padding-top: 10px; }
.gq-body { display: grid; gap: 14px; max-width: 980px; }
.gq-body h3 { margin: 0; font: italic 400 clamp(28px, 2.8vw, 44px)/1.05 var(--fm-serif); letter-spacing: -.02em; }
.gq-body > p { margin: 0; max-width: 64ch; font: 400 clamp(16px, 1.25vw, 18px)/1.6 var(--fm-sans); }
.gq-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); margin-top: 6px; }
.gq-ask, .gq-err { border-radius: 6px; padding: clamp(18px, 2vw, 26px); }
.gq-ask { background: var(--card); }
.gq-err { border: 1px dashed var(--acc); }
.gq-ask b, .gq-err b { display: block; margin-bottom: 10px; font: 500 11px var(--fm-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.gq-ask ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font: 400 15px/1.45 var(--fm-sans); }
.gq-ask li { position: relative; padding-left: 20px; }
.gq-ask li::before { content: "?"; position: absolute; left: 0; font: italic 400 17px/1.2 var(--fm-serif); color: var(--acc); }
.gq-err p { margin: 0; font: 400 15px/1.5 var(--fm-sans); }
.gq .a2-end .gq-lede { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .gq-hero { min-height: 0; padding-top: 20px; }
  .gq-time { grid-template-columns: 80px minmax(0, 1fr); }
  .gq-time b { grid-column: 2; font-size: 20px; }
  .gq-step { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gq-step .a2-code { padding-top: 0; }
  .gq-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .gq-time i { transform: none; transition: none; } }