/* faq: grouped accordions with sticky group tabs */
.fan{position:relative;height:clamp(300px,34vw,460px)}
.fan img{position:absolute;top:8%;left:50%;width:58%;max-width:340px;aspect-ratio:1;object-fit:cover;border:8px solid var(--cream);border-radius:18px;
  box-shadow:0 7px 0 rgba(16,30,56,.2),0 26px 34px -16px rgba(16,30,56,.6);translate:-50% 0;transition:rotate .6s var(--spring),translate .6s var(--spring)}
.fan img:nth-child(1){rotate:-14deg;translate:-98% 6%}
.fan img:nth-child(2){rotate:-2deg;z-index:2;animation:bob 6s ease-in-out infinite}
.fan img:nth-child(3){rotate:12deg;translate:-4% 10%}
.fan:hover img:nth-child(1){rotate:-20deg;translate:-108% 4%}
.fan:hover img:nth-child(3){rotate:18deg;translate:6% 8%}
.qbub{position:absolute;z-index:3;right:6%;top:0;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font:400 clamp(2.4rem,4vw,3.6rem)/1 "Lilita One",sans-serif;color:var(--plum);background:var(--sun-l);border:4px solid #fff;box-shadow:var(--cut);animation:wiggle 3.4s ease-in-out infinite}

.faqs{--bg:var(--sage);padding-top:40px;position:relative;overflow-x:clip}
.cutouts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.faq-lay{position:relative;z-index:1;display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(32px,4vw,64px);align-items:start;max-width:1260px}
.rail{position:sticky;top:calc(var(--hh) + 18px);display:grid;gap:18px}
.torn{clip-path:polygon(0 0,0.0% 99.0%,3.8% 99.5%,7.7% 97.9%,11.5% 99.8%,15.4% 98.3%,19.2% 98.8%,23.1% 99.8%,26.9% 98.4%,30.8% 99.9%,34.6% 98.6%,38.5% 99.8%,42.3% 99.7%,46.2% 98.6%,50.0% 97.4%,53.8% 99.6%,57.7% 99.3%,61.5% 98.0%,65.4% 97.0%,69.2% 98.2%,73.1% 98.7%,76.9% 96.9%,80.8% 99.9%,84.6% 97.3%,88.5% 99.1%,92.3% 99.5%,96.2% 99.6%,100.0% 99.0%,100.0% 2.6%,96.2% 0.6%,92.3% 1.9%,88.5% 2.0%,84.6% 1.2%,80.8% 1.8%,76.9% 0.2%,73.1% 0.2%,69.2% 0.7%,65.4% 2.2%,61.5% 1.4%,57.7% 1.0%,53.8% 1.9%,50.0% 1.5%,46.2% 1.0%,42.3% 2.5%,38.5% 2.2%,34.6% 0.8%,30.8% 1.8%,26.9% 1.7%,23.1% 2.8%,19.2% 2.3%,15.4% 0.9%,11.5% 3.1%,7.7% 0.4%,3.8% 1.3%,0.0% 2.4%)}
.rail-art{margin:0;padding:18px 18px 22px;background:var(--tex),var(--cream);rotate:-1.5deg;filter:drop-shadow(0 8px 0 rgba(16,30,56,.18))}
.stack{position:relative;aspect-ratio:1.25}
.stack img{position:absolute;top:6%;left:50%;width:62%;aspect-ratio:1;object-fit:cover;border:6px solid #fff;border-radius:14px;translate:-50% 0;
  box-shadow:0 6px 0 rgba(16,30,56,.18);opacity:.95;transition:rotate .6s var(--spring),translate .6s var(--spring),scale .5s var(--spring),z-index 0s .2s}
.stack img:nth-child(1){rotate:-12deg;translate:-92% 8%;scale:.86}
.stack img:nth-child(2){rotate:-4deg;translate:-66% 2%;scale:.9}
.stack img:nth-child(3){rotate:5deg;translate:-34% 4%;scale:.9}
.stack img:nth-child(4){rotate:12deg;translate:-8% 9%;scale:.86}
.stack img.on{z-index:3;rotate:-2deg;translate:-50% -2%;scale:1.08;opacity:1;box-shadow:0 8px 0 var(--terra-d),0 24px 30px -14px rgba(16,30,56,.6)}
.rail-art figcaption{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px}
.rk{font:800 .72rem/1 Outfit,sans-serif;letter-spacing:.14em;color:var(--terra-d)}
.rt{font:400 1.6rem/1 "Lilita One",sans-serif;color:var(--plum)}

.gtabs{z-index:20}
.gtabs ul{list-style:none;margin:0;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--tex),var(--cream);border-radius:20px;
  box-shadow:0 5px 0 var(--sage-d),0 18px 26px -14px rgba(16,30,56,.5)}
.gtabs a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:.4em .6em;border-radius:14px;text-decoration:none;
  font:400 1.12rem/1.05 "Lilita One",sans-serif;color:var(--plum);transition:background .25s,color .25s,transform .35s var(--spring)}
.gtabs a:hover{transform:rotate(-2deg);background:var(--sun-l)}
.gtabs a.on{color:var(--ct,#fff);background:var(--c)}
.t-terra{--c:var(--terra);--ct:var(--plum)}.t-blue{--c:var(--blue)}.t-plum{--c:var(--plum)}.t-sage{--c:var(--sage-d)}

.rail-start{position:relative;padding:22px 22px 24px;border-radius:22px;background:var(--sun);color:var(--ink);rotate:1deg;box-shadow:0 6px 0 #C98A12,0 20px 28px -16px rgba(16,30,56,.55)}
.rail-start::after{content:"";position:absolute;top:-14px;right:22px;width:90px;height:28px;rotate:6deg;background:rgba(255,255,255,.6);box-shadow:0 2px 0 rgba(16,30,56,.1)}
.rs-k{margin:0;font:800 .72rem/1 Outfit,sans-serif;letter-spacing:.14em;color:var(--plum)}
.rs-h{font-size:2rem;margin:6px 0 6px;color:var(--plum);text-shadow:0 3px 0 var(--terra-l)}
.rail-start p:not(.rs-k){margin:0 0 14px;color:#24344F}

.grp{position:relative;padding:0 0 30px;scroll-margin-top:calc(var(--hh) + 30px)}
.grp + .grp{margin-top:44px}
.grp::before{content:"";position:absolute;inset:40px -14px 0 14px;border-radius:28px;background:var(--c);opacity:.22;rotate:1.4deg;z-index:-1}
.grp-h{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:16px;padding:22px 26px 30px;margin-bottom:-6px;background:var(--c);color:var(--ct,var(--cream));clip-path:polygon(0 0,0.0% 99.5%,3.8% 98.4%,7.7% 99.9%,11.5% 97.9%,15.4% 97.6%,19.2% 98.2%,23.1% 97.2%,26.9% 99.0%,30.8% 97.8%,34.6% 98.1%,38.5% 98.1%,42.3% 98.5%,46.2% 97.3%,50.0% 97.0%,53.8% 98.5%,57.7% 97.9%,61.5% 99.8%,65.4% 97.8%,69.2% 97.9%,73.1% 96.8%,76.9% 97.4%,80.8% 99.1%,84.6% 98.8%,88.5% 97.9%,92.3% 99.9%,96.2% 98.5%,100.0% 99.5%,100% 0,0 0);
  rotate:-.8deg}
.grp-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;min-width:0}
.grp-h h2{font-size:clamp(2rem,3.6vw,3.2rem);margin:0;color:var(--ct,var(--cream));text-shadow:0 4px 0 rgba(16,30,56,.3)}
.g-terra .grp-h h2{text-shadow:0 4px 0 rgba(255,246,228,.45)}
.grp-n{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:400 1.9rem/1 "Lilita One",sans-serif;color:var(--ca,var(--c));background:var(--cream);box-shadow:0 4px 0 rgba(16,30,56,.25);rotate:-6deg}
.grp-c{font:700 .8rem/1 Outfit,sans-serif;letter-spacing:.08em;padding:.6em .9em;border-radius:999px;background:var(--cream);color:var(--plum)}
.g-terra{--c:var(--terra);--ct:var(--plum);--ca:var(--terra-d)}.g-blue{--c:var(--blue)}.g-plum{--c:var(--plum)}.g-sage{--c:var(--leaf)}
.grp .faq{position:relative;margin-top:14px;padding:0 6px}
.grp .acc{box-shadow:0 5px 0 var(--c),0 16px 24px -16px rgba(16,30,56,.45)}
.grp .acc button[aria-expanded="true"] .sign{background:var(--c);color:var(--ct,var(--cream))}
.ans a{color:var(--terra-d);font-weight:600}

@media (max-width:899px){
  .fan{height:min(72vw,400px);max-width:560px;margin-inline:auto;width:100%}
}
/* tablet and phone: rail unfolds; tabs stay sticky above the questions, art and start card frame them */
@media (max-width:1023px){
  .faq-lay{grid-template-columns:1fr;gap:24px;max-width:860px}
  .rail{display:contents}
  .rail-art{order:0;max-width:520px;width:100%;justify-self:center}
  .gtabs{order:1;position:sticky;top:calc(var(--hh) + 8px);align-self:start}
  .qs{order:2}
  .rail-start{order:3;text-align:center;max-width:520px;width:100%;justify-self:center}
}
@media (max-width:599px){
  .gtabs ul{padding:6px;gap:6px}
  .gtabs a{min-height:40px;font-size:1rem;padding:.3em .5em}
  .grp-h{padding:18px 18px 26px;gap:12px}
  .grp-n{width:46px;height:46px;font-size:1.5rem}
  .grp::before{inset:40px -6px 0 6px}
}
@media (max-height:520px) and (orientation:landscape){
  .fan{height:62vh}
  .fan img{width:42%;top:14%}
  .fan img:nth-child(1){translate:-90% 8%}
  .fan img:nth-child(3){translate:-10% 12%}
  .faq-lay{grid-template-columns:260px 1fr;max-width:none}
  .rail{display:grid;order:0;top:calc(var(--hh) + 8px);gap:10px}
  .rail-art,.rail-start{display:none}
  .gtabs{position:static}
  .gtabs a{min-height:40px}
}

/* desktop: faint star trail fills the left column below the sticky rail (rail paints over it while scrolling) */
@media (min-width:1024px){
  .faq-lay::before{content:"";position:absolute;left:0;top:1000px;bottom:40px;width:380px;pointer-events:none;opacity:.5;
    -webkit-mask:linear-gradient(transparent,#000 160px);mask:linear-gradient(transparent,#000 160px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='360' viewBox='0 0 380 360'%3E%3Cpath d='M60 20 C200 60 300 120 250 190 S90 280 170 350' fill='none' stroke='%23FFF6E4' stroke-width='4' stroke-linecap='round' stroke-dasharray='2 16'/%3E%3Cg fill='%23F7D56B'%3E%3Cpath d='M60 2 l5 13 14 1 -11 9 4 14 -12 -8 -12 8 4 -14 -11 -9 14 -1z'/%3E%3Cpath transform='translate(250 172) scale(.7)' d='M0 -18 l5 13 14 1 -11 9 4 14 -12 -8 -12 8 4 -14 -11 -9 14 -1z'/%3E%3C/g%3E%3Ccircle cx='320' cy='70' r='6' fill='%23FFF6E4'/%3E%3Ccircle cx='110' cy='250' r='5' fill='%23FFF6E4'/%3E%3C/svg%3E") top center/380px 360px repeat-y}
}