/* ZappFlow public tools — FAQ presentation layer
   Shared visual polish only. Does not alter FAQ copy, schema, or tool behaviour. */

.faq-section{
  position:relative;
  overflow:hidden;
  padding-top:96px!important;
  padding-bottom:104px!important;
  border-top:1px solid #e2dee8!important;
  background:
    radial-gradient(circle at 92% 14%,rgba(120,69,255,.10),transparent 28%),
    radial-gradient(circle at 4% 88%,rgba(120,69,255,.055),transparent 24%),
    linear-gradient(180deg,#fbfafc 0%,#f6f3fa 100%)!important;
}
.faq-section::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-170px;
  top:-155px;
  border:1px solid rgba(120,69,255,.12);
  border-radius:88px;
  transform:rotate(29deg);
  pointer-events:none;
}
.faq-section::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#7845ff 0%,#9b76ff 36%,rgba(155,118,255,0) 82%);
  opacity:.88;
  pointer-events:none;
}
.faq-section>.wrap,
.faq-section .wrap{
  position:relative;
  z-index:1;
}

/* Section heading */
.faq-section .faq-kicker,
.faq-section .section-kicker,
.faq-section .eyebrow{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:0 10px!important;
  border:1px solid #d9ccff!important;
  border-radius:999px;
  background:#f0eaff!important;
  color:#6037c6!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase;
}
.faq-section .faq-kicker::before,
.faq-section .section-kicker::before,
.faq-section .eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7845ff;
  box-shadow:0 0 0 4px rgba(120,69,255,.10);
}
.faq-section h2,
.faq-section .section-title{
  color:#1a1720!important;
  margin-top:14px!important;
  margin-bottom:0!important;
  max-width:900px;
  text-wrap:balance;
}
.faq-section .faq-head{
  margin-bottom:30px!important;
}
.faq-section .section-lead,
.faq-section .faq-head p{
  color:#5a5561!important;
  font-size:15px!important;
  line-height:1.72!important;
}

/* Accordion container */
.faq-section .faq-list,
.faq-section .faqs{
  display:grid!important;
  gap:12px!important;
  border:0!important;
  margin-top:30px;
}
.faq-section .faq-head + .faq-list,
.faq-section .faq-head + .faqs{
  margin-top:0;
}

/* Individual FAQ cards */
.faq-section details,
.faq-section .faq{
  position:relative;
  overflow:hidden;
  margin:0!important;
  border:1px solid #dfd8ea!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 24px rgba(39,28,53,.045)!important;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.faq-section details:hover,
.faq-section .faq:hover{
  border-color:#cab9f4!important;
  box-shadow:0 12px 30px rgba(66,42,96,.075)!important;
  transform:translateY(-1px);
}
.faq-section details[open],
.faq-section .faq.open{
  border-color:#b79cf2!important;
  background:#fff!important;
  box-shadow:0 16px 36px rgba(72,45,110,.10)!important;
}

/* Question row */
.faq-section summary,
.faq-section .faq>button{
  width:100%;
  min-height:66px;
  margin:0!important;
  padding:18px 20px 18px 22px!important;
  border:0!important;
  background:transparent!important;
  color:#211d27!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  text-align:left!important;
  cursor:pointer;
  font-size:16px!important;
  line-height:1.38!important;
  font-weight:800!important;
  letter-spacing:-.01em;
  list-style:none!important;
}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary::marker{display:none;content:""}
.faq-section details[open]>summary,
.faq-section .faq.open>button{
  background:linear-gradient(90deg,rgba(120,69,255,.075),rgba(120,69,255,.018) 65%,transparent)!important;
}

/* Plus control — supports span or i markup */
.faq-section summary>span:last-child,
.faq-section .faq>button>span:last-child,
.faq-section .faq>button>i:last-child{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #d8cbf7!important;
  border-radius:11px!important;
  background:#f1ecff!important;
  color:#6f40d8!important;
  font-style:normal!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:500!important;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.faq-section details[open]>summary>span:last-child,
.faq-section .faq.open>button>span:last-child,
.faq-section .faq.open>button>i:last-child{
  transform:rotate(45deg)!important;
  border-color:#7845ff!important;
  background:#7845ff!important;
  color:#fff!important;
}

/* Answer body. Keep each page's existing open/closed mechanism intact. */
.faq-section details>p,
.faq-section .faq>p,
.faq-section .faq>.answer,
.faq-section .faq>.faq-answer,
.faq-section .faq>button+div{
  color:#514b58!important;
  font-size:14px!important;
  line-height:1.75!important;
  font-weight:450!important;
}
.faq-section details>p{
  margin:0!important;
  padding:17px 22px 22px!important;
  border-top:1px solid #eee9f5!important;
  background:#fdfcff!important;
  max-width:none!important;
}
.faq-section .faq>p,
.faq-section .faq>.answer,
.faq-section .faq>.faq-answer,
.faq-section .faq>button+div{
  margin:0!important;
  padding-left:22px!important;
  padding-right:22px!important;
  max-width:none!important;
}
.faq-section .faq.open>p,
.faq-section .faq.open>.answer,
.faq-section .faq.open>.faq-answer,
.faq-section .faq.open>button+div{
  padding-top:17px!important;
  padding-bottom:22px!important;
  border-top:1px solid #eee9f5!important;
  background:#fdfcff!important;
}
.faq-section a{
  color:#6540c5!important;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
}

/* Preserve two-column FAQ layouts while making the question stack richer. */
.faq-section .faq-grid>.faq-list,
.faq-section .faq-grid>.faqs{
  margin-top:0!important;
}

/* Strong visible keyboard focus */
.faq-section summary:focus-visible,
.faq-section .faq>button:focus-visible{
  outline:3px solid rgba(120,69,255,.34)!important;
  outline-offset:-3px!important;
  border-radius:15px!important;
}

@media(max-width:760px){
  .faq-section{
    padding-top:72px!important;
    padding-bottom:78px!important;
  }
  .faq-section .faq-head{
    gap:22px!important;
    margin-bottom:24px!important;
  }
  .faq-section .faq-list,
  .faq-section .faqs{
    gap:10px!important;
    margin-top:24px;
  }
  .faq-section summary,
  .faq-section .faq>button{
    min-height:62px;
    padding:16px 15px 16px 17px!important;
    gap:14px!important;
    font-size:15px!important;
  }
  .faq-section summary>span:last-child,
  .faq-section .faq>button>span:last-child,
  .faq-section .faq>button>i:last-child{
    flex-basis:32px!important;
    width:32px!important;
    height:32px!important;
    border-radius:10px!important;
    font-size:19px!important;
  }
  .faq-section details>p{
    padding:15px 17px 19px!important;
  }
  .faq-section .faq>p,
  .faq-section .faq>.answer,
  .faq-section .faq>.faq-answer,
  .faq-section .faq>button+div{
    padding-left:17px!important;
    padding-right:17px!important;
  }
  .faq-section .faq.open>p,
  .faq-section .faq.open>.answer,
  .faq-section .faq.open>.faq-answer,
  .faq-section .faq.open>button+div{
    padding-top:15px!important;
    padding-bottom:19px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .faq-section details,
  .faq-section .faq,
  .faq-section summary>span:last-child,
  .faq-section .faq>button>span:last-child,
  .faq-section .faq>button>i:last-child{
    transition:none!important;
  }
}