/* 12-faq — MOBILE build (below 1024 px). Owner: END-M (build 32).
   The ten questions of BRIEF-B32 §4 as full-width raised rows straight on white (no wrapper panel, §14): radius 16,
   a clear --edge, --highlight + --depth-1, press-in on tap, open = --selected fill with --edge-tint, a chevron that turns.
   Heading left, Mira thinking beside it (§1.12). Tablets (768 px+): centred at a comfortable width.
   Spacing is set centrally (§15): Pro above is white too, so the top is --section-y-tight. */

#faq .v-mobile { background: #fff; overflow: clip; }
#faq .v-mobile .faq-m { padding: var(--section-y-tight) 0 var(--section-y); }
#faq .v-mobile .wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---- heading: centred, eyebrow + title (RT-LOOP-M: the star is gone, so the head matches the other sections) ---- */
#faq .v-mobile .faq-m-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
#faq .v-mobile .faq-m-words .eyebrow { display: block; margin-bottom: 6px; }
#faq .v-mobile .faq-m-head .h2 { text-wrap: balance; }

/* ---- the rows ---- */
#faq .v-mobile .faq-m-list { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
#faq .v-mobile .faq-m-item {
  border: 1px solid var(--edge); border-radius: var(--r-tile); background: #fff;
  box-shadow: var(--highlight), var(--depth-1);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) {
  #faq .v-mobile .faq-m-item:hover { border-color: var(--edge-strong); box-shadow: var(--highlight), var(--depth-2); }
}
#faq .v-mobile .faq-m-item:has(> summary:active) { transform: scale(.98); box-shadow: var(--highlight), 0 1px 2px rgba(15, 26, 43, .06); }
#faq .v-mobile .faq-m-item[open]:not(.is-closing) { background: var(--selected); border-color: var(--edge-tint); box-shadow: var(--highlight), var(--depth-1); }

#faq .v-mobile .faq-m-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 58px; padding: 15px 16px 15px 18px; border-radius: 15px;
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  font-size: 16.5px; line-height: 1.4; font-weight: 500; color: var(--ink);
}
#faq .v-mobile .faq-m-item summary::-webkit-details-marker { display: none; }
#faq .v-mobile .faq-m-item summary::marker { content: ""; }
#faq .v-mobile .faq-m-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-tile); }
#faq .v-mobile .faq-m-q { min-width: 0; text-wrap: pretty; }

/* the chevron: points down, turns up (and blue) when the answer is open */
#faq .v-mobile .faq-m-chev {
  flex: none; width: 20px; height: 20px; background: var(--secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
#faq .v-mobile .faq-m-item[open]:not(.is-closing) .faq-m-chev { transform: rotate(-180deg); background: var(--accent); }

/* the answer */
#faq .v-mobile .faq-m-a { overflow: hidden; }
#faq .v-mobile .faq-m-a p {
  max-width: 62ch; padding: 0 18px 20px;
  font-size: 16px; line-height: 1.65; color: var(--body); text-wrap: pretty;
}

/* ---- small phones ---- */
@media (max-width: 359.98px) {
  #faq .v-mobile .faq-m-item summary { padding: 14px 14px 14px 16px; font-size: 16px; }
  #faq .v-mobile .faq-m-a p { padding: 0 16px 18px; font-size: 15.5px; }
}

/* ---- tablets: centred at a comfortable width ---- */
@media (min-width: 768px) {
  #faq .v-mobile .faq-m-head { max-width: 660px; margin-bottom: 36px; }
  #faq .v-mobile .faq-m-list { max-width: 660px; gap: 14px; }
  #faq .v-mobile .faq-m-item summary { min-height: 64px; padding: 18px 22px 18px 24px; font-size: 17.5px; }
  #faq .v-mobile .faq-m-a p { padding: 0 24px 24px; font-size: 16.5px; }
}

/* ---- RT-LOOP-M · ONE TYPE SCALE (founder 30 Sep; the hero is the reference): h2 30/1.1/-0.025em (28 under 360,
   40 on tablets) · lede 17/1.5/350 (19 on tablets) · labels 14/600 accent · in-section titles 22 · body 16–17 ---- */
#faq .v-mobile .faq-m-head .h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
@media (max-width: 359.98px) { #faq .v-mobile .faq-m-head .h2 { font-size: 28px; } }
@media (min-width: 768px) { #faq .v-mobile .faq-m-head .h2 { font-size: 40px; } }
#faq .v-mobile .faq-m-words .eyebrow { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#faq .v-mobile .faq-m-item summary { font-size: 17px; }
#faq .v-mobile .faq-m-a p { font-size: 16px; }
@media (max-width: 359.98px) { #faq .v-mobile .faq-m-item summary { font-size: 16px; } }
@media (min-width: 768px) { #faq .v-mobile .faq-m-item summary { font-size: 17px; } #faq .v-mobile .faq-m-a p { font-size: 17px; } }

/* ---- RT-LOOP-M · cute pass: rounder rows ---- */
#faq .v-mobile .faq-m-item { border-radius: 20px; }
#faq .v-mobile .faq-m-item summary { border-radius: 19px; }