/* FAQ - Gradient spine treatment (option 07 from the FAQ deck).
   A vertical aurora rail; each question hangs off it at a cyan node. */

.faq-spine{
  position:relative;
  padding-left:30px;
  max-width:820px;
}
.faq-spine::before{
  content:"";
  position:absolute; left:7px; top:8px; bottom:6px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg,#a78bfa,#22d3ee 55%,#ec4899);
  opacity:.75;
}
details.fs-item{
  position:relative;
  padding:0 0 30px;
}
details.fs-item:last-child{padding-bottom:0}
details.fs-item::before{
  content:"";
  position:absolute; left:-29px; top:7px;
  width:10px; height:10px; border-radius:50%;
  background:var(--bg);
  border:2px solid var(--cyan);
  transition:background .25s, box-shadow .25s;
}
details.fs-item[open]::before{
  background:var(--cyan);
  box-shadow:0 0 14px rgba(34,211,238,.55);
}
details.fs-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
details.fs-item summary::-webkit-details-marker{display:none}
/* arrow cue (same glyph as the site CTAs) so the question reads as clickable */
details.fs-item summary::after{
  content:""; flex:0 0 auto;
  width:16px; height:16px;
  background-color:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease, background-color .2s ease;
}
details.fs-item summary:hover::after{background-color:var(--cyan)}
details.fs-item[open] summary::after{
  transform:rotate(90deg);
  background-color:var(--cyan);
}
details.fs-item summary:hover h3{color:var(--cyan)}
details.fs-item:has(summary:hover)::before{
  box-shadow:0 0 14px rgba(34,211,238,.55);
}
details.fs-item summary:focus-visible{
  outline:2px solid var(--cyan); outline-offset:4px; border-radius:4px;
}
.faq-spine h3{
  font-family:var(--display); font-weight:600;
  font-size:1.08rem; letter-spacing:-.01em;
  color:var(--ink); margin:0;
  transition:color .2s;
}
.faq-spine p{
  font-family:'Roboto',system-ui,sans-serif;
  font-size:.95rem; line-height:1.7;
  color:var(--muted-strong);
  margin:8px 0 0; max-width:70ch;
}

@media (max-width:600px){
  .faq-spine{padding-left:24px}
  details.fs-item::before{left:-23px}
  details.fs-item{padding-bottom:26px}
}

/* Optional split layout: heading left of the spine */
.faq-spine-wrap{
  display:grid; grid-template-columns:1fr 1.7fr;
  gap:56px; align-items:start;
}
.faq-spine-wrap .sec-h{
  position:sticky; top:96px; margin:0;
}
@media (max-width:800px){
  .faq-spine-wrap{grid-template-columns:1fr; gap:22px}
  .faq-spine-wrap .sec-h{position:static}
}

/* Heading column when eyebrow + h2 travel together */
.faq-spine-wrap .faq-head{position:sticky; top:96px}
.faq-spine-wrap .faq-head .sec-h{margin:14px 0 0}
@media (max-width:800px){
  .faq-spine-wrap .faq-head{position:static}
}