:root {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 82% 3%, rgba(200, 170, 110, 0.16), transparent 30rem),
    radial-gradient(circle at 10% 36%, rgba(255, 255, 255, 0.045), transparent 34rem),
    #f1f1ef;
}

.grain::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.text-balance {
  text-wrap: balance;
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 480ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    visibility 0s linear 480ms;
}

.faq-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 2.5rem 0 0;
  transition: padding-bottom 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-trigger[aria-expanded="true"] + .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 480ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 340ms ease 100ms,
    visibility 0s;
}

.faq-trigger[aria-expanded="true"] + .faq-panel .faq-panel-inner {
  padding-bottom: 1.25rem;
}

.faq-icon {
  position: relative;
  border: 1px solid rgba(17, 18, 20, 0.15);
  color: #111214;
  transform: rotate(0deg);
  transition:
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    color 300ms ease,
    background-color 300ms ease,
    border-color 300ms ease;
}

.faq-icon::before,
.faq-icon::after {
  position: absolute;
  width: 0.75rem;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.faq-icon::after {
  transform: rotate(90deg) scaleX(1);
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

.faq-trigger[aria-expanded="true"] .faq-icon {
  border-color: #111214;
  background: #111214;
  color: #ffffff;
  transform: rotate(180deg);
}

.faq-trigger[aria-expanded="true"] .faq-icon::after {
  opacity: 0;
  transform: rotate(90deg) scaleX(0);
}

.faq-trigger:focus-visible {
  outline: none;
}

.faq-trigger:focus-visible .faq-icon {
  outline: 2px solid #111214;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

.button-lift {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.button-lift:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.30);
}

.button-lift:active {
  transform: translateY(-1px) scale(0.985);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.button-lift:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .button-lift:hover,
  .button-lift:active {
    transform: none;
  }
}