/* ==========================================================================
   FAQ · the "Ask Studio 7" box (assets/s7-askbox.js) and the FAQ list's
   smooth open. The box sits right under the hero: a search bar that shows
   matching FAQ answers as you type and asks the AI (/api/ask) on Enter.
   ========================================================================== */
.s7ask-section {
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 72px var(--pad, 56px) 8px;
}
.s7ask {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 46px 52px 32px;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 40px 90px rgba(46, 22, 128, 0.1), 0 10px 26px rgba(46, 22, 128, 0.06);
  isolation: isolate;
}
.s7ask::before {                                     /* a thin violet edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #a78bfa, rgba(196, 181, 253, 0.25) 45%, #8b5cf6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.s7ask-head { text-align: center; max-width: 660px; margin: 0 auto 28px; }
.s7ask-head .svc-section-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.s7ask-head .svc-section-title { margin-bottom: 14px; }
.s7ask-head .svc-section-lede { margin: 0 auto; max-width: 600px; font-size: 16.5px; }
.s7ask-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  color: #ffffff;
  font-weight: 800; font-size: 17px; letter-spacing: -0.04em; text-transform: none;
}
.s7ask-ai {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1ecff;
  color: #6d3ef0;
  font-size: 11px;
}
.s7ask.is-ai .s7ask-ai { display: inline-flex; }
.s7ask-ai i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.s7ask-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the bar */
.s7ask-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  background: #f7f5ff;
  border: 1.5px solid #e4dcfb;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.s7ask-bar:focus-within { background: #ffffff; border-color: #a78bfa; box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.14); }
.s7ask-bar > svg { flex: none; width: 20px; height: 20px; color: #9a95b5; }
.s7ask-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #16132e;
  padding: 12px 0;
}
.s7ask-input::placeholder { color: #9a95b5; }
.s7ask-send {
  flex: none;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #16132e;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s, opacity 0.2s;
}
.s7ask-send:hover { background: #6d3ef0; transform: translateY(-1px); }
.s7ask-send:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
.s7ask-send:disabled { opacity: 0.45; cursor: default; transform: none; background: #16132e; }
.s7ask-send svg { width: 20px; height: 20px; }

/* suggestions */
.s7ask-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.s7ask-chip {
  border: 1px solid #e4dcfb;
  background: #ffffff;
  color: #4a4560;
  font-family: 'Geist', sans-serif;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.s7ask-chip:hover, .s7ask-chip:focus-visible { border-color: #a78bfa; color: #6d3ef0; background: #faf8ff; outline: none; }

/* matching answers while you type */
.s7ask-matches { margin: 14px 0 0; padding: 6px; border-radius: 18px; background: #faf8ff; border: 1px solid #ece6fc; }
.s7ask-matches[hidden] { display: none; }
.s7ask-matches-h {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a95b5;
  padding: 8px 12px 4px;
}
.s7ask-match {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 0;
  background: none;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: #16132e;
}
.s7ask-match:hover, .s7ask-match:focus-visible { background: #f1ecff; outline: none; }
.s7ask-match small {
  margin-left: auto;
  flex: none;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a95b5;
}

/* the conversation */
.s7ask-thread { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.s7ask-thread:empty { display: none; }
.s7ask-msg { display: flex; gap: 12px; align-items: flex-start; animation: s7askIn 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.s7ask-msg--user { justify-content: flex-end; }
.s7ask-msg--user p {
  margin: 0;
  max-width: 78%;
  padding: 12px 18px;
  border-radius: 20px 20px 6px 20px;
  background: #16132e;
  color: #ffffff;
  font-size: 15.5px;
  line-height: 1.5;
}
.s7ask-av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  color: #ffffff;
  font-weight: 800; font-size: 20px; letter-spacing: -0.04em;
}
.s7ask-bubble {
  min-width: 0;
  max-width: calc(100% - 46px);
  padding: 14px 18px;
  border-radius: 6px 20px 20px 20px;
  background: #f6f3ff;
  color: #16132e;
  font-size: 15.5px;
  line-height: 1.6;
}
.s7ask-text p { margin: 0 0 8px; }
.s7ask-text p:last-child { margin: 0; }
.s7ask-text a { color: #6d3ef0; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.s7ask-quote { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #ffffff; border-left: 3px solid #8b5cf6; }
.s7ask-quote strong { display: block; font-weight: 600; margin-bottom: 4px; }
.s7ask-quote p { margin: 0; color: #4a4560; }
.s7ask-typing { display: inline-flex; gap: 5px; padding: 7px 2px; }
.s7ask-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6; animation: s7askDot 1s infinite ease-in-out; }
.s7ask-typing i:nth-child(2) { animation-delay: 0.15s; }
.s7ask-typing i:nth-child(3) { animation-delay: 0.3s; }
.s7ask-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e9e3fb; }
.s7ask-rel > span {
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a95b5;
  margin-right: 2px;
}
.s7ask-rel button, .s7ask-rel a {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: #4a4560;
  background: #ffffff;
  border: 1px solid #e4dcfb;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.s7ask-rel button:hover { border-color: #a78bfa; color: #6d3ef0; }
.s7ask-rel a.s7ask-cta { background: #16132e; color: #ffffff; border-color: #16132e; }
.s7ask-rel a.s7ask-cta:hover { background: #6d3ef0; border-color: #6d3ef0; }
.s7ask-note { margin: 18px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: #9a95b5; }
.s7ask-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.s7ask-note .is-ai-only { display: none; }
.s7ask.is-ai .s7ask-note .is-ai-only { display: inline; }

/* questions left today, and the capped state (daily limit reached, or paused) */
.s7ask-left { margin: 10px 4px 0; text-align: right; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a95b5; }
.s7ask-left[hidden] { display: none; }
.s7ask.is-capped .s7ask-bar { background: #f3f1f8; border-color: #e7e3f1; }
.s7ask.is-capped .s7ask-input { cursor: not-allowed; }
.s7ask.is-capped .s7ask-chip { opacity: 0.5; cursor: default; pointer-events: none; }
.s7ask-input:disabled { color: #9a95b5; }
@keyframes s7askIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes s7askDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* the FAQ list right under the box: no rule line butting into the card */
.s7ask-section + section.faq-v2 { border-top: 0; padding-top: 72px; }

/* the FAQ list: answers open smoothly; a linked question flashes */
.faq-v2-a { overflow: hidden; }
.faq-v2-item { scroll-margin-top: 110px; transition: background-color 0.8s; }
.faq-v2-item.is-flash { background-color: #f4f0ff; transition: background-color 0.2s; }

@media (max-width: 1000px) {
  .s7ask-section { padding: 40px 24px 0; }
}
@media (max-width: 620px) {
  .s7ask { padding: 30px 18px 22px; border-radius: 24px; }
  .s7ask-bar { padding-left: 16px; gap: 10px; }
  .s7ask-input { font-size: 16px; }                    /* no zoom-on-focus on iPhone */
  .s7ask-send { width: 44px; height: 44px; }
  .s7ask-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 14px -18px 0; padding: 0 18px 4px; scrollbar-width: none; }
  .s7ask-chips::-webkit-scrollbar { display: none; }
  .s7ask-chip { flex: none; }
  .s7ask-match small { display: none; }
  .s7ask-msg--user p { max-width: 88%; }
  .s7ask-bubble { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .s7ask-msg { animation: none; }
  .s7ask-typing i { animation: none; opacity: 0.7; }
}