/* FAQ (views/partials/faq.phtml): collapsible question groups, the aside of the theme on the right */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 4rem; max-width: 89.6rem; margin: 0 auto; padding: 3.2rem 0 1.6rem; }
/* Desktop: the FAQ and, on the right, the aside sticking at the top */
@media (min-width: 64rem) {
  .faq { grid-template-columns: minmax(0, 1fr) 33.6rem; max-width: 128rem; }
  .faq-head, .faq-main, .faq-more { grid-column: 1; }
  .faq-aside { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 8.8rem; margin-top: 3.2rem; }
}
.faq-head h1 { margin: 0; font-size: clamp(2.56rem, 4.5vw, 3.84rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
/* Table of contents: the groups as pills */
.faq-toc { display: flex; flex-wrap: wrap; gap: .64rem; margin: 2.4rem 0 0; }
.faq-toc a, .faq-toc a:visited { display: inline-flex; align-items: center; gap: .64rem; padding: .64rem 1.36rem .64rem 1.12rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); font-size: 1.4rem; text-decoration: none; transition: border-color .2s; }
.faq-toc a:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.faq-toc .i { width: 1.76rem; height: 1.76rem; color: var(--accent-ink); }
/* Groups */
.faq-group { margin-top: 4rem; scroll-margin-top: 8rem; }
.faq-group > h2 { display: flex; align-items: center; gap: 1.12rem; margin: 0 0 1.28rem; font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
.faq-group > h2 .i { width: 4rem; height: 4rem; padding: .88rem; box-sizing: border-box; border-radius: 1.12rem; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); transform: rotate(-6deg); }
/* Question: an accordion (zeste.css) */
.faq-q { margin: 0 0 .8rem; scroll-margin-top: 8rem; }
.faq-a { color: var(--muted); font-size: 1.52rem; line-height: 1.6; }
.faq-a p { margin: 0 0 1.12rem; }
.faq-a strong { color: var(--ink); }
.faq-a h3 { margin: 1.6rem 0 .48rem; color: var(--ink); font-size: 1.52rem; font-weight: 700; }
.faq-a a, .faq-a a:visited { color: var(--accent-ink); }
.faq-a pre { margin: 0 0 1.12rem; font-size: 1.28rem; line-height: 1.5; white-space: pre; }
/* Contact */
.faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 4rem; padding: 2rem 2.4rem; border: 1px solid var(--line); border-radius: var(--r);
  background: radial-gradient(120% 140% at 0 0, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--surface); }
.faq-more > .i { width: 4.8rem; height: 4.8rem; padding: 1.12rem; box-sizing: border-box; border-radius: 1.28rem; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.faq-more div { flex: 1 1 24rem; }
.faq-more strong { display: block; font-size: 1.6rem; }
.faq-more span { color: var(--muted); font-size: 1.4rem; }
.faq-more .action.primary { padding: 1.12rem 2.24rem; text-decoration: none; }
@media print {
  .faq-toc, .faq-more { display: none; }
}