/* FAQ section: "Have questions?  Find answers." + accordion */

.s-faq {
  --fq-line: var(--hairline);    /* animated frame + button inner ring (prod token 06a467bf) */
  --fq-mut: #4d4d4d;             /* answers + doc line (prod token 0c5d4565) */
  position: relative;
  background: var(--bg);
  padding: 140px 30px;
}

html.dark .s-faq {
  --fq-line: #262a18;
  --fq-mut: #b7bba8;
}

.s-faq .fq-wrap {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

/* left column (411px like production Content) */
.s-faq .fq-left {
  flex: 1 1 0;
  max-width: 411px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* production keeps a 20px slot above the H2 (hidden "FAQs" tag + title gap) */
  padding-top: 20px;
}

.s-faq .fq-h {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
  white-space: pre-wrap;
}

.s-faq .fq-more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.s-faq .fq-q2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
  white-space: pre-wrap;
}

.s-faq .fq-doc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--fq-mut);
}

/* LAUNCHPAD button: dark fill + thin light inner ring + accent dotted arrow */
.s-faq .fq-btn {
  position: relative;
  height: 42px;
  padding: 0 24px 0 14px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  background: #0a0b04;
  border: 1px solid #0a0b04;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.s-faq .fq-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--fq-line);
  pointer-events: none;
}

html.dark .s-faq .fq-btn {
  border-color: #4d4d4d;
}

.s-faq .fq-btn-ic {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.s-faq .fq-btn-ic svg {
  display: block;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* accordion */
.s-faq .fq-list {
  flex: 1 1 0;
  min-width: 0;
}

/* hairlines are overlays (no layout height), like production: closed item pitch is exactly 76px */
.s-faq .fq-item {
  position: relative;
}

.s-faq .fq-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.s-faq .fq-item.fq-first::after {
  background: rgba(128, 128, 128, 0.28);
}

html.dark .s-faq .fq-item::after {
  background: var(--line);
}

html.dark .s-faq .fq-item.fq-first::after {
  background: rgba(128, 128, 128, 0.28);
}

.s-faq .fq-qbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.s-faq .fq-first .fq-qbtn {
  padding: 26px 0;
}

.s-faq .fq-qt {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--ink);
}

.s-faq .fq-ic {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: transform 0.25s ease;
}

.s-faq .fq-ic svg {
  display: block;
  width: 18px;
  height: 18px;
}

.s-faq .fq-ic-txt {
  width: auto;
  height: auto;
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}

.s-faq .fq-item.open .fq-ic {
  transform: rotate(45deg);
}

.s-faq .fq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.s-faq .fq-item.open .fq-a {
  grid-template-rows: 1fr;
}

.s-faq .fq-ain {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.s-faq .fq-item.open .fq-ain {
  opacity: 1;
}

.s-faq .fq-ain p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--fq-mut);
  /* question button already carries 24px bottom padding; net gap = 16px */
  margin: -8px 0 0;
  padding-bottom: 24px;
}

.s-faq .fq-first .fq-ain p {
  /* first item: 26px paddings, 14px gap */
  margin-top: -12px;
  padding-bottom: 26px;
}

/* animated dashed frame around the section (production Border Wrap, marching clockwise) */
.s-faq .fq-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(24px, calc((100% - var(--frame)) / 2));
  right: max(24px, calc((100% - var(--frame)) / 2));
  pointer-events: none;
  z-index: 4;
}

.s-faq .fq-e {
  position: absolute;
  display: block;
  /* solid bg under the dash gaps: production shows no page-frame dashes in this band */
  background-color: var(--bg);
}

.s-faq .fq-et,
.s-faq .fq-eb {
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(to right, var(--fq-line) 0 12px, transparent 12px 18px);
}

.s-faq .fq-el,
.s-faq .fq-er {
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(to bottom, var(--fq-line) 0 12px, transparent 12px 18px);
}

.s-faq .fq-et { top: 0; animation: af-faq-dash-r 1s linear infinite; }
.s-faq .fq-er { right: 0; animation: af-faq-dash-d 1s linear infinite; }
.s-faq .fq-eb { bottom: 0; animation: af-faq-dash-l 1s linear infinite; }
.s-faq .fq-el { left: 0; animation: af-faq-dash-u 1s linear infinite; }

@keyframes af-faq-dash-r { to { background-position: 18px 0; } }
@keyframes af-faq-dash-d { to { background-position: 0 18px; } }
@keyframes af-faq-dash-l { to { background-position: -18px 0; } }
@keyframes af-faq-dash-u { to { background-position: 0 -18px; } }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .s-faq .fq-e { animation: none; }
  .s-faq .fq-ic,
  .s-faq .fq-a,
  .s-faq .fq-ain { transition: none; }
}

.s-faq.fq-noanim .fq-e { animation: none; }
.s-faq.fq-noanim .fq-ic,
.s-faq.fq-noanim .fq-a,
.s-faq.fq-noanim .fq-ain { transition: none; }

/* tablet */
@media (max-width: 1439px) {
  .s-faq { padding: 100px 30px; }
  .s-faq .fq-wrap { flex-direction: column; gap: 60px; }
  .s-faq .fq-left { max-width: none; flex: none; width: 100%; }
  .s-faq .fq-list { flex: none; width: 100%; }
  .s-faq .fq-h { font-size: 38px; }
}

/* phone */
@media (max-width: 767px) {
  .s-faq { padding: 60px 20px; }
  .s-faq .fq-wrap { gap: 40px; }
  .s-faq .fq-left { gap: 24px; }
  .s-faq .fq-h { font-size: 26px; }
  .s-faq .fq-frame { left: 10px; right: 10px; }
}