/* SpineScan FAQ Preview — canonical section-owned presentation. */

[data-ss-block=faq-preview] .ss-faq-home {
  position: relative;
  overflow: hidden;
  padding: 44px 0;
  color: #101820;
  background:
    radial-gradient(circle at 88% 10%, rgba(32, 174, 232, .13), transparent 30%),
    radial-gradient(circle at 8% 86%, rgba(139, 58, 150, .08), transparent 32%),
    linear-gradient(180deg, #f2fbfe 0%, #eaf7fb 100%);
}

[data-ss-block=faq-preview] .ss-faq-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 34%, rgba(32, 174, 232, .14), transparent 28%),
    radial-gradient(circle at 74% 12%, rgba(139, 58, 150, .09), transparent 32%);
  pointer-events: none;
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(420px, 1.14fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-intro { max-width: 470px; }
[data-ss-block=faq-preview] .ss-faq-home .ss-faq-intro h2 { margin-bottom: 16px; color: #101820; }
[data-ss-block=faq-preview] .ss-faq-home .ss-faq-intro p:not(.ss-eyebrow) { margin: 0 0 22px; color: rgba(16, 24, 32, .74); font-size: 1.02rem; line-height: 1.7; }

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #087aa5;
  font-weight: 800;
  text-decoration: none;
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-link::after { content: "\2192"; transition: transform .2s ease; }
[data-ss-block=faq-preview] .ss-faq-home .ss-faq-link:hover::after,
[data-ss-block=faq-preview] .ss-faq-home .ss-faq-link:focus-visible::after { transform: translateX(4px); }

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list { display: grid; gap: 10px; }

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details {
  overflow: hidden;
  padding: 16px 0;
  border: 1px solid rgba(32, 174, 232, .24);
  border-left: 4px solid rgba(32, 174, 232, .72);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 251, 254, .92));
  box-shadow: 0 16px 36px rgba(6, 18, 30, .08);
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list summary {
  position: relative;
  display: block;
  padding: 14px 52px 14px 20px;
  color: #0f1a21;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 850;
  list-style: none;
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list summary::-webkit-details-marker { display: none; }

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #087aa5;
  background: rgba(32, 174, 232, .12);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  transform: translateY(-50%);
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details[open] summary::after { content: "\2212"; }

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details p {
  margin: 0;
  padding: 0 20px 18px;
  color: rgba(16, 24, 32, .72);
  line-height: 1.7;
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details.ss-is-visible {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18), 0 0 0 1px rgba(112, 207, 240, .05);
}

[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details:hover,
[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details:focus-within,
[data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details[open] {
  border-color: rgba(32, 174, 232, .52);
  border-left-color: #8b3a96;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(226, 247, 253, .95));
  box-shadow: 0 20px 48px rgba(6, 18, 30, .12), 0 0 0 1px rgba(32, 174, 232, .06);
}

[data-ss-block=faq-preview] .ss-faq-home.ss-spacing-compact { padding-top: 42px; padding-bottom: 42px; }
[data-ss-block=faq-preview] .ss-faq-home.ss-spacing-spacious { padding-top: 76px; padding-bottom: 76px; }
[data-ss-block=faq-preview] .ss-faq-home.ss-heading-left .ss-faq-intro { text-align: left; }
[data-ss-block=faq-preview] .ss-faq-home.ss-heading-center .ss-faq-intro { margin-right: auto; margin-left: auto; text-align: center; }
[data-ss-block=faq-preview] .ss-faq-home.ss-background-light {
  background:
    radial-gradient(circle at 88% 10%, rgba(32, 174, 232, .13), transparent 30%),
    radial-gradient(circle at 8% 86%, rgba(139, 58, 150, .08), transparent 32%),
    linear-gradient(180deg, #f2fbfe 0%, #eaf7fb 100%);
}
[data-ss-block=faq-preview] .ss-faq-home.ss-background-black,
[data-ss-block=faq-preview] .ss-faq-home.ss-background-panel { color: var(--ss-text); }
[data-ss-block=faq-preview] .ss-faq-home.ss-background-black { background: var(--ss-black); }
[data-ss-block=faq-preview] .ss-faq-home.ss-background-panel { background: #0b0e12; }
[data-ss-block=faq-preview] .ss-faq-home.ss-background-black .ss-faq-intro h2,
[data-ss-block=faq-preview] .ss-faq-home.ss-background-panel .ss-faq-intro h2 { color: var(--ss-text); }
[data-ss-block=faq-preview] .ss-faq-home.ss-background-black .ss-faq-intro p:not(.ss-eyebrow),
[data-ss-block=faq-preview] .ss-faq-home.ss-background-panel .ss-faq-intro p:not(.ss-eyebrow) { color: var(--ss-muted); }

@media (max-width: 860px) {
  [data-ss-block=faq-preview] .ss-faq-home,
  [data-ss-block=faq-preview] .ss-faq-home.ss-spacing-spacious { padding: 40px 0; }
  [data-ss-block=faq-preview] .ss-faq-home.ss-spacing-compact { padding: 42px 0; }
  [data-ss-block=faq-preview] .ss-faq-home .ss-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  [data-ss-block=faq-preview] .ss-faq-home .ss-faq-intro { max-width: none; }
}

@media (max-width: 520px) {
  [data-ss-block=faq-preview] .ss-faq-home .ss-faq-list summary { padding: 14px 48px 14px 18px; }
  [data-ss-block=faq-preview] .ss-faq-home .ss-faq-list details p { padding: 0 18px 18px; }
}

@container (max-width: 860px) {
  [data-ss-block=faq-preview] .ss-faq-home .ss-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  [data-ss-block=faq-preview] .ss-faq-home .ss-faq-intro { max-width: none; }
}
