.sfq{--sfq-cream:var(--e-gv-e561443,#f2f0eb);--sfq-ink:var(--e-gv-35cef91,#0D0D0D);--sfq-accent:var(--e-gv-bdd69cf,#F2B705);--sfq-head:var(--e-gv-663f235,"Chakra Petch");--sfq-body:var(--e-gv-5a42bf5,"Barlow");position:relative;overflow:hidden;background:var(--sfq-cream);color:var(--sfq-ink);-webkit-tap-highlight-color:transparent}
.sfq *,.sfq *::before,.sfq *::after{box-sizing:border-box}
.sfq ::selection{background:rgba(242,183,5,.32);color:var(--sfq-ink)}
.sfq__mark{position:absolute;top:-2rem;left:-.5rem;z-index:0;font-family:var(--sfq-head),sans-serif;font-weight:700;font-style:italic;font-size:clamp(12rem,48vw,26rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(13,13,13,.1);pointer-events:none;user-select:none;will-change:transform}
.sfq__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:2.25rem;width:100%;max-width:84rem;margin:0 auto;padding:3.25rem 1.15rem 3.5rem}
.sfq__head{display:flex;flex-direction:column;gap:.7rem;max-width:34rem}
.sfq__eyebrow{display:flex;align-items:center;gap:.6rem;margin:0;font-family:var(--sfq-body),sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(13,13,13,.55)}
.sfq__dot{flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--sfq-accent)}
.sfq__title{margin:0;font-family:var(--sfq-head),sans-serif;font-weight:700;font-size:clamp(2.1rem,9vw,2.9rem);line-height:.98;letter-spacing:-.035em;color:var(--sfq-ink)}
.sfq__title em{font-style:italic;color:var(--sfq-ink);background:linear-gradient(transparent 62%,rgba(242,183,5,.85) 62%)}
.sfq__lead{margin:0;font-family:var(--sfq-body),sans-serif;font-size:1rem;line-height:1.65;color:rgba(13,13,13,.66)}
.sfq__body{display:flex;flex-direction:column;gap:2.25rem}
.sfq__group{display:flex;flex-direction:column;gap:.35rem}
.sfq__group-head{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .35rem}
.sfq__group-num{font-family:var(--sfq-head),sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--sfq-accent)}
.sfq__group-name{font-family:var(--sfq-body),sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(13,13,13,.5)}
.sfq__list{border-top:1px solid rgba(13,13,13,.16)}
.sfq__item{position:relative;border-bottom:1px solid rgba(13,13,13,.16)}
.sfq__item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--sfq-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sfq__item[open]::after{transform:scaleX(1)}
.sfq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 0;cursor:pointer;list-style:none;font-family:var(--sfq-head),sans-serif;font-weight:700;font-size:clamp(1.02rem,4.4vw,1.2rem);line-height:1.25;letter-spacing:-.015em;color:var(--sfq-ink);transition:color .3s ease}
.sfq__q::-webkit-details-marker{display:none}
.sfq__q:hover{color:rgba(13,13,13,.65)}
.sfq__q-text{flex:1 1 auto}
.sfq__sign{position:relative;flex:none;width:1.05rem;height:1.05rem;margin-top:.2rem}
.sfq__sign::before,.sfq__sign::after{content:"";position:absolute;top:50%;left:50%;width:.9rem;height:1.5px;background:var(--sfq-ink);transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease,background-color .3s ease}
.sfq__sign::after{transform:translate(-50%,-50%) rotate(90deg)}
.sfq__item[open] .sfq__sign::before{background:var(--sfq-accent)}
.sfq__item[open] .sfq__sign::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.sfq__a{padding:0 0 1.15rem;max-width:44rem;animation:sfq-open .4s cubic-bezier(.22,1,.36,1) both}
.sfq__a p{margin:0;font-family:var(--sfq-body),sans-serif;font-size:.94rem;line-height:1.65;color:rgba(13,13,13,.68)}
@keyframes sfq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes sfq-drift{from{transform:translate3d(-2%,2.5rem,0) rotate(-4deg)}to{transform:translate3d(7%,-2.5rem,0) rotate(3deg)}}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.sfq__mark{animation:sfq-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
}
@media (min-width:1025px){
.sfq__inner{display:grid;grid-template-columns:4fr 8fr;align-items:start;column-gap:clamp(3rem,6vw,6rem);padding:6rem 3rem 6.5rem}
.sfq__head{position:sticky;top:5rem;max-width:24rem}
.sfq__title{font-size:clamp(2.9rem,4.4vw,4.4rem)}
.sfq__lead{font-size:1.08rem}
.sfq__body{gap:3rem}
.sfq__q{padding:1.25rem 0;font-size:clamp(1.15rem,1.5vw,1.4rem)}
.sfq__a{padding-bottom:1.5rem}
.sfq__a p{font-size:1rem}
.sfq__mark{top:-4rem;left:-1rem;font-size:clamp(22rem,30vw,34rem)}
@keyframes sfq-drift{from{transform:translate3d(-4%,6rem,0) rotate(-7deg)}to{transform:translate3d(12%,-6rem,0) rotate(5deg)}}
}
@media (prefers-reduced-motion:reduce){
.sfq__a{animation:none}
.sfq__mark{animation:none;transform:none}
.sfq__item::after,.sfq__sign::before,.sfq__sign::after{transition:none}
}
