/* =====================================================================
   FAQ subpage — layers on top of styles-v17.css (tokens, header, footer,
   buttons, reveal, mobile all inherited). Shares the sub-hero / section /
   CTA language of the How It Works and Why Us pages. The Q&A list is an
   accordion built on native <details>/<summary>: questions show, a click
   reveals the answer — and it still works with JavaScript disabled.
   ===================================================================== */

/* nav current state */
.navlinks a.current{color:var(--navy);font-weight:700;}

/* ---------- sub-hero ---------- */
.faq-hero{padding:66px 0 6px;}
.faq-eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--magenta);margin-bottom:16px;}
.faq-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,3.9vw,2.8rem);line-height:1.08;letter-spacing:-.02em;color:var(--navy);max-width:none;}
.faq-hero .lede{margin-top:20px;font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.65;color:var(--ink-muted);max-width:66ch;}
.faq-hero .lede .emph{color:var(--ink);font-weight:700;background:linear-gradient(transparent 62%, rgba(253,58,104,.22) 62%);padding:0 2px;}

/* ---------- accordion section ---------- */
.faq-sec{padding:48px 0 84px;}
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px;counter-reset:faq;}

.faq-item{
  counter-increment:faq;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.faq-item:hover{border-color:rgba(253,58,104,.35);}
.faq-item[open]{
  border-color:rgba(253,58,104,.5);
  box-shadow:0 26px 50px -34px rgba(15,23,42,.55);
}

/* summary = the always-visible question row */
.faq-q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 26px;
  outline:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:focus-visible{outline:2px solid var(--magenta);outline-offset:-2px;border-radius:16px;}

/* the counter number badge */
.faq-num{
  flex:0 0 auto;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  color:var(--navy);
  background:var(--bg);
  border:1px solid var(--border);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.faq-item[open] .faq-num{
  background:linear-gradient(135deg,var(--magenta) 0%,var(--magenta-deep) 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 10px 20px -10px rgba(253,58,104,.6);
}
.faq-num::before{content:counter(faq,decimal-leading-zero);}

.faq-q-text{
  flex:1 1 auto;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.28rem);
  line-height:1.3;letter-spacing:-.01em;
  color:var(--navy);
}

/* plus / minus toggle drawn in CSS */
.faq-toggle{
  flex:0 0 auto;
  position:relative;
  width:26px;height:26px;
  border-radius:50%;
  border:1.6px solid var(--border);
  transition:border-color .35s ease,transform .4s cubic-bezier(.2,.8,.2,1),background .35s ease;
}
.faq-toggle::before,.faq-toggle::after{
  content:"";position:absolute;top:50%;left:50%;
  width:11px;height:2px;border-radius:2px;
  background:var(--navy);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease,background .35s ease;
}
.faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg);}
.faq-item[open] .faq-toggle{
  border-color:var(--magenta);
  transform:rotate(180deg);
  background:rgba(253,58,104,.08);
}
.faq-item[open] .faq-toggle::before,.faq-item[open] .faq-toggle::after{background:var(--magenta);}
.faq-item[open] .faq-toggle::after{opacity:0;}

/* answer body — reveals on open with a soft slide/fade.
   The :not([open]) rule explicitly collapses closed answers: real browsers
   do this via their UA stylesheet, but some embedded/preview renderers strip
   that rule, so we state it ourselves to guarantee "questions only" by default. */
.faq-item:not([open]) .faq-a{display:none;}
.faq-a{padding:0 26px 26px 84px;}
.faq-item[open] .faq-a{animation:faqReveal .42s cubic-bezier(.2,.8,.2,1);}
@keyframes faqReveal{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.faq-a p{color:var(--ink-muted);font-size:1.02rem;line-height:1.72;max-width:64ch;}
.faq-a p + p{margin-top:12px;}
.faq-a strong{color:var(--ink);font-weight:700;}

/* ordered "process" steps inside an answer */
.faq-steps{list-style:none;counter-reset:step;margin:16px 0 4px;display:flex;flex-direction:column;gap:11px;max-width:64ch;}
.faq-steps li{position:relative;counter-increment:step;padding-left:40px;color:var(--ink-muted);font-size:1rem;line-height:1.55;}
.faq-steps li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  color:#fff;background:var(--navy);
}

/* model / bullet list inside an answer */
.faq-models{list-style:none;margin:16px 0 4px;display:flex;flex-direction:column;gap:12px;max-width:64ch;}
.faq-models li{position:relative;padding-left:26px;color:var(--ink-muted);font-size:1rem;line-height:1.6;}
.faq-models li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:3px;background:var(--magenta);}
.faq-models li strong{color:var(--ink);font-weight:700;}

/* inline link to the How It Works page */
.faq-inline-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  color:var(--navy);font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--magenta);padding-bottom:2px;
  transition:color .2s ease;
}
.faq-inline-link:hover{color:var(--magenta);}
.faq-inline-link svg{width:17px;height:17px;}

/* still-have-questions strip above the CTA */
.faq-tail{max-width:880px;margin:40px auto 0;text-align:center;}
.faq-tail p{color:var(--ink-muted);font-size:1.02rem;}
.faq-tail a{color:var(--magenta);font-weight:700;text-decoration:none;}
.faq-tail a:hover{text-decoration:underline;}

/* ---------- CTA (uses the home page .final video section) ---------- */
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.final .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1);}

@media(prefers-reduced-motion:reduce){
  .faq-item,.faq-toggle{transition:none;}
  .faq-item[open] .faq-a{animation:none;}
}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .faq-q{padding:18px 18px;gap:14px;}
  .faq-num{width:34px;height:34px;font-size:.92rem;}
  .faq-a{padding:0 18px 22px 18px;}
}