/*
 * Homepage FAQs section — Figma "Website" file, node 4196:1465 (desktop, an
 * 842-wide column centred in the 1440 frame) and 4302:2561 (mobile 393). Sits
 * between the expert section and the final CTA.
 *
 * A heading and a list of collapsed questions separated by mono/300 hairlines.
 * The Figma annotation says "Use same FAQ pattern featured on current brand
 * homepage": that is the /faqs page accordion (css/faqs.css) — a button row
 * with aria-expanded, a plus drawn from two bars that becomes a minus, and the
 * answer height animated with grid-template-rows so it collapses correctly
 * whatever the answer's length. js/faqs-section.js toggles the state.
 *
 * Geometry. Desktop: heading 48/56, 24 gap, rows of 24 top + 24.72 content +
 * 25 bottom = 73.72 (the Figma stroke is inside the box; the CSS border is
 * outside, so the bottom padding here is 24 + 1px). Mobile: heading 32/38 on
 * two lines, rows 16 + 24.72 + 17 = 57.72, a 12 gap between the question and
 * the plus so long questions wrap around it. The 0.72 is the Figma "Link"
 * frame's bottom padding, kept so the row heights match to the decimal.
 *
 * Vertical rhythm: no top padding — the expert section carries the 116/72 gap
 * as a bottom margin. The gap to the final CTA (116 desktop, 72 mobile in the
 * Figma frames) is this section's bottom padding.
 *
 * Column: 842rem centred in the .container (layout.css owns --container-max);
 * at 768–991 the 672 column is narrower than 842, so the list fills it; < 768
 * the container is full-bleed and the section adds the 24 gutter.
 *
 * Units: rem, like the rest of the site (1rem = 1px at the design widths).
 * Fonts: heading Aeonik Medium (--font-display); questions and answers are
 * Inter, as in Figma. The plus is Host Grotesk in Figma and CSS bars here,
 * like the /faqs page.
 *
 * Loaded after expert.css. The /faqs page has its own css/faqs.css — this file
 * only styles `.faqs` on the homepage; the class names do not overlap.
 */

.faqs {
  --faqs-text: #000;
  --faqs-answer: #666;
  --faqs-plus: #666;
  --faqs-rule: #ebebeb;
  --faqs-accent: #ff5900;

  position: relative;
  padding: 0 0 116rem;
  color: var(--faqs-text);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

.faqs-inner {
  display: flex;
  justify-content: center;
}

.faqs-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  width: 100%;
  max-width: 842rem;
}

/* Figma "Heading/Regular/XL": Aeonik Medium 48/56, -1.6px, black */
.faqs-heading {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 48rem;
  line-height: 56rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: var(--faqs-text);
}

/* The mobile frame breaks the heading after "Questions" */
.faqs-br {
  display: none;
}

.faqs-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faqs-item {
  border-bottom: 1px solid var(--faqs-rule);
}

/* The question row: a real button so it is keyboard-operable for free */
.faqs-question {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rem;
  width: 100%;
  margin: 0;
  padding: 24rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--faqs-text);
  transition: color 0.2s ease, padding-bottom 0.3s ease;
}

/* Open: the row's 24 bottom padding shrinks to a 16 gap above the answer.
   (Not a negative margin on the answer — that would pull the copy out of the
   overflow-hidden box and clip its first line.) */
.faqs-question[aria-expanded="true"] {
  padding-bottom: 16rem;
}

.faqs-question:hover {
  color: var(--faqs-accent);
}

.faqs-question:focus-visible {
  outline: 2px solid var(--faqs-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Figma "Body/L": 18/24 regular, -0.36px, black; the 0.72 is the Link frame's
   bottom padding */
.faqs-question-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 0.72rem;
  font-size: 18rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.36rem;
  color: inherit;
}

/* The plus: Figma sets a 32px Host Grotesk Light "+" in a 19x21 box, mono/600.
   Two bars here, like /faqs; the vertical one folds away when open. */
.faqs-plus {
  position: relative;
  flex: 0 0 auto;
  width: 19rem;
  height: 21rem;
  color: var(--faqs-plus);
}

.faqs-question:hover .faqs-plus {
  color: inherit;
}

.faqs-plus::before,
.faqs-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.faqs-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faqs-question[aria-expanded="true"] .faqs-plus::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* Answer: height animated via grid rows; visibility hides the collapsed
   content from the tab order (the answers carry links) once it has closed */
.faqs-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.3s ease, visibility 0s linear 0.3s;
}

.faqs-answer.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.3s ease, visibility 0s;
}

.faqs-answer-inner {
  min-height: 0;
  overflow: hidden;
}

/* Figma "Body/M": 16/24, -0.32px, #666 */
.faqs-answer-copy {
  max-width: 720rem;
  margin: 0;
  padding: 0 0 24rem;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--faqs-answer);
}

.faqs-answer-copy p {
  margin: 0 0 12rem;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.faqs-answer-copy p:last-child {
  margin-bottom: 0;
}

.faqs-answer-copy a {
  display: inline;
  padding: 0;
  color: var(--faqs-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faqs-question,
  .faqs-plus::before,
  .faqs-plus::after,
  .faqs-answer,
  .faqs-answer.is-open {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393): own 24 gutter, smaller type, tighter rows */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .faqs {
    --faqs-plus: #888;

    padding: 0 24rem 72rem;
  }

  /* Figma "Heading/Regular/L": 32/38, no tracking */
  .faqs-heading {
    font-size: 32rem;
    line-height: 38rem;
    letter-spacing: 0;
  }

  .faqs-br {
    display: inline;
  }

  .faqs-question {
    align-items: flex-start;
    gap: 12rem;
    padding: 16rem 0;
  }

  /* Figma "Body/M": 16/24, -0.32px */
  .faqs-question-text {
    font-size: 16rem;
    letter-spacing: -0.32rem;
  }

  /* Figma: the plus box sits at the top of the (possibly two-line) text,
     centred on the first line */
  .faqs-plus {
    margin-top: 1.5rem;
  }

  .faqs-question[aria-expanded="true"] {
    padding-bottom: 12rem;
  }

  .faqs-answer-copy {
    max-width: none;
    padding-bottom: 16rem;
  }
}