/* ==========================================================================
   S-12 FAQ, Financial X-Ray rebuild (2026-09-13)
   FAQ-01 lifted, adapted: navy ground, gold and white. Each drawer shows the
   question (white, display face), the simple answer under it (gold), and a
   gold plus on the right that opens the rest of the answer (white). The plus
   turns to a cross when open. Single-open. Tokens only.
   ========================================================================== */
.lp-faq {
  position: relative; z-index: 0;
  background: var(--lp-navy); color: var(--c-white);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: left;
}
.lp-faq div { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-faq p, .lp-faq ul, .lp-faq h3, .lp-faq li { margin-block: 0; }
.lp-faq__inner { max-width: 900px; margin-inline: auto; }
.lp-faq .lp-faq__list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
/* the drawer */
.lp-faq .lp-faq__item {
  border: 1px solid color-mix(in srgb, var(--lp-gold) 34%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--arbor-navy-mid) 70%, var(--lp-navy));
  transition: border-color 0.3s ease-out, background-color 0.3s ease-out, box-shadow 0.3s ease-out;
  /* the whole drawer opens it, not only the plus (Quinten 2026-09-14; ag-faq.js) */
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .lp-faq .lp-faq__item:hover { border-color: color-mix(in srgb, var(--lp-gold) 60%, transparent); }
}
.lp-faq .lp-faq__item.is-open {
  border-color: var(--lp-gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lp-gold) 30%, transparent), 0 14px 42px color-mix(in srgb, var(--arbor-navy-deep) 60%, transparent);
}
.lp-faq .lp-faq__head {
  display: grid; grid-template-columns: minmax(0, 1fr) 49px; column-gap: clamp(14px, 2vw, 28px); align-items: start;
  padding: clamp(18px, 1.5vw + 8px, 28px) clamp(18px, 2vw + 6px, 28px);
}
.lp-faq__q {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--c-white); text-wrap: balance; max-width: 34ch;
}
/* the simple answer, gold, always showing */
.lp-faq__simple {
  margin-top: 7px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.4;
  color: var(--lp-gold);
}
/* the rest, revealed by the plus */
.lp-faq .lp-faq__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.lp-faq__more {
  padding-top: 9px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); line-height: 1.6;
  color: color-mix(in srgb, var(--c-white) 82%, var(--lp-gold)); text-wrap: pretty; max-width: 58ch;
}
/* the plus: a gold ring, 49px, turns to a cross when open */
.lp-faq .lp-faq__plus {
  width: 49px; height: 49px; padding: 0; border-radius: 50%; box-sizing: border-box;
  display: inline-grid; place-items: center; justify-self: end;
  background: transparent; color: var(--lp-gold);
  border: 1.5px solid color-mix(in srgb, var(--lp-gold) 70%, transparent);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}
.lp-faq .lp-faq__plus svg { width: 22px; height: 22px; max-width: none; transition: transform 0.3s ease-out; }
.lp-faq .lp-faq__plus[aria-expanded="true"] { background: var(--lp-gold); color: var(--lp-navy); border-color: var(--lp-gold); }
.lp-faq .lp-faq__plus[aria-expanded="true"] svg { transform: rotate(45deg); }
.lp-faq .lp-faq__plus:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
@media (hover: hover) {
  .lp-faq .lp-faq__item:hover { border-color: color-mix(in srgb, var(--lp-gold) 70%, transparent); }
  .lp-faq .lp-faq__plus:hover { background: var(--lp-gold); color: var(--lp-navy); border-color: var(--lp-gold); }
}
@media (max-width: 900px) {
  .lp-faq__q, .lp-faq__more { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-faq .lp-faq__item, .lp-faq .lp-faq__panel, .lp-faq .lp-faq__plus, .lp-faq .lp-faq__plus svg { transition: none; }
}

/* ---- life on the ground (2026-09-13): a fine dot grid and two soft gold
   lamps that drift slowly behind the drawers --------------------------------- */
.lp-faq { overflow: clip; }
.lp-faq::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--lp-gold) 42%, transparent) 1.2px, transparent 1.8px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, var(--lp-navy) 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, var(--lp-navy) 30%, transparent 100%);
  opacity: 0.7;
}
/* the light lives IN THE DOTS only (Quinten 2026-09-14): a second, brighter
   dot grid masked by two soft radial windows that drift slowly, so the dots
   brighten as the light passes and the ground itself never washes */
.lp-faq__lit {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--lp-gold-light) 95%, transparent) 1.4px, transparent 2px);
  background-size: 28px 28px;
  -webkit-mask-image:
    radial-gradient(circle, var(--lp-navy) 0%, color-mix(in srgb, var(--lp-navy) 40%, transparent) 40%, transparent 68%),
    radial-gradient(circle, var(--lp-navy) 0%, color-mix(in srgb, var(--lp-navy) 40%, transparent) 40%, transparent 68%);
          mask-image:
    radial-gradient(circle, var(--lp-navy) 0%, color-mix(in srgb, var(--lp-navy) 40%, transparent) 40%, transparent 68%),
    radial-gradient(circle, var(--lp-navy) 0%, color-mix(in srgb, var(--lp-navy) 40%, transparent) 40%, transparent 68%);
  -webkit-mask-size: 820px 820px, 640px 640px; mask-size: 820px 820px, 640px 640px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: -10% -20%, 110% 120%; mask-position: -10% -20%, 110% 120%;
  animation: lp-faq-lit 21s ease-in-out infinite;
}
@keyframes lp-faq-lit {
  0%, 100% { -webkit-mask-position: -10% -20%, 110% 120%; mask-position: -10% -20%, 110% 120%; }
  50%      { -webkit-mask-position: 45% 60%, 55% 30%;    mask-position: 45% 60%, 55% 30%; }
}
.lp-faq__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .lp-faq__lit { animation: none; } }