/* Separate layers compose entrance, scroll depth, and ambient drift. */

/* Product-led FAQ: clear topic groups, readable answers, one persistent visual. */
.faq{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,100px);padding-top:100px}
.faq-intro{position:sticky;top:112px;align-self:start;min-width:0}
.faq .faq-heading h2{font-size:clamp(52px,5.2vw,72px);line-height:1.02;letter-spacing:-.025em;margin:0 0 22px}
.faq-heading h2 span{color:#755292}
.faq-lead{font-size:15px;line-height:1.75;color:var(--slate);max-width:340px;margin:0}
.faq-phone{width:100%;max-width:580px;margin:50px 0 0}
.faq-phone-stage{position:relative;isolation:isolate;padding:0 8px}
.faq-phone .device-frame{padding:7px;border-radius:34px;transform:rotate(-5deg);box-shadow:18px 28px 42px -22px #24324670,inset 0 0 0 2px #080d14}
.faq-phone .device-frame:before{top:2.2%;width:29%;height:3%;border-radius:20px;box-shadow:none}
.faq-phone .device-frame:after{content:"";position:absolute;right:-4px;top:24%;height:11%;width:3px;border-radius:0 2px 2px 0;background:#73808d}
.faq-phone .device-screen{border-radius:25px}
.faq-phone .device-logo{width:12.5%;left:6.3%;top:2.8%}
.faq-phone figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:27px;color:var(--slate);font-size:11px;line-height:1.5;text-align:center}
.faq-phone figcaption strong{color:var(--ink);font-size:13px;font-weight:600}
.faq-content{min-width:0;padding-top:4px}
.faq-group+.faq-group{margin-top:38px}
.faq-group h3{font-size:18px;font-weight:700;letter-spacing:-.02em;color:#755292;line-height:1.35;margin:0 0 12px}
.faq-answers{border-top:1px solid #263b5028}
.faq details{padding:0 16px;margin:0 -16px;border-bottom:1px solid #263b5028;transition:background-color 180ms ease}
.faq details[open]{background:#ffffff85;border-radius:8px}
.faq summary{align-items:center;min-height:64px;padding:17px 0;gap:20px;font-size:15px;font-weight:500;line-height:1.55;color:var(--ink)}
.faq summary .faq-toggle{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border:1px solid #75529236;border-radius:50%;color:#755292;transition:transform 180ms ease,background-color 180ms ease,color 180ms ease}
.faq details[open] summary .faq-toggle{transform:rotate(45deg);background:#755292;color:#fff;border-color:#755292}
.faq details p{font-size:14px;line-height:1.85;max-width:68ch;margin:0;padding:0 48px 23px 0;color:var(--slate)}
.faq summary:focus-visible{outline:2px solid #755292;outline-offset:4px;border-radius:4px}
@media(hover:hover){.faq summary:hover{color:#755292}.faq summary:hover .faq-toggle{background:#75529212}}
@media(max-height:660px){.faq-intro{position:static}}
@media(max-width:900px){
 .faq{gap:40px}
 .faq .faq-heading h2{font-size:52px}
 .faq-phone{width:100%;max-width:none}
 .faq-lead{font-size:14px}
 .faq summary{font-size:14px}
}
@media(max-width:620px){
 .faq{grid-template-columns:1fr;gap:38px;padding-top:96px}
 .faq-intro{position:static;display:block}
 .faq .faq-heading h2{font-size:clamp(36px,9vw,52px);margin-bottom:18px}
 .faq-lead{font-size:13px;line-height:1.65}
 .faq-lead br{display:none}
 .faq-phone{width:100%;max-width:none;margin:32px 0 0}
 .faq-phone-stage{padding:0 4px}
 .faq-phone .device-frame{padding:4px;border-radius:21px;border-width:1px}
 .faq-phone .device-screen{border-radius:16px}
 .faq-phone figcaption{margin-top:20px;font-size:11px;gap:3px}
 .faq-phone figcaption strong{font-size:12px}
 .faq-group+.faq-group{margin-top:32px}
 .faq-group h3{font-size:17px}
 .faq details{padding:0 10px;margin:0 -10px}
 .faq summary{min-height:68px;gap:14px;padding:17px 0;font-size:14px}
 .faq details p{font-size:13px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){.faq details,.faq summary .faq-toggle{transition:none}}

.device-showcase{position:relative;margin-top:100px;padding:66px 5% 36px;border:1px solid #e0e5ee;border-radius:24px;background:radial-gradient(ellipse at 80% 57%,#d0c5e7b8,transparent 60%),linear-gradient(130deg,#f5f8fb,#eae8f1);color:var(--ink);isolation:isolate;overflow:clip}
.devices-heading{position:relative;z-index:5;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:end;margin-bottom:16px}
.devices-heading .eyebrow{color:#685181;font-size:9px;letter-spacing:1.7px}
.devices-heading h2{font-size:clamp(43px,4.7vw,66px);margin:0}
.devices-heading h2 span{color:#6c5287}
.devices-heading p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--slate);margin:0 0 16px;max-width:360px}
.devices-heading .text-button{color:#21647f;font-size:12px;min-height:44px}
.devices-heading a:focus-visible{outline-color:#6c5287}
.device-stage{position:relative;aspect-ratio:1.19;margin:0 auto;max-width:1180px;perspective:1600px}
.device-stage:before{content:"";position:absolute;left:6%;right:9%;bottom:10%;height:14%;background:radial-gradient(ellipse,#26334a30,transparent 68%);pointer-events:none}
.device-tablet{position:absolute;width:79%;left:0;top:18%;margin:0;z-index:2}
.device-phone{position:absolute;width:27%;right:6%;top:22%;margin:0;z-index:3}
.device-sections{position:absolute;width:48%;right:4%;top:7%;z-index:1;pointer-events:none}
.collage-plane{position:relative;transform-origin:50% 55%}
.device-frame{position:relative;background:linear-gradient(135deg,#5d6571,#151c24 17%,#111820 82%,#707a84);border:2px solid #6c7784;box-shadow:0 42px 55px -18px #1c243e70,inset 0 0 0 2px #080d14}
.device-tablet .device-frame{padding:12px;border-radius:30px;transform:rotate(-7deg)}
.device-phone .device-frame{padding:8px;border-radius:36px;transform:rotate(9deg);box-shadow:-22px 35px 48px -12px #131c3775,inset 0 0 0 2px #080d14}
.device-frame:before{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#070b12;box-shadow:inset 0 0 0 1px #2d425a;z-index:3}
.device-phone .device-frame:before{top:2.2%;width:29%;height:3%;border-radius:20px;background:#05080d;box-shadow:none}
.device-phone .device-frame:after{content:"";position:absolute;top:24%;right:-4px;height:11%;width:3px;border-radius:0 2px 2px 0;background:#73808d;z-index:-1}
.device-screen{position:relative;overflow:hidden;background:#0a141d}
.device-tablet .device-screen{border-radius:17px}
.device-phone .device-screen{border-radius:25px}
.device-screen>img{width:100%;height:auto;display:block}
.device-logo{position:absolute;overflow:hidden;aspect-ratio:5.5;mix-blend-mode:screen;pointer-events:none}
.device-tablet .device-logo{width:17.5%;left:2.2%;top:3.1%}
.device-phone .device-logo{width:43%;left:6.7%;top:6.7%}
.device-logo img{position:absolute;max-width:none;width:142%;left:-22%;top:-104%;height:auto}
.device-section-card{padding:16px;border:1px solid #ffffff70;background:#1a2a3b;border-radius:16px;box-shadow:0 20px 45px -18px #25344970;transform:rotate(6deg)}
.section-card-label{display:flex;justify-content:space-between;align-items:center;color:#cad7e6;font-size:9px;letter-spacing:1.1px;margin-bottom:12px}
.section-card-label span:last-child{color:#65ccf5;font-size:22px;line-height:1}
.section-card-crop{position:relative;overflow:hidden;aspect-ratio:5.8;border-radius:7px}
.section-card-crop img{position:absolute;width:126.11%;max-width:none;left:-24.38%;top:-129.29%;height:auto}
.device-showcase figcaption{display:flex;align-items:baseline;gap:12px;margin-top:40px;margin-left:8%;color:#3b4b5e}
.device-showcase figcaption strong{font-size:16px;letter-spacing:-.4px;color:#1d2f40}
.device-showcase figcaption span{font-size:11px}
.device-phone figcaption{flex-direction:column;gap:2px;align-items:center;margin:32px 0 0}
.devices-note{position:relative;z-index:5;font-size:11px;line-height:1.7;color:#586375;margin:0;border-top:1px solid #4c547225;padding-top:20px}
.js-motion .device-tablet.reveal{transform:perspective(1400px) translate3d(-100px,110px,0) rotateY(12deg) rotateZ(-5deg) scale(.94);transition:transform 1400ms var(--ease-out),opacity 900ms var(--ease-out)}
.js-motion .device-phone.reveal{transform:perspective(1400px) translate3d(100px,150px,0) rotateY(-14deg) rotateZ(8deg) scale(.94);transition:transform 1600ms var(--ease-out) 80ms,opacity 1000ms var(--ease-out) 80ms}
.js-motion .device-sections.reveal{transform:translate3d(45px,-55px,0) rotate(-8deg) scale(.96);transition:transform 1200ms var(--ease-out),opacity 800ms var(--ease-out)}
.js-motion .device-tablet.reveal.visible,.js-motion .device-phone.reveal.visible,.js-motion .device-sections.reveal.visible{transform:none}
.motion-enabled .device-stage.is-in-view .device-tablet.visible .device-frame{animation:tablet-drift 7s var(--ease-in-out) 1400ms infinite}
.motion-enabled .device-stage.is-in-view .device-phone.visible .device-frame{animation:phone-drift 6s var(--ease-in-out) 1680ms infinite}
.motion-enabled .device-stage.is-in-view .device-sections.visible .device-section-card{animation:section-drift 8s var(--ease-in-out) 1200ms infinite}
@keyframes tablet-drift{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-7px) rotate(-6deg)}}
@keyframes phone-drift{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(10px) rotate(7deg)}}
@keyframes section-drift{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@media(hover:hover) and (pointer:fine){.devices-heading .text-button:hover{color:#6c5287}}
@media(max-width:900px){
.device-showcase{padding:45px 5% 26px;margin-top:75px}.devices-heading{grid-template-columns:1fr;gap:22px;margin-bottom:10px}.devices-heading p:not(.eyebrow){max-width:490px}
.device-stage{aspect-ratio:.9}.device-tablet{width:81%;top:20%;left:0}.device-phone{width:29%;right:4%;top:25%}.device-sections{width:52%;top:9%;right:2%}
.device-tablet .device-frame{border-radius:23px;padding:9px}.device-tablet .device-screen{border-radius:12px}.device-phone .device-frame{border-radius:27px;padding:6px}.device-phone .device-screen{border-radius:19px}
.device-section-card{padding:11px}.section-card-label{font-size:7px;margin-bottom:7px}.device-showcase figcaption{margin-top:29px;gap:6px;flex-wrap:wrap}.device-showcase figcaption span{font-size:10px}.device-phone figcaption{margin-top:25px}.device-phone figcaption span{max-width:110px;text-align:center}}
@media(max-width:600px){
.device-showcase{margin-top:55px;border-radius:18px;padding:34px 5% 25px}.devices-heading h2{font-size:45px}.devices-heading p:not(.eyebrow){font-size:13px}.devices-heading .eyebrow{font-size:8px;letter-spacing:1.3px}
.device-stage{aspect-ratio:.62;margin:0 -3% 8px}.device-tablet{width:87%;left:2%;top:19%}.device-phone{width:43%;right:3%;top:28%}.device-sections{width:70%;right:3%;top:9%}
.device-tablet .device-frame{padding:5px;border-radius:14px}.device-tablet .device-screen{border-radius:7px}.device-tablet .device-frame:before{width:3px;height:3px;top:1px}.device-phone .device-frame{padding:5px;border-radius:23px}.device-phone .device-screen{border-radius:17px}
.device-section-card{padding:9px;border-radius:10px}.section-card-label{font-size:6px;letter-spacing:.6px}.section-card-label span:last-child{font-size:17px}.device-showcase figcaption{flex-direction:column;gap:1px;margin-top:24px;margin-left:7%;max-width:45%}.device-showcase figcaption strong{font-size:12px}.device-showcase figcaption span{font-size:9px;max-width:110px}.device-phone figcaption{max-width:none;margin:20px 0 0}.devices-note{font-size:10px}
.js-motion .device-tablet.reveal{transform:translate3d(-35px,55px,0) rotate(-5deg) scale(.96)}.js-motion .device-phone.reveal{transform:translate3d(35px,75px,0) rotate(6deg) scale(.96)}}
.motion-paused .collage-plane,.motion-paused .device-frame,.motion-paused .device-section-card{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.collage-plane,.device-frame,.device-section-card{animation:none!important;transition:none!important}.collage-plane{transform:none!important}.js-motion .device-tablet.reveal,.js-motion .device-phone.reveal,.js-motion .device-sections.reveal{transform:none!important;transition:opacity 150ms ease}}

/* iPhone is a landscape console in both product mockups. */
.device-phone{width:65%;right:0;top:63%}
.device-phone .device-frame{transform:rotate(6deg);border-radius:32px}
.device-phone .device-logo{width:12.5%;left:6.3%;top:2.8%}
.device-phone .device-frame:before,.faq-phone .device-frame:before{left:1.4%;top:50%;transform:translateY(-50%);width:1.8%;height:28%;border-radius:14px;background:#03070b;box-shadow:none}
.device-phone .device-frame:after,.faq-phone .device-frame:after{top:-4px;left:26%;right:auto;width:11%;height:3px;border-radius:2px 2px 0 0;background:#73808d}
/* The landscape screen asset includes its own iOS safe area. */
.device-phone figcaption{margin:28px 0 0;max-width:none;align-items:center}
.faq .faq-featured{background:#eae3f2;border-color:#d2c4df;border-radius:10px;margin-bottom:12px}
.faq .faq-featured summary{font-weight:700;color:#62407e}
.faq-question-emphasis{text-decoration-color:#9f7cbb;text-decoration-thickness:1.5px;text-underline-offset:5px}
.faq .faq-featured .faq-reasons{padding:0 30px 22px 0;color:var(--slate)}
.faq .faq-featured .faq-reasons p{padding:0;margin:0 0 14px}
.faq-reasons ul{padding-left:19px;margin:0 0 18px;font-size:14px;line-height:1.75}
.faq-reasons li+li{margin-top:12px}
.faq-reasons strong{color:var(--ink)}
.faq .faq-reasons .text-button{font-size:13px;color:#62407e;min-height:44px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.device-phone{width:73%;right:0;top:62%}.device-phone .device-frame{border-radius:25px}.device-phone .device-screen{border-radius:18px}.faq-phone .device-frame{padding:5px;border-radius:25px}.faq-phone .device-screen{border-radius:18px}}
@media(max-width:620px){.faq .faq-heading h2{font-size:48px}.faq .faq-heading h2 br{display:none}.faq .faq-heading h2 span{display:block}.faq-lead{max-width:310px;font-size:14px}.faq .faq-featured .faq-reasons{padding-right:6px}.faq-reasons ul{font-size:13px}}
@media(max-width:600px){.device-phone{width:94%;right:0;top:61%}.device-phone .device-frame{border-radius:23px}.device-phone .device-screen{border-radius:17px}.device-phone figcaption{margin:24px 0 0;max-width:none}.device-phone figcaption span{max-width:none}.faq-phone .device-frame{border-radius:24px}.faq-phone .device-screen{border-radius:18px}}
@keyframes phone-drift{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(8px) rotate(4deg)}}