/* FAQs page (Figma FAQs 295:7441, measured with get_design_context / get_variable_defs):
   page header 370 (see samf-m2-pagehead.css), 80 gap, then container 1420 = side tabs 457 (24 right padding, rows 41 high:
   16/10 padding, 16/20 Bukra medium, 1px bottom border white 35%, chevron 16) + 24 gap + glass card (1px white 15% border,
   radius 32, padding 32, blur 16, fill rgba(0,0,0,.01)). Accordion rows: 1px white 15% line under every row, 16px row padding,
   20px icon, 16px gap, title 16/20 Bukra medium -0.32px (open = Light Green), answer 16/22 Rotunda Light -0.32px, 36px inset, 829px wide.
   Tokens only; logical properties so RTL mirrors by itself. Letter-spacing 0 in Arabic. */
.samf-faqs { --samf-faq-line: var(--samf-figma-white-15); --samf-faq-tab-line: var(--samf-figma-white-35); }
.samf-faqs__body { position: relative; overflow: clip; margin-block: 5rem 0; padding-block-end: 5rem; } /* the black grit runs flush into the next band, as in Figma */
.samf-faqs.samf-m2-page > .samf-faqs__body { z-index: auto; } /* no own stacking context, so the grit blends with the page colour */
.samf-faqs__body > .samf-m2-art__grit { inset-block-start: 0; block-size: 168.48%; inline-size: 125.99%; inset-inline: 0 auto; z-index: 0; }
.samf-faqs__layout { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 1.5rem; }

.samf-faqs__tabs { flex: 0 0 28.5625rem; position: sticky; inset-block-start: 0; display: flex; flex-direction: column; padding-inline-end: 1.5rem; box-sizing: border-box; }
.samf-faqs__tab {
  display: flex; align-items: center; inline-size: 100%; box-sizing: border-box; padding: .625rem 1rem .5625rem; /* 10 + 20 + 9 + 1px line = 40 (Figma draws the line inside the 40) */
  background: transparent; color: var(--samf-color-text); border: 0; border-block-end: 1px solid var(--samf-faq-tab-line); border-radius: 0;
  font-family: var(--m2-bukra); font-weight: 500; font-size: 1rem; line-height: 1.25rem; letter-spacing: 0; text-align: start; cursor: pointer;
}
.samf-faqs__tab-text { flex: 1 1 0; min-inline-size: 0; overflow-wrap: anywhere; }
.samf-faqs__tab-icon { flex: none; inline-size: 1rem; block-size: 1rem; }
[dir="rtl"] .samf-faqs__tab-icon { transform: scaleX(-1); }
.samf-faqs__tab:hover { color: var(--samf-color-primary); }
.samf-faqs__tab[aria-selected="true"] { color: var(--samf-color-performance); }
.samf-faqs__tab:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: -3px; }

.samf-faqs__panels { flex: 1 1 0; min-inline-size: 0; }
.samf-faqs .accordion {
  --bs-accordion-bg: transparent; --bs-accordion-color: var(--samf-color-text); --bs-accordion-border-width: 0; --bs-accordion-border-radius: 0;
  --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--samf-color-primary);
  --bs-accordion-btn-padding-x: 0; --bs-accordion-btn-padding-y: 0; --bs-accordion-body-padding-x: 0; --bs-accordion-body-padding-y: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  display: block; gap: 0; box-sizing: border-box; padding: calc(2rem - 1px); /* Figma strokes sit inside the 32 padding */ border: 1px solid var(--samf-faq-line); border-radius: var(--samf-radius-xl); background: rgba(0, 0, 0, .01);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: clip;
}
.samf-faqs .accordion-item { background: transparent; color: var(--samf-color-text); border: 0; border-block-end: 1px solid var(--samf-faq-line); border-radius: 0; padding-block: 1rem calc(1rem - 1px); }
.samf-faqs .accordion-item:first-child { padding-block-start: 0; }
.samf-faqs .accordion-header { margin: 0; font-size: inherit; }
.samf-faqs .accordion-button {
  display: flex; align-items: flex-start; gap: 1rem; inline-size: 100%; min-block-size: 0; padding: 0; box-shadow: none;
  background: transparent; color: var(--samf-color-text);
  font-family: var(--m2-bukra); font-weight: 500; font-size: 1rem; line-height: 1.25rem; letter-spacing: -0.02em; text-align: start;
}
.samf-faqs .accordion-button:not(.collapsed) { background: transparent; color: var(--samf-color-primary); box-shadow: none; }
.samf-faqs .accordion-button::after {
  content: ""; order: -1; flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; background-image: none;
  background-color: currentColor; transform: none; filter: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='black' stroke-width='1.8' 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 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.samf-faqs .accordion-button:not(.collapsed)::after { transform: rotate(180deg); background-image: none; filter: none; }
.samf-faqs .accordion-button:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 4px; border-radius: var(--samf-radius); }
.samf-faqs .accordion-collapse { margin: 0; }
.samf-faqs .accordion-body {
  box-sizing: border-box; padding-block: 1rem 0; padding-inline: 2.25rem 0; color: var(--samf-color-text);
  font-family: var(--m2-rotunda); font-weight: 300; font-size: 1rem; line-height: 1.375rem; letter-spacing: -0.02em;
}
.samf-faqs .accordion-body > * { max-inline-size: 51.8125rem; margin-block: 0; }
.samf-faqs .accordion-body > * + * { margin-block-start: 1rem; }
[dir="rtl"] .samf-faqs .accordion-button, [dir="rtl"] .samf-faqs__tab, [dir="rtl"] .samf-faqs .accordion-body { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) { .samf-faqs .accordion-collapse { transition: none; } }
@media (max-width: 1024px) {
  .samf-faqs__body { margin-block: 2.5rem 0; padding-block-end: 2.5rem; }
  .samf-faqs__layout { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .samf-faqs__panels { flex: none; inline-size: 100%; }
  .samf-faqs__tabs { position: static; flex: none; inline-size: 100%; padding-inline-end: 0; }
  .samf-faqs .accordion { padding: 1.5rem; border-radius: 1.5rem; }
}
@media (max-width: 375px) {
  .samf-faqs .accordion { padding: calc(2rem - 1px); border-radius: 1rem; } /* Figma 950:85100: padding 32, radius 16 */
  .samf-faqs__tab { min-block-size: 2.75rem; }
}

/* Mobile (Figma 950:85100): the category list is a dropdown field ("General" + chevron, white, 44 high, radius 8). Without script the list stays open. */
.samf-faqs__picker { display: none; }
@media (max-width: 767.98px) {
  .samf-faqs__layout { position: relative; }
  .samf-faqs__picker {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; inline-size: 100%; box-sizing: border-box; min-block-size: 2.75rem; padding: .5rem 1rem;
    background: var(--samf-color-text); color: var(--samf-color-ink); border: 0; border-radius: var(--samf-radius-btn); cursor: pointer;
    font-family: var(--m2-bukra); font-weight: 400; font-size: 1rem; line-height: 1.25rem; text-align: start;
  }
  .samf-faqs__picker svg { flex: none; transition: transform .15s; }
  .samf-faqs__picker[aria-expanded="true"] svg { transform: rotate(180deg); }
  .samf-faqs__picker:focus-visible { outline: 3px solid var(--samf-color-focus); outline-offset: 2px; }
  .js-faq-picker .samf-faqs__tabs { display: none; }
  .js-faq-picker .samf-faqs__tabs.is-open { display: flex; position: absolute; inset-inline: 0; inset-block-start: 3.5rem; z-index: 5; background: var(--samf-color-ink); border: 1px solid var(--samf-faq-line); border-radius: var(--samf-radius-btn); padding-block: .25rem; }
  .js-faq-picker .samf-faqs__tabs .samf-faqs__tab { min-block-size: 2.75rem; }
}

/* Single FAQ item (Content-FAQ alternate): same glass look as the accordion card. */
.samf-faq { background: rgba(0, 0, 0, .01); border: 1px solid var(--samf-faq-line, var(--samf-color-border)); border-radius: 1.5rem; }
.samf-faq summary { font-weight: 500; }

/* ui-web-pages-1105: Figma 295:7441 starts at y 0 under the transparent header (sticky header = 125, hero starts at 76 => pull up 49) */
.samf-faqs.samf-m2-page { margin-block-start: -49px; }
@media (max-width: 767.98px) { .samf-faqs__picker { color: color-mix(in srgb, var(--samf-color-ink) 55%, #fff); } }

/* ui-web-pages-1105: Figma 40px tabs stay; hit area reaches 44px. Accordion questions are 44px tall targets at every width */
.samf-faqs__tab { position: relative; }
.samf-faqs__tab::before { content: ""; position: absolute; inset-block: -2px; inset-inline: 0; }
.samf-faqs .accordion-button { position: relative; }
.samf-faqs .accordion-button::before { content: ""; position: absolute; inset-block: -12px; inset-inline: 0; }

/* visual-fix-1108 G5: the shared .samf-faq-group 48px bottom margin pushed the next band 48px below the grit (Figma: 80 after the card). */
.samf-faqs .samf-faq-group { margin-block-end: 0; }
/* visual-fix-1108 G5: the 49px pull-up only belongs where the sticky header is 125 (1400+); below that the Figma header is nav + 130 (mobile 950:85100 = 230, title at 213). */
@media (max-width: 1399.98px) { .samf-faqs.samf-m2-page { margin-block-start: 0; } }
/* Figma 950:85100: 20px gutter, dropdown 38 high (14/20, 18px chevron, hit area kept at 44 by the pseudo element). */
@media (max-width: 575.98px) {
  .samf-faqs .samf-m2-wrap { padding-inline: 20px; }
  .samf-faqs__picker { position: relative; min-block-size: 38px; padding: 8px 12px; font-size: 14px; line-height: 20px; font-weight: 300; }
  .samf-faqs__picker::before { content: ""; position: absolute; inset-block: -3px; inset-inline: 0; }
  .samf-faqs__picker svg { inline-size: 18px; block-size: 18px; }
}