/* Aside of the contact page (views/contact/partials/aside.phtml): the support tile, a mini FAQ */
.contact-aside { display: grid; align-content: start; gap: 2.4rem; }
.contact-aside .support-tile { margin: 0; }
.contact-faq { align-self: start; padding: 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) 8%, transparent), transparent 60%), var(--surface); }
/* Mini FAQ, its title like the support tile one: uppercase eyebrow with icon, then title */
.contact-faq .kicker { display: flex; align-items: center; gap: .64rem; margin: 0 0 1.12rem; color: var(--accent-ink); font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-faq .kicker .i { width: 2.24rem; height: 2.24rem; }
.contact-faq h2 { margin: 0 0 1.28rem; font-size: 2.24rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.contact-faq ul { margin: 0; padding: 0; list-style: none; }
.contact-faq li { margin: 0; border-top: 1px solid var(--line); }
.contact-faq li a, .contact-faq li a:visited { display: flex; align-items: center; justify-content: space-between; gap: 1.28rem; padding: 1.12rem 0; color: var(--ink); font-size: 1.44rem; line-height: 1.4; text-decoration: none; }
.contact-faq li a .i { width: 1.6rem; height: 1.6rem; color: var(--muted); transition: transform .2s, color .2s; }
.contact-faq li a:hover { color: var(--accent-ink); text-decoration: none; }
.contact-faq li a:hover .i { color: var(--accent-ink); transform: translateX(3px); }
.contact-faq .more { margin: 1.28rem 0 0; padding-top: 1.28rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 1.36rem; }
.contact-faq .more a, .contact-faq .more a:visited { color: var(--accent-ink); }
@media print { .contact-faq { display: none; } }