/*
  --u is one pixel of the 1980px Figma frame. Text uses the type scale in
  main.css.
*/
.faq {
  --u: calc(100cqi / 1980);

  container-type: inline-size;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(683 * var(--u));
  background-color: var(--color-white);
  color: var(--color-warm-black);
  /* Lets open answers animate to their natural height where supported. */
  interpolate-size: allow-keywords;
}

.faq__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.faq .faq__curve {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
}

.faq .faq__curve--lime {
  left: calc(1561.15 * var(--u));
  width: calc(244.704 * var(--u));
  color: var(--color-lime);
}

/* First in the markup so it draws first, but it crosses over the lime one in Figma. */
.faq .faq__curve--dark {
  z-index: 1;
  left: calc(1648.15 * var(--u));
  width: calc(246.704 * var(--u));
  color: var(--color-verdant-green);
}

/* Rounds the tip while it draws; a finished line's ends sit off the section. */
.faq .faq__curve path {
  stroke-linecap: round;
}

/*
  Each line draws as one long dash once the section is revealed, timed and
  staggered like the other lines. module.js sets where the dash starts (just
  before the path, so the round cap doesn't show as a dot) and ends (the
  bottom of the visible part), then drops the dash once drawn so the line
  still reaches the bottom if open answers make the section taller. The
  fallbacks keep a line hidden until measured, and fully drawn at the end if
  the script never measures.
*/
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .faq .faq__curve path {
    stroke-dasharray: 100000 100000;
    animation: faq-line-draw var(--line-draw-duration) var(--line-draw-ease) var(--reveal-start, 0s) both paused;
  }

  .faq .faq__curve.is-revealed path {
    animation-play-state: running;
  }
}

/* A 100000 dash, offset by 100000 minus the length drawn. */
@keyframes faq-line-draw {
  from { stroke-dashoffset: var(--line-from, 100100); }
  to { stroke-dashoffset: var(--line-to, 0); }
}

.faq .faq__star {
  position: absolute;
  max-width: none;
}

.faq .faq__star--small {
  top: calc(96 * var(--u));
  left: calc(1456 * var(--u));
  width: calc(88 * var(--u));
  height: calc(159 * var(--u));
}

.faq .faq__star--large {
  top: calc(381 * var(--u));
  left: calc(1742 * var(--u));
  width: calc(156 * var(--u));
  height: calc(283 * var(--u));
}

.faq__inner {
  padding: calc(164 * var(--u)) 20px calc(126 * var(--u)) calc(336 * var(--u));
}

.faq__heading {
  margin: 0;
  font-family: var(--font-family-condensed);
  font-size: var(--heading-lg);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.faq__list {
  width: min(100%, calc(864 * var(--u)));
  margin-top: calc(111 * var(--u));
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2x);
  padding: var(--space-2x) 0;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.15;
  list-style: none;
  cursor: pointer;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:focus-visible {
  outline: 3px solid var(--color-forest);
  outline-offset: 2px;
}

.faq .faq__chevron {
  flex: none;
  width: 40px;
  height: 40px;
  fill: var(--color-text);
  transition: rotate 0.3s ease;
}

.faq__item[open] .faq__chevron {
  rotate: 180deg;
}

.faq__answer {
  max-width: 60ch;
  padding-bottom: var(--space-3x);
  color: var(--color-text);
  font-size: var(--text-base);
  /* Looser than --leading-normal so wrapped answers don't feel stacked. */
  line-height: 1.5;
}

.faq__answer p,
.faq__answer ul {
  margin: 0;
}

/*
  These need the element in the selector. A bare sibling rule loses to
  ".faq__answer p" above, and the gap never appears.
*/
.faq__answer p + p,
.faq__answer p + ul,
.faq__answer ul + p {
  margin-top: 1.15em;
}

/* Red accent star bullets, a little smaller than the Welcome list's, centred on each item's first line. */
.faq__answer ul {
  padding-left: 1.3em;
  list-style: none;
}

.faq__answer li {
  position: relative;
}

.faq__answer li::before {
  content: "";
  position: absolute;
  top: calc((1.5em - 1.04em) / 2);
  left: -1.2em;
  width: 0.6em;
  height: 1.04em;
  background: var(--faq-bullet) center / contain no-repeat;
}

.faq__answer li + li {
  margin-top: 0.6em;
}

.faq__answer a {
  color: var(--color-forest);
  font-weight: 600;
}

.faq__answer a:hover {
  text-decoration-thickness: 2px;
}

.faq__answer a:focus-visible {
  outline: 3px solid var(--color-forest);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Smooth open and close where the browser can animate details content. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

@media (max-width: 767px) {
  .faq {
    min-height: 0;
  }

  .faq__decor {
    display: none;
  }

  .faq__inner {
    padding: 48px 20px 64px;
  }

  .faq__list {
    width: 100%;
    margin-top: 32px;
  }

  .faq .faq__chevron {
    width: 32px;
    height: 32px;
  }
}