@keyframes index-pop { 0% { transform: scale(0.92) translateY(8px); opacity: 0; } 50% { transform: scale(1.08); } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes index-shrink { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.92) translateY(8px); opacity: 0; } }
.glass-card { background: rgba(255,255,255,0.55); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.6); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-answer > div {
  overflow: hidden;
}
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.mobile-faq-index-button {
  display: none;
}
.mobile-faq-index-shell::before,
.mobile-faq-index-button::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
@media (max-width: 1023px) {
  #faq-content .grid {
    display: block;
  }
  #faq-content .reveal.reveal-delay-1 {
    opacity: 1;
    transform: none;
  }
  .mobile-faq-index-shell {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    z-index: 50;
  }
  .mobile-faq-index-shell.reveal,
  .mobile-faq-index-shell.reveal.revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mobile-faq-index-shell .glass-card {
    width: 4.5rem;
    max-height: 4.5rem;
    padding: 0;
    overflow: hidden;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)),
      radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.45), transparent 42%),
      rgba(250, 246, 240, 0.22);
    box-shadow:
      0 18px 40px rgba(44, 26, 18, 0.14),
      inset 0 1px 1px rgba(255, 255, 255, 0.5),
      inset 0 -8px 20px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    transition:
      width 0.82s cubic-bezier(0.22, 1, 0.36, 1),
      max-height 0.82s cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 0.82s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s ease,
      transform 0.45s ease,
      background-color 0.45s ease;
    will-change: width, max-height, border-radius, transform;
  }
  .mobile-faq-index-shell .glass-card::before {
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.52), transparent 32%),
      radial-gradient(circle at 78% 78%, rgba(201, 168, 76, 0.2), transparent 26%);
    opacity: 0.95;
  }
  .mobile-faq-index-shell[data-state="teaser"] .glass-card {
    width: 9.75rem;
    max-height: 4.5rem;
    border-radius: 9999px;
    animation: index-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .mobile-faq-index-shell[data-state="open"] .glass-card {
    width: min(18rem, calc(100vw - 2rem));
    max-height: min(70vh, 34rem);
    border-radius: 1.6rem;
    box-shadow:
      0 24px 60px rgba(44, 26, 18, 0.18),
      inset 0 1px 1px rgba(255, 255, 255, 0.55),
      inset 0 -12px 24px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px) scale(1.01);
    display: flex;
    flex-direction: column;
  }
  .mobile-faq-index-button {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 4.5rem;
    padding: 0.8rem;
    color: #2C1A12;
    border-radius: inherit;
    transition:
      padding 0.82s cubic-bezier(0.22, 1, 0.36, 1),
      gap 0.82s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s ease,
      background-color 0.3s ease;
  }
  .mobile-faq-index-button::before {
    background:
      linear-gradient(130deg, rgba(255, 255, 255, 0.38), transparent 55%),
      radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.24), transparent 30%);
    opacity: 0.9;
  }
  .mobile-faq-index-button:active {
    transform: scale(0.96);
  }
  .mobile-faq-index-shell[data-state="icon"] .mobile-faq-index-button {
    justify-content: center;
    padding: 0.8rem;
  }
  .mobile-faq-index-shell[data-state="icon"] .mobile-faq-index-copy {
    display: none;
    opacity: 0;
  }
  .mobile-faq-index-shell[data-state="icon"] .mobile-faq-index-chevron {
    display: none;
    opacity: 0;
  }
  .mobile-faq-index-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-faq-index-shell[data-state="icon"] .mobile-faq-index-icon {
    box-shadow:
      0 10px 24px rgba(201, 168, 76, 0.18),
      inset 0 1px 1px rgba(255, 255, 255, 0.4);
  }
  .mobile-faq-index-shell[data-state="teaser"] .mobile-faq-index-button {
    justify-content: flex-start;
    padding: 0.8rem 1rem 0.8rem 0.8rem;
  }
  .mobile-faq-index-shell[data-state="teaser"] .mobile-faq-index-copy {
    display: flex;
  }
  .mobile-faq-index-shell[data-state="teaser"] .mobile-faq-index-chevron {
    display: none;
  }
  .mobile-faq-index-shell[data-state="open"] .mobile-faq-index-button {
    border-bottom: 1px solid rgba(44, 26, 18, 0.08);
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem 0.8rem;
  }
  .mobile-faq-index-shell[data-state="open"] .mobile-faq-index-copy,
  .mobile-faq-index-shell[data-state="open"] .mobile-faq-index-chevron {
    display: flex;
  }
  .mobile-faq-index-shell[data-state="open"] #faq-nav a + a {
    margin-top: 0.5rem;
  }
  .mobile-faq-index-shell[data-state="open"] #faq-nav {
    max-height: min(60vh, 28rem);
    padding: 0 1rem 1rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow-y: auto;
  }
  .mobile-faq-index-copy {
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobile-faq-index-chevron {
    transition: opacity 0.3s ease;
  }
  #faq-nav {
    display: block;
    opacity: 0;
    max-height: 0;
    overflow-y: hidden;
    padding: 0 1rem 0;
    transform: translateY(10px);
    pointer-events: none;
    transition:
      max-height 0.78s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s ease,
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (min-width: 1024px) {
  .mobile-faq-index-button {
    display: none !important;
  }
}
mark.faq-hit { background: rgba(201,168,76,0.35); color: inherit; border-radius: 3px; padding: 0 2px; }

/* FAQ item hover nudge */
.faq-item { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.faq-item:hover { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .faq-item:hover { transform: none; } }

/* FAQ loading dots */
.faq-dot { width: 10px; height: 10px; border-radius: 9999px; animation: dot-bounce 1s ease-in-out infinite; }
.faq-dot:nth-child(1) { background: #C9A84C; }
.faq-dot:nth-child(2) { background: #C67B5C; animation-delay: 0.15s; }
.faq-dot:nth-child(3) { background: #A8C5A0; animation-delay: 0.3s; }
@keyframes dot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .faq-dot { animation: none; } }