/* ==========================================================================
   FAQ · hero — "Ask Studio 7" (assets/s7-faq.js). Real FAQ questions circle
   a chat window; one at a time a question is typed in and answered with a
   small picture of the answer, and "Read the full answer" opens it below.
   Desktop: one wide scene the size of the homepage hero card (35px off each
   edge, screen-tall) with the hero copy laid over the sky on the left; the
   scene fills the card and stays pinned to its right edge. Small laptops:
   copy beside a square scene. Phones and tablets: copy, then the square.
   The script picks its composition from the box's shape.
   Without the script the box just shows the night sky.
   ========================================================================== */
.s7faq-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: #0d0a24;
  box-shadow: 0 40px 90px rgba(22, 13, 66, 0.28), 0 12px 30px rgba(22, 13, 66, 0.12);
}
.s7faq {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, #0a0720 0%, #1a1450 55%, #2e2378 100%);
}
.s7faq-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.s7faq:not(.is-live) .s7faq-svg { visibility: hidden; }
/* "Read the full answer" is a real link */
.s7faq-svg a { cursor: pointer; }
.s7faq-svg a:focus { outline: none; }
.s7faq-svg a:focus-visible .s7faq-pill { stroke: #c4b5fd; stroke-width: 4; }
.s7faq-svg a:hover .s7faq-pill { fill: #2a2350; }

/* phones + small tablets: copy, then the square scene */
.svc-hero.s7faq-hero { grid-template-columns: 1fr; gap: 36px; }
@media (max-width: 620px) {
  .s7faq-box { border-radius: 20px; }
}

/* small laptops: copy on the left, the square scene on the right */
@media (min-width: 1001px) and (max-width: 1199px) {
  .svc-hero.s7faq-hero { grid-template-columns: 1fr 1fr; gap: 48px; }
  .s7faq-box { margin: 0 0 0 auto; }
}

/* desktop: one wide scene, the copy over the sky on the left — sized
   exactly like the homepage hero card (35px off each edge, screen-tall) */
@media (min-width: 1200px) {
  .svc-hero.s7faq-hero { grid-template-columns: 1fr; gap: 0; max-width: none; padding: 120px 35px 35px; }
  .s7faq-hero .s7faq-box {
    max-width: none;
    aspect-ratio: auto;
    height: calc(100vh - 123px);
    min-height: 565px;
    max-height: 945px;
    border-radius: 32px;
  }
  .s7faq-hero > .svc-hero-copy,
  .s7faq-hero > .s7faq-box { grid-area: 1 / 1; }
  .s7faq-hero > .svc-hero-copy {
    position: relative;
    z-index: 4;
    align-self: center;
    justify-self: start;
    max-width: 40%;
    margin: 0;
    padding-left: 5%;
  }
  .s7faq-hero .svc-hero-eyebrow { color: #c4b5fd; margin-bottom: 18px; }
  .s7faq-hero .svc-hero-title { color: #ffffff; font-size: clamp(42px, 4.1vw, 62px); margin-bottom: 20px; }
  .s7faq-hero .svc-hero-title em { color: #b9a6ff; }
  .s7faq-hero .svc-hero-sub { color: rgba(255, 255, 255, 0.76); font-size: 17px; margin-bottom: 32px; }
  .s7faq-hero .svc-btn-primary { background: #ffffff; color: #16132e; }
  .s7faq-hero .svc-btn-primary:hover { box-shadow: 0 10px 28px rgba(185, 166, 255, 0.35); }
}