/* FAQ — ReFrame brand (Poppins, pink→purple, dark). Responsive 2-column flow;
   desktop heading column is sticky (scrolls with the page, then pins while the
   questions scroll past). Namespaced `faq-`. */

.faq-wrap,.faq-wrap *{box-sizing:border-box;margin:0;padding:0}

/* ---- dark, brand-tinted section shell ---- */
.faq-section{
  display:flex;justify-content:center;
  /* Bleed over the .stage's 11px white padding (left/right/bottom) so the dark
     section runs full-bleed to the viewport edges — no white frame. */
  margin:0 -11px -11px;
  width:calc(100% + 22px);
  padding:96px 24px 104px;
  background:
    radial-gradient(1100px 640px at 12% 4%, #230c2e 0%, transparent 56%),
    radial-gradient(900px 560px at 94% 100%, #2a0b32 0%, transparent 55%),
    linear-gradient(180deg, #0b0710 0%, #060309 100%);
  background-color:#060309;
}

.faq-wrap{
  position:relative;width:100%;max-width:1120px;
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:64px;align-items:start;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  --faq-pink:#EF0385;--faq-purple:#6E24B2;
}

/* ============================ sticky heading column ============================ */
.faq-aside{position:sticky;top:104px;align-self:start}
.faq-aside-inner{display:flex;flex-direction:column;align-items:flex-start}

.faq-tag{
  display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:999px;
  background:rgba(239,3,133,.12);color:#ff5cb0;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.faq-headline{
  margin-top:20px;
  font-size:clamp(34px,4vw,54px);font-weight:700;line-height:1.08;letter-spacing:-.5px;
  background-image:linear-gradient(150deg,#ffffff 0%,#ffd7ee 60%,#e7b8ff 120%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* CTA — brand gradient */
.faq-cta{
  position:relative;
  margin-top:32px;display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:58px;border-radius:12px;border:1px solid transparent;text-decoration:none;
  background:linear-gradient(135deg,#EF0385 0%,#6E24B2 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 12px 28px rgba(146,0,59,.42);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.faq-cta::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(294px 104px at 50% 100%,#fff 0%,rgba(255,255,255,0) 100%);
  opacity:.28;mix-blend-mode:overlay;pointer-events:none;
}
.faq-cta:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#ff2a9d 0%,#7d2ec8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 16px 34px rgba(214,19,122,.5);
}
.faq-cta:active{transform:translateY(0)}
.faq-cta-label{position:relative;font-size:18px;font-weight:600;line-height:1;color:#fff;pointer-events:none}
.faq-cta-note{margin-top:14px;font-size:13px;font-weight:500;color:rgba(255,255,255,.42)}

/* ============================ question cards ============================ */
.faq-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.faq-item{
  position:relative;border-radius:14px;
  background:rgba(255,255,255,.02);transition:background .2s ease;
}
/* 1px gradient border (brand pink → purple) via mask */
.faq-item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(171deg,rgba(239,3,133,.55) -30%,rgba(110,36,178,.1) 75%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.faq-item:hover{background:rgba(239,3,133,.06)}
.faq-item-btn{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;min-height:72px;padding:22px 26px;
  background:none;border:0;border-radius:inherit;cursor:pointer;
  font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
}
.faq-q{font-size:17px;font-weight:500;line-height:1.35;color:#fff;pointer-events:none}
.faq-plus{
  flex:none;width:15px;height:15px;pointer-events:none;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.faq-plus line{stroke:#ff5cb0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.faq-item.faq-open{background:rgba(239,3,133,.08)}
.faq-item.faq-open .faq-plus{transform:rotate(45deg)}

/* ============================ MOBILE reflow (<=860px) ============================ */
@media (max-width:860px){
  .faq-section{padding:64px 18px 72px}
  .faq-wrap{grid-template-columns:1fr;gap:32px}
  .faq-aside{position:static;top:auto}
  .faq-headline{font-size:clamp(30px,9vw,44px)}
  .faq-cta{width:min(320px,86vw)}
  .faq-item-btn{padding:19px 20px;min-height:64px}
  .faq-q{font-size:16px}
}

@media (prefers-reduced-motion:reduce){.faq-wrap *{transition:none!important}}