/* =====================
   m_faq — "FAQ / Your questions, answered" section.

   Source of truth:
     Desktop: Figma node 4215:24690
     Mobile:  Figma node 4215:25753

   ----------------------------------------------------------------
   Accordion architecture — pure CSS, no JS
   ----------------------------------------------------------------
   Single-open behaviour is provided by <input type="radio" name="faq">
   in the same group (browsers exclusively check one radio at a time —
   opening one auto-closes the previous, with both transitions running
   simultaneously, exactly as required).

   Flexible auto-fit height is the modern grid-`fr` trick:

     .m_faq_item_panel        { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s …; }
     :checked ~ .m_faq_item_panel { grid-template-rows: 1fr; }
     .m_faq_item_panel_inner  { overflow: hidden; min-height: 0; }

   The panel's animatable axis is `grid-template-rows` going from 0fr to
   1fr — `1fr` resolves to the natural intrinsic height of the inner
   content, so a 2-line answer animates smoothly to 2 lines, a 10-line
   answer to 10 lines, no fixed values. The `min-height: 0` on the inner
   wrapper is required for grid items to shrink below content size.

   The +/− icon is a single SVG with two crossed lines; only the vertical
   line scales to 0 when the item is open — turning the plus into a minus
   visually. No icon swap, no second SVG.

   Webflow migration: the `:checked ~ sibling .descendant` selectors are
   not expressible by Webflow's Style Panel API — this file lives in
   Embed at migration time. (Documented red flag in
   `references/webflow-friendly-patterns.md` — accepted for accordion.)

   prefers-reduced-motion disables the height + icon transitions.

   Mobile breakpoint: <= 991px.
===================== */

/* ---- Section overrides --------------------------------------------- */

.m_faq { padding: 6rem 0; }                              /* 96px Y desktop */
@media (max-width: 991px) {
  .m_faq { padding: 4rem 0; }                            /* 64px Y mobile */
}

.m_faq > .u-container { gap: 4rem; }                     /* 64px header→list */
@media (max-width: 991px) {
  .m_faq > .u-container { gap: 3rem; }                   /* 48px mobile */
}

/* ---- Accordion list ------------------------------------------------ */

.m_faq_group {
  width: 100%;
  max-width: 48rem;                                      /* 768px */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                                           /* 24px desktop */
}
@media (max-width: 991px) {
  .m_faq_group { gap: 2rem; }                            /* 32px mobile */
}

/* ---- Single accordion item ---------------------------------------- */

.m_faq_item { position: relative; }
.m_faq_item:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1.5rem;                                   /* 24px above each non-first item */
}

/* Radio input — visually hidden but still keyboard-focusable. */
.m_faq_item_radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  margin: 0;
}

/* Summary (label) — clickable header row */
.m_faq_item_summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;                                           /* 24px between question and icon */
  width: 100%;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 991px) {
  .m_faq_item_summary { gap: 0.5rem; }                   /* 8px mobile */
}

/* Focus ring when keyboard-focused on the hidden radio */
.m_faq_item_radio:focus-visible ~ .m_faq_item_summary {
  outline: 2px solid var(--color--main-green, #90F99C);
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.m_faq_item_question {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;                                      /* Medium */
  font-size: 1.125rem;                                   /* 18px */
  line-height: 1.5556;                                   /* 28/18 */
  color: var(--color--white, #ffffff);
  text-align: left;
}

/* Icon container — 24×24, single SVG with 2 paths (h + v) */
.m_faq_item_icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color--white, #ffffff);
}
.m_faq_item_icon svg {
  width: 1rem;                                           /* 16px (Figma inset 20.83% of 24 → ~10px stroke area) */
  height: 1rem;
  display: block;
  overflow: visible;
}

/* Vertical line — collapses when item is open (plus → minus) */
.m_faq_item_icon_v {
  transform-origin: 8px 8px;                             /* center of viewBox 16x16 */
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.m_faq_item_radio:checked ~ .m_faq_item_summary .m_faq_item_icon_v {
  transform: scaleY(0);
}

/* ---- Animatable panel (grid-fr trick) ----------------------------- */
/* Two-level structure required: outer grid wrapper animates between
   `grid-template-rows: 0fr` and `1fr`; inner div has `overflow: hidden`
   so the content is clipped during the row collapse. The 1fr resolves
   to the intrinsic content height of the inner — fully fluid, no JS. */

.m_faq_item_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.m_faq_item_radio:checked ~ .m_faq_item_panel {
  grid-template-rows: 1fr;
}

/* Inner is the grid item — overflow hidden clips content during collapse.
   No min-height needed: when the row is 0fr the item is forced to 0
   regardless of intrinsic size. */
.m_faq_item_panel_inner {
  overflow: hidden;
}

.m_faq_item_answer {
  margin: 0.5rem 0 0;                                    /* 8px gap between question and answer */
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem;                                       /* 16px */
  line-height: 1.5;                                      /* 24/16 */
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .m_faq_item_panel,
  .m_faq_item_icon_v {
    transition: none;
  }
}