#faq{--dm-accent:#086d8d;--dm-paper:#e5e5e5;--dm-ink:#153247;background:var(--dm-paper);color:var(--dm-ink);font:400 15px/1.6 'Space Grotesk',sans-serif;padding:64px 44px;box-sizing:border-box;overflow:hidden;container-type:inline-size}
#faq *{box-sizing:border-box}
#faq .faq-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:48px;align-items:start}
#faq .faq-intro::after{content:"";display:block;width:clamp(360px,36vw,480px);aspect-ratio:800/820;margin-top:24px;margin-left:calc(-164px - max(0px, (100cqw - 1400px)/2));background:url('/site/assets/faq-wireframe-knot.svg') center/contain no-repeat;opacity:var(--wireframe-opacity,.65);pointer-events:none}
#faq h2,#faq p{margin:0}
#faq h2{font:400 clamp(33px,4.1vw,44px)/1.13 'Space Grotesk',sans-serif;letter-spacing:-.03em;max-width:11ch;text-wrap:balance}
#faq h2 span{color:var(--dm-accent)}
#faq .faq-contact{position:relative;isolation:isolate;container-type:inline-size;margin-top:36px;width:100%;max-width:360px;aspect-ratio:880/486;min-height:180px}
#faq .contact-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:#123c6b;pointer-events:none}
#faq .faq-contact p{position:absolute;left:7.3%;top:14%;width:81%;color:#edf6ff;font-size:clamp(14px,4.55cqw,17px);line-height:1.48}
#faq .contact-link{position:absolute;left:7.3%;bottom:13%;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 12px;background:#fafbfc;color:var(--dm-accent);border-radius:7px;text-decoration:none;font-size:clamp(12px,3.9cqw,14px);font-weight:500;white-space:nowrap}
#faq .contact-link:hover{background:#fff;color:#153247}
#faq .contact-link svg{width:17px;height:17px;flex:none}
#faq .contact-link svg circle{opacity:1;transform-box:fill-box;transform-origin:center}
#faq .contact-link:is(:hover,:focus-visible) svg circle{animation:dot-appear .13s ease both}
#faq .contact-link:is(:hover,:focus-visible) svg circle:nth-of-type(1){animation-delay:.18s}
#faq .contact-link:is(:hover,:focus-visible) svg circle:nth-of-type(2){animation-delay:.23s}
#faq .contact-link:is(:hover,:focus-visible) svg circle:nth-of-type(3){animation-delay:.28s}
#faq .contact-link:is(:hover,:focus-visible) svg path{animation:tip-move .26s cubic-bezier(.4,0,.2,1) both}
#faq .faq-list{display:grid;gap:12px;min-width:0}
#faq details{background:#fafbfc;border-radius:12px;min-width:0}
#faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;min-height:72px;font-weight:500;font-size:16px;line-height:1.45}
#faq summary::-webkit-details-marker{display:none}
#faq .toggle-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;border:1px solid #d5e0e6;border-radius:6px;color:#38596e}
#faq .toggle-icon svg{width:17px;height:17px;transition:transform .18s ease-out}
#faq details[open] .toggle-icon svg{transform:rotate(45deg)}
#faq details[open] summary{color:var(--dm-accent);padding-bottom:14px}
#faq summary:hover{color:var(--dm-accent)}
#faq .answer{padding:0 22px 23px;color:#415c6d;font-size:14px;line-height:1.75}
#faq .answer p+p{margin-top:12px}
#faq ::selection{color:#123653;background:#a9dfee}
@media(max-width:650px){
 #faq{padding:36px 22px}
 #faq .faq-layout{grid-template-columns:1fr;gap:28px}
 #faq .faq-intro::after{display:none}
 #faq h2{font-size:36px;max-width:17ch}
 #faq .faq-contact{margin-top:0;max-width:360px}
 #faq summary{padding:18px;font-size:15px;gap:12px}
 #faq .answer{padding:0 18px 22px}
}
@media(prefers-reduced-motion:reduce){#faq .toggle-icon svg{transition:none}#faq .contact-link:is(:hover,:focus-visible) svg circle,#faq .contact-link:is(:hover,:focus-visible) svg path{animation:none;transform:none;opacity:1}}

#faq summary{cursor:pointer}
#faq summary:focus-visible,#faq .contact-link:focus-visible{outline:2px solid #086d8d;outline-offset:4px}
#faq .answer p{font:inherit;color:inherit;max-width:none}
#faq .faq-layout{max-width:1400px;margin-inline:auto}