/* User-supplied onboarding illustrations, in step order. */
.faq-page .faq-list details{position:relative;isolation:isolate;overflow:hidden}
.faq-page .faq-list details::before{content:'';position:absolute;z-index:-1;pointer-events:none;top:-9px;left:5px;width:84px;height:105px;background:url("faq-question-mark.svg") center/contain no-repeat}
.faq-page .faq-list summary{justify-content:flex-start;gap:16px;position:relative;padding-left:30px;min-height:84px}
.faq-page .faq-list summary::before{content:none}
.faq-page .faq-list summary::after{margin-left:auto}
@media(max-width:580px){.faq-page .faq-list summary{gap:12px;padding-left:20px}.faq-page .faq-list details::before{width:72px;height:90px;left:2px;top:-5px}}
.faq-page #how{background:#F8FBF8;padding:64px 0 72px}
.faq-page #how .container{max-width:1280px;padding-inline:40px}
.faq-page #how .section-head{max-width:860px;margin-bottom:40px}
.faq-page .eyebrow{font-weight:400;border:0}
.faq-page #how h2{color:#123D2B}
.faq-page .steps{gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-page .step-card{min-width:0;display:flex;flex-direction:column;padding:0 24px 26px;background:#FFF;border:0;border-radius:22px;box-shadow:0 4px 22px #06362A0A}
.faq-page .step-visual{margin:0 -24px 22px;aspect-ratio:3/2;overflow:hidden;border-radius:22px 22px 0 0;background:linear-gradient(130deg,#EEFBF2,#FFF9E7)}
.faq-page .step-visual img{display:block;width:100%;height:100%;object-fit:contain}
.faq-page .step-card .no{top:14px;left:14px;width:34px;height:34px;z-index:1;background:#004C24;color:#FFF;box-shadow:0 3px 12px #004C2420;font-size:15px}
.faq-page .step-card h3{margin:0;font-size:21px;line-height:1.5;color:#123D2B}
.faq-page .step-card p{font-size:15px;line-height:1.85;color:#65746B;margin:10px 0 20px}
.faq-page .step-card .time{align-self:flex-start;margin-top:auto;background:#E4F9EB;color:#176343;font-weight:400;line-height:1.6}
@media(max-width:1100px){.faq-page #how .container{padding-inline:28px}.faq-page .steps{gap:18px}.faq-page .step-card{padding-inline:20px}.faq-page .step-visual{margin-inline:-20px}.faq-page .step-card h3{font-size:19px}}
@media(max-width:760px){.faq-page .steps{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.faq-page .step-visual{max-height:320px;aspect-ratio:3/2}.faq-page #how{padding:44px 0 52px}.faq-page #how .container{padding-inline:20px}.faq-page .step-card h3{font-size:21px}}

.faq-page #how{scroll-margin-top:88px}
.faq-page #how .step-count{white-space:nowrap}

/* Floating illustrations above compact text cards. */
.faq-page .step-card{isolation:isolate;background:transparent;box-shadow:none;border-radius:0;padding:0 24px 24px}
.faq-page .step-card::before{content:'';position:absolute;z-index:-1;inset:180px 0 0;background:#FFF;border-radius:22px;box-shadow:0 4px 22px #06362A0A}
.faq-page .step-visual{height:215px;aspect-ratio:auto;margin:0 -8px 12px;background:none;border-radius:0;overflow:visible}
.faq-page .step-visual img{object-fit:contain;filter:drop-shadow(0 8px 7px #06362A0A)}
.faq-page .step-card .no{top:184px;left:18px;width:28px;height:28px;font-size:13px;box-shadow:none}
.faq-page .step-card h3{font-size:19px}
.faq-page .step-card p{font-size:14px;line-height:1.8;margin:8px 0 16px}
.faq-page .step-card .time{font-size:12px}
@media(max-width:1100px) and (min-width:761px){.faq-page .step-visual{height:180px}.faq-page .step-card::before{top:150px}.faq-page .step-card .no{top:154px}.faq-page .step-card{padding-inline:18px}.faq-page .step-card h3{font-size:18px}}
@media(max-width:760px){.faq-page .steps{gap:28px;max-width:440px}.faq-page .step-visual{height:230px;max-height:none}.faq-page .step-card::before{top:194px}.faq-page .step-card .no{top:198px}.faq-page .step-card h3{font-size:20px}.faq-page .step-card p{font-size:15px}}

/* Smaller floating artwork with more breathing room. */
.faq-page .step-visual img{width:84%;margin-inline:auto}
.faq-page .step-visual{height:200px;margin-bottom:22px}
.faq-page .step-card::before{top:184px}
.faq-page .step-card .no{top:190px}
@media(max-width:1100px) and (min-width:761px){.faq-page .step-visual{height:172px}.faq-page .step-card::before{top:156px}.faq-page .step-card .no{top:162px}}
@media(max-width:760px){.faq-page .step-visual{height:204px;margin-bottom:22px}.faq-page .step-visual img{width:82%}.faq-page .step-card::before{top:188px}.faq-page .step-card .no{top:194px}}

/* Step badges straddle the top-left edge of each text card. */
.faq-page .step-card .no{top:170px;left:20px;box-shadow:0 3px 10px #004C241A}
@media(max-width:1100px) and (min-width:761px){.faq-page .step-card .no{top:142px}}
@media(max-width:760px){.faq-page .step-card .no{top:174px}}

/* Remove the decorative question mark and restore the original text alignment. */
.faq-page .faq-list details::before{content:none}
.faq-page .faq-list summary{padding-left:0;min-height:0}

/* FAQ colors follow the logo palette rather than the legacy gray/purple text. */
.faq-page #faq{--faq-green:#1EC95C;--faq-ink:#004C24;--faq-mint:#DEFCE9;background:#F8FCF9}
.faq-page #faq .eyebrow{background:var(--faq-mint);color:var(--faq-ink)}
.faq-page #faq h2{color:var(--faq-ink)}
.faq-page #faq details{background:#FFF}
.faq-page #faq details[open]{background:linear-gradient(115deg,#F1FDF5,#FFF 65%)}
.faq-page #faq summary{color:var(--faq-ink)}
.faq-page #faq summary::after{background:var(--faq-mint);color:var(--faq-ink)}
.faq-page #faq details[open] summary::after{background:var(--faq-green);color:var(--faq-ink)}
.faq-page #faq details p{color:#52695C}
.faq-page #faq summary:focus-visible{outline:2px solid var(--faq-green);outline-offset:4px;border-radius:8px}