/* FAQ as a chat: questions are customer bubbles, answers come back from DeskHoot. */
.faq-chat { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; border-top: 1px solid var(--line); }
.faq-chat h2 { font-size: 44px; font-weight: 480; letter-spacing: -1.7px; line-height: 1.1; }
.faq-chat-intro { display: flex; flex-direction: column; align-items: flex-start; }
.faq-chat-intro > p { font-size: 16px; color: var(--muted); margin-top: 18px; }
.faq-chat-cta { margin-top: 28px; border-radius: 999px; background: var(--ink); min-height: 48px; padding: 12px 22px; gap: 12px; }
.faq-chat-cta:hover { background: #000; }
.faq-chat-cta .icon { width: 15px; height: 15px; }
.faq-chat-owl { margin-top: auto; align-self: flex-end; width: 96px; height: 96px; animation: faq-owl-float 4s ease-in-out infinite; }
@keyframes faq-owl-float { 50% { transform: translateY(-7px); } }

.faq-chat-thread { list-style: none; margin: 0; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 14px; }
.faq-chat-thread > li { display: flex; flex-direction: column; align-items: flex-start; }
.faq-bubble { position: relative; max-width: 440px; padding: 14px 22px; border-radius: 22px; background: #fff; color: var(--ink); font-size: 16px; font-weight: 450; line-height: 1.55; text-align: left; letter-spacing: -.1px; box-shadow: 0 1px 2px rgba(23,32,51,.05), 0 10px 26px -14px rgba(23,32,51,.22); transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, color .2s; }
.faq-bubble:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(23,32,51,.05), 0 16px 30px -14px rgba(23,32,51,.3); }
.faq-bubble:active { transform: scale(.97); }
.faq-bubble[aria-expanded="true"] { color: var(--blue); }

/* Bubble tails: a filled corner, then a canvas-colored cut-out to curve it. */
.faq-bubble::before, .faq-reply-bubble::before { content: ""; position: absolute; bottom: 0; width: 20px; height: 18px; background: inherit; }
.faq-bubble::after, .faq-reply-bubble::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 20px; background: var(--canvas); }
.faq-bubble::before { left: -7px; border-bottom-right-radius: 16px 14px; }
.faq-bubble::after { left: -10px; border-bottom-right-radius: 10px; }
.faq-reply-bubble::before { right: -7px; border-bottom-left-radius: 16px 14px; }
.faq-reply-bubble::after { right: -10px; border-bottom-left-radius: 10px; }

.faq-reply { align-self: stretch; display: grid; grid-template-rows: 0fr; justify-items: end; opacity: 0; transition: grid-template-rows .45s var(--ease), margin .45s var(--ease), opacity .3s; }
.faq-reply.is-open { grid-template-rows: 1fr; margin: 12px 0 6px; opacity: 1; }
.faq-reply-clip { min-height: 0; overflow: hidden; padding: 0 12px 2px 40px; }
.faq-reply-bubble { position: relative; max-width: 420px; padding: 16px 22px; border-radius: 22px; background: var(--ink); color: #fff; font-size: 15.5px; line-height: 1.75; transform: translateY(12px) scale(.6); transform-origin: 100% 100%; opacity: 0; transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.faq-reply.is-open .faq-reply-bubble { transform: none; opacity: 1; transition-delay: .06s; }
.faq-reply-text a { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 500; color: #a9c1ff; }
.faq-reply-text a .icon { width: 14px; height: 14px; transition: transform .2s; }
.faq-reply-text a:hover .icon { transform: translateX(3px); }

/* Questions pop in one after another the first time the section appears. */
.faq-chat.will-anim .faq-chat-thread > li { opacity: 0; transform: translateY(16px) scale(.94); transform-origin: 0 100%; }
.faq-chat.is-in .faq-chat-thread > li { opacity: 1; transform: none; transition: opacity .5s ease var(--delay, 0ms), transform .6s cubic-bezier(.34,1.56,.64,1) var(--delay, 0ms); }

@media (max-width: 1023px) { .faq-chat { gap: 44px; } .faq-chat h2 { font-size: 38px; } }
@media (max-width: 767px) {
  .faq-chat { grid-template-columns: 1fr; gap: 30px; }
  .faq-chat h2 { font-size: 32px; letter-spacing: -1.2px; }
  .faq-chat-intro { position: relative; padding-right: 70px; }
  .faq-chat-owl { position: absolute; right: 0; top: 0; width: 60px; height: 60px; }
  .faq-chat-thread { padding-left: 8px; }
  .faq-bubble { font-size: 15px; }
  .faq-reply-clip { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .faq-chat *, .faq-chat *::before, .faq-chat *::after { animation: none !important; transition: none !important; } }
.motion-paused .faq-chat *, .motion-paused .faq-chat *::before, .motion-paused .faq-chat *::after { animation: none !important; transition: none !important; }