/* ============================================================
   HOMEPAGE FIX v5.1
   - FAQ typography/layout
   - Balanced desktop hero alignment
   ============================================================ */

/* FAQ: appName must stay part of the sentence, not become its own flex item. */
#faq .faq-list details{
  padding:0 20px !important;
  border-radius:18px !important;
}

#faq .faq-list summary{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-height:62px !important;
  padding:17px 0 !important;
  font-size:15px !important;
  line-height:1.45 !important;
  font-weight:720 !important;
  text-align:left !important;
}

#faq .faq-list .faq-question{
  display:block !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

#faq .faq-list .faq-question [data-app]{
  display:inline !important;
  white-space:normal !important;
}

#faq .faq-list summary::after{
  flex:0 0 auto !important;
  margin-left:16px !important;
  padding:0 !important;
  font-size:20px !important;
  line-height:1 !important;
}

#faq .faq-list details p{
  margin:-2px 0 17px !important;
  font-size:13px !important;
  line-height:1.65 !important;
}

/* Handheld FAQ: compact, readable, never "zoomed". */
.vier-handheld #faq{
  padding-top:56px !important;
  padding-bottom:56px !important;
}

.vier-handheld #faq .container{
  width:min(calc(100% - 28px),620px) !important;
}

.vier-handheld #faq .faq-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:24px !important;
}

.vier-handheld #faq .faq-grid > div:first-child{
  max-width:560px !important;
}

.vier-handheld #faq .faq-grid h2{
  margin:8px 0 10px !important;
  font-size:clamp(30px,8vw,40px) !important;
  line-height:1.06 !important;
  letter-spacing:-.04em !important;
  text-wrap:balance !important;
}

.vier-handheld #faq .faq-grid > div:first-child > p{
  font-size:14px !important;
  line-height:1.6 !important;
  max-width:500px !important;
}

.vier-handheld #faq .faq-list{
  gap:10px !important;
}

.vier-handheld #faq .faq-list details{
  padding:0 16px !important;
  border-radius:16px !important;
}

.vier-handheld #faq .faq-list summary{
  min-height:56px !important;
  padding:15px 0 !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

.vier-handheld #faq .faq-list summary::after{
  margin-left:12px !important;
  font-size:19px !important;
}

.vier-handheld #faq .faq-list details p{
  font-size:12.5px !important;
  line-height:1.6 !important;
  margin:0 0 15px !important;
}

/* Small phones: keep FAQ comfortable without giant cards/text. */
.vier-phone #faq .container{
  width:calc(100% - 22px) !important;
}

.vier-phone #faq .faq-grid h2{
  font-size:clamp(27px,8.5vw,34px) !important;
}

.vier-phone #faq .faq-list details{
  padding:0 14px !important;
}

.vier-phone #faq .faq-list summary{
  font-size:13.5px !important;
  min-height:54px !important;
}

/* Desktop hero: visually center the two-column composition.
   Copy sits toward the center rather than hugging the far-left edge. */
@media (min-width:1101px){
  .hero .hero-grid{
    grid-template-columns:minmax(430px,1fr) minmax(560px,1fr) !important;
    gap:clamp(58px,6vw,92px) !important;
    align-items:center !important;
  }

  .hero .hero-copy{
    width:min(100%,620px) !important;
    justify-self:end !important;
    padding-left:0 !important;
  }

  .hero .hero-visual{
    width:min(100%,760px) !important;
    justify-self:start !important;
  }

  .hero .hero-copy h1{
    max-width:620px !important;
  }

  .hero .hero-lead{
    max-width:590px !important;
  }
}

/* Wide desktop: keep the pair centered instead of spreading to both edges. */
@media (min-width:1500px){
  .hero .hero-grid{
    grid-template-columns:minmax(500px,620px) minmax(650px,780px) !important;
    justify-content:center !important;
    gap:96px !important;
  }
}


/* ============================================================
   HOMEPAGE FIX v5.2
   - Asset-path recovery after frontend reorganization
   - Desktop hero headline centered
   ============================================================ */
@media (min-width:981px){
  .hero .hero-copy h1{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    text-wrap:balance !important;
  }

  .hero .hero-copy h1 .gradient-text{
    text-align:center !important;
  }
}