/* Frequently asked questions — extends Home tokens and chrome. */

.df-faq {
  --dfq-reversed: #b6b6b0;
  --dfq-section-pad: 100px;
  --dfq-hero-top: 100px;
  --dfq-hero-bottom: 80px;
  --dfq-label-gap: 48px;
  --dfq-copy-gap: 40px;
  --dfq-action-gap: 28px;
  --dfq-final-footer-gap: 72px;
  overflow-x: clip;
}

.df-faq .dfq-label {
  color: var(--dh-muted);
  letter-spacing: -.01em;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.df-faq .dfq-lead {
  color: var(--dh-muted);
  font-size: 18px;
  line-height: 1.45;
}

.df-faq .dfq-hero h1,
.df-faq .dfq-heading h2 {
  letter-spacing: -.04em;
}

.df-faq .dfq-heading h2 {
  font-family: Instrument Sans, Arial, sans-serif;
  font-size: clamp(2.25rem, 1.898rem + 1.502vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
}

.df-faq .dfq-section {
  padding: 0 0 var(--dfq-section-pad);
}

/* Hero */

.df-faq .dfq-hero {
  padding: var(--dfq-hero-top) 0 var(--dfq-hero-bottom);
}

.df-faq .dfq-hero .dfq-label {
  margin-bottom: var(--dfq-label-gap);
}

.df-faq .dfq-hero h1 {
  max-width: 860px;
  font-size: clamp(2.75rem, 1.65rem + 4.69vw, 5.875rem);
  line-height: .98;
}

.df-faq .dfq-hero .dfq-lead {
  max-width: 680px;
  margin-top: var(--dfq-copy-gap);
}

.df-faq .dfq-hero-actions {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--dfq-action-gap);
  display: flex;
}

/* Accordion layout */

.df-faq .dfq-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: var(--dh-grid-gap);
  display: grid;
}

.df-faq .dfq-heading {
  grid-column: 1 / 6;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dfq-label-gap);
  display: flex;
  position: sticky;
  top: calc(var(--dh-header-height) + 28px);
}

.df-faq .dfq-heading .dfq-lead {
  max-width: 360px;
}

.df-faq .dfq-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.df-faq .dh-faq-list {
  grid-column: 7 / 13;
}

.df-faq .dh-faq-trigger {
  min-height: 72px;
  padding: 24px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}

.df-faq .dfq-faq-plus {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  position: relative;
}

.df-faq .dfq-faq-plus:before,
.df-faq .dfq-faq-plus:after {
  content: "";
  background: currentColor;
  width: 14px;
  height: 1px;
  transition: transform .18s ease;
  position: absolute;
  top: 7px;
  left: 1px;
}

.df-faq .dfq-faq-plus:after {
  transform: rotate(90deg);
}

.df-faq .dh-faq-trigger[data-state="open"] .dfq-faq-plus:after {
  transform: rotate(0deg);
}

.df-faq .dh-faq-answer {
  max-width: 600px;
  padding: 0 48px 28px 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Final CTA */

.df-faq .dfq-final-wrap {
  background: var(--dh-paper);
  padding: 0 0 var(--dfq-final-footer-gap);
}

.df-faq .dh-trial p {
  max-width: 570px;
  margin-top: var(--dfq-copy-gap);
}

.df-faq .dh-trial > small {
  color: #8d8d88;
  letter-spacing: 0;
  margin-top: 32px;
  font-size: 12px;
  line-height: 1.5;
}

.df-faq .dh-footer nav a[aria-current="page"] {
  color: var(--dh-ink);
}

@media (width <= 1024px) {
  .df-faq {
    --dfq-section-pad: 80px;
    --dfq-hero-top: 72px;
    --dfq-hero-bottom: 64px;
    --dfq-label-gap: 32px;
    --dfq-copy-gap: 32px;
    --dfq-final-footer-gap: 56px;
  }

  .df-faq .dfq-heading {
    position: static;
  }
}

@media (width <= 760px) {
  .df-faq {
    --dfq-section-pad: 72px;
    --dfq-hero-top: 72px;
    --dfq-hero-bottom: 48px;
    --dfq-label-gap: 24px;
    --dfq-copy-gap: 24px;
    --dfq-final-footer-gap: 48px;
  }

  .df-faq .dfq-hero .dfq-lead,
  .df-faq .dfq-lead {
    font-size: 17px;
  }

  .df-faq .dfq-layout {
    display: block;
  }

  .df-faq .dfq-heading {
    margin-bottom: 40px;
  }

  .df-faq .dh-faq-list {
    grid-column: auto;
  }

  .df-faq .dh-faq-answer {
    padding-right: 0;
  }

  .df-faq .dh-trial {
    padding-inline: 24px;
  }

  .df-faq .dh-trial > small {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .df-faq .dh-hero-anim,
  .df-faq .dh-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}