/**
 * Dino FAQs — layout chrome that semantic Tailwind does not cover.
 * Enqueued on FAQs (with dino-home.css for CTA, eyebrow, chevron, divider).
 */

.dino-faq-page [x-cloak] {
  display: none !important;
}

.dino-faq-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
  background:
    radial-gradient(
      1100px 620px at 22% 6%,
      var(--color-success-bg) 0%,
      var(--color-background-dark) 44%,
      var(--color-background-light) 78%
    );
}

.dino-faq-hero .dino-home-eyebrow {
  color: var(--color-accent-dark);
}

.dino-faq-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dino-faq-hero__title {
  margin: 0;
  max-width: 840px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.dino-faq-hero__lede {
  margin: 0;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.65;
}

.dino-faq-hero__actions {
  gap: 14px;
  margin-top: 6px;
}

.dino-faq-hero .dino-home-divider {
  padding: 48px 40px 8px;
  background: transparent;
}

.dino-faq-list {
  padding: 8px 0 96px;
}

.dino-faq-list__inner {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
}

.dino-faq-list__trigger {
  padding-left: 0;
  padding-right: 0;
}

.dino-faq-list__trigger span:first-child {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.dino-faq-list__answer {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 760px) {
  .dino-faq-hero {
    padding: 44px 0 0;
  }

  .dino-faq-hero__lede {
    font-size: 15px;
  }

  .dino-faq-hero .dino-home-divider {
    gap: 16px;
    padding: 32px 20px 0;
  }

  .dino-faq-list {
    padding: 8px 0 56px;
  }

  .dino-faq-list__trigger span:first-child {
    font-size: 16px;
  }
}