/* ==========================================================================
   FAQ — customer support + common questions
   Two columns: support card on the left, accordion on the right.
   Palette and reveal behaviour match the neighbouring sections
   (stats/learning). faq.js adds .is-in for the staggered entry and
   toggles .is-open / aria-expanded on the accordion items.
   ========================================================================== */

.mia-faq {
  position: relative;
  padding: clamp(70px, 9vh, 110px) clamp(16px, 4vw, 56px);
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fc 55%, #ffffff 100%);
  overflow: hidden;
}

/* soft ambient glows so it blends with the neighbouring sections */
.mia-faq::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 34% at 20% 28%, rgba(125, 184, 232, 0.16), transparent 70%),
    radial-gradient(36% 30% at 84% 70%, rgba(186, 156, 232, 0.1), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

.mia-faq__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 44px);
}

/* ---------------- centered heading ---------------- */

.mia-faq__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 1.8vh, 20px);
}

.mia-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(74, 144, 194, 0.3);
  background: rgba(125, 184, 232, 0.12);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2b5f8f;
}

.mia-faq__title {
  margin: 0;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #16324f;
}

.mia-faq__title em {
  font-style: normal;
  color: #4a97d8;
}

/* line — anchor — line rule under the heading */
.mia-faq__title::after {
  content: '';
  display: block;
  width: 190px;
  height: 16px;
  margin: 20px auto 0;
  background-color: #4a97d8;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
}


.mia-faq__para {
  margin: 0;
  max-width: 560px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
  color: #45607a;
}

/* copy reveal — items rise one after another (faq.js adds .is-in) */
.mia-faq__copy > * {
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mia-faq:not(.is-in) .mia-faq__copy > * {
  opacity: 0;
  transform: translateY(30px);
}

.mia-faq.is-in .mia-faq__copy > :nth-child(2) { transition-delay: 0.08s; }
.mia-faq.is-in .mia-faq__copy > :nth-child(3) { transition-delay: 0.16s; }
.mia-faq.is-in .mia-faq__copy > :nth-child(4) { transition-delay: 0.24s; }

/* ---------------- support card ---------------- */

.mia-faq__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: 18px;
  border: 1px solid rgba(22, 50, 79, 0.1);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 16px 38px -18px rgba(22, 50, 79, 0.28);
  backdrop-filter: blur(6px);
  transition:
    opacity 0.7s ease 0.35s,
    transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1) 0.35s;
}

/* card rises last, after the accordion items */
.mia-faq:not(.is-in) .mia-faq__card {
  opacity: 0;
  transform: translateY(30px);
}

.mia-faq__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #006994;
  background: rgba(125, 184, 232, 0.16);
  border: 1px solid rgba(74, 144, 194, 0.25);
}

.mia-faq__card-body {
  flex: 1 1 150px;
  min-width: 0;
}

.mia-faq__card-title {
  display: block;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  color: #16324f;
}

.mia-faq__card-text {
  margin: 2px 0 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.5;
  color: #45607a;
}

.mia-faq__card-mail {
  color: #006994;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 105, 148, 0.35);
  transition: text-decoration-color 0.25s ease;
}

.mia-faq__card-mail:hover { text-decoration-color: currentColor; }

.mia-faq__card-mail:focus-visible {
  outline: 3px solid rgba(0, 105, 148, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

.mia-faq__card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  color: #ffffff;
  /* brand ocean teal — same as the learning-section CTA */
  background: linear-gradient(180deg, #0d84b5 0%, #006994 100%);
  box-shadow:
    0 12px 28px -8px rgba(0, 105, 148, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background 0.3s ease;
  will-change: transform;
}

.mia-faq__card-btn:hover {
  transform: translateY(-2px) scale(1.04);
  background: linear-gradient(180deg, #1795c9 0%, #0077a8 100%);
  box-shadow:
    0 18px 38px -10px rgba(0, 105, 148, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.mia-faq__card-btn:active { transform: scale(0.97); }

.mia-faq__card-btn:focus-visible {
  outline: 3px solid rgba(0, 105, 148, 0.4);
  outline-offset: 3px;
}

/* ---------------- accordion ---------------- */

.mia-faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 14px);
}

.mia-faq__item {
  border: 1px solid rgba(22, 50, 79, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 26px -16px rgba(22, 50, 79, 0.25);
  backdrop-filter: blur(6px);
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mia-faq__item.is-open {
  border-color: rgba(74, 144, 194, 0.45);
  box-shadow: 0 18px 40px -18px rgba(22, 50, 79, 0.35);
}

/* accordion reveal — items rise one after another */
.mia-faq:not(.is-in) .mia-faq__item {
  opacity: 0;
  transform: translateY(30px);
}

.mia-faq.is-in .mia-faq__item:nth-child(2) { transition-delay: 0.07s; }
.mia-faq.is-in .mia-faq__item:nth-child(3) { transition-delay: 0.14s; }
.mia-faq.is-in .mia-faq__item:nth-child(4) { transition-delay: 0.21s; }
.mia-faq.is-in .mia-faq__item:nth-child(5) { transition-delay: 0.28s; }

.mia-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(16px, 2vh, 20px) clamp(16px, 2vw, 24px);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.4;
  color: #16324f;
  transition: color 0.25s ease;
}

.mia-faq__q:hover { color: #006994; }

.mia-faq__q:focus-visible {
  outline: 3px solid rgba(0, 105, 148, 0.4);
  outline-offset: -3px;
  border-radius: 16px;
}

.mia-faq__item.is-open .mia-faq__q { color: #006994; }

.mia-faq__chev {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #2b5f8f;
  background: rgba(125, 184, 232, 0.14);
  border: 1px solid rgba(74, 144, 194, 0.25);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1),
    background 0.3s ease,
    color 0.3s ease;
}

.mia-faq__item.is-open .mia-faq__chev {
  transform: rotate(180deg);
  color: #ffffff;
  background: linear-gradient(180deg, #0d84b5 0%, #006994 100%);
  border-color: transparent;
}

/* answer panel — animated with the grid-rows trick (no JS measuring) */
.mia-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.mia-faq__item.is-open .mia-faq__a {
  grid-template-rows: 1fr;
}

.mia-faq__a-inner {
  overflow: hidden;
  padding: 0 clamp(16px, 2vw, 24px);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.7;
  color: #45607a;
  opacity: 0;
  transition: opacity 0.35s ease, padding 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.mia-faq__item.is-open .mia-faq__a-inner {
  padding-bottom: clamp(16px, 2vh, 22px);
  opacity: 1;
  transition-delay: 0.08s;
}

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  .mia-faq__inner {
    gap: clamp(24px, 4vh, 36px);
  }

  .mia-faq__card {
    justify-content: center;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mia-faq__copy > *,
  .mia-faq:not(.is-in) .mia-faq__copy > *,
  .mia-faq__item,
  .mia-faq:not(.is-in) .mia-faq__item,
  .mia-faq__card,
  .mia-faq:not(.is-in) .mia-faq__card,
  .mia-faq__a,
  .mia-faq__a-inner,
  .mia-faq__chev {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mia-faq:not(.is-in) .mia-faq__item { opacity: 1; transform: none; }
  .mia-faq__item.is-open .mia-faq__chev { transform: rotate(180deg); }
  .mia-faq__a-inner { opacity: 1; }
  .mia-faq__item:not(.is-open) .mia-faq__a-inner { opacity: 1; }
}

/* ---------------- dark theme ---------------- */

[data-theme="dark"] .mia-faq {
  background: linear-gradient(180deg, #04101d 0%, #071a2e 45%, #04101d 100%);
}

[data-theme="dark"] .mia-faq::before {
  background:
    radial-gradient(42% 30% at 20% 24%, rgba(43, 95, 143, 0.25), transparent 70%),
    radial-gradient(38% 28% at 84% 64%, rgba(74, 42, 120, 0.16), transparent 70%);
}

[data-theme="dark"] .mia-faq__eyebrow {
  background: rgba(13, 32, 52, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #7db8e8;
}

[data-theme="dark"] .mia-faq__title { color: #e6eef7; }
[data-theme="dark"] .mia-faq__title em { color: #7db8e8; }
[data-theme="dark"] .mia-faq__title::after { background-color: #6fb1de; }

[data-theme="dark"] .mia-faq__para { color: #9db4c9; }

[data-theme="dark"] .mia-faq__card {
  background: rgba(13, 32, 52, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 38px -18px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .mia-faq__card-icon {
  color: #7db8e8;
  background: rgba(43, 95, 143, 0.25);
  border-color: rgba(125, 184, 232, 0.25);
}

[data-theme="dark"] .mia-faq__card-title { color: #e6eef7; }
[data-theme="dark"] .mia-faq__card-text { color: #9db4c9; }

[data-theme="dark"] .mia-faq__card-mail {
  color: #7db8e8;
  text-decoration-color: rgba(125, 184, 232, 0.4);
}

[data-theme="dark"] .mia-faq__item {
  background: rgba(13, 32, 52, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .mia-faq__item.is-open {
  border-color: rgba(125, 184, 232, 0.4);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .mia-faq__q { color: #e6eef7; }

[data-theme="dark"] .mia-faq__q:hover,
[data-theme="dark"] .mia-faq__item.is-open .mia-faq__q { color: #7db8e8; }

[data-theme="dark"] .mia-faq__chev {
  color: #7db8e8;
  background: rgba(43, 95, 143, 0.25);
  border-color: rgba(125, 184, 232, 0.25);
}

[data-theme="dark"] .mia-faq__a-inner { color: #9db4c9; }