#faq { --faq04-gutter: calc(8% + 20px); position: relative; z-index: 5; padding: 80px var(--faq04-gutter); background: #fff; color: #30353A; }
#faq p { margin: 0; }

#faq .faq04__head { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #dce0e4; }

#faq .faq04__eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #30353A; }
#faq .faq04__h { margin: 0; padding: 0; font-weight: 700; font-size: 32px; line-height: 1.25; color: #30353A; text-transform: none; letter-spacing: 0; }

#faq .faq04__list { display: grid; gap: 16px; }
#faq .faq__q {
  border: 1px solid #dce0e4;
  border-left: 4px solid #dce0e4;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.15s ease;
}
#faq .faq__q[open] { border-left-color: #D8B98A; }
#faq .faq__q > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 56px 16px 24px;
  min-height: 44px;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #30353A;
}
#faq .faq__q > summary::-webkit-details-marker { display: none; }
#faq .faq__q > summary:hover { color: #000; }

#faq .faq__q > summary::after {
  content: '';
  position: absolute; right: 24px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
}
#faq .faq__q[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
#faq .faq__a { padding: 0 24px 24px; }
#faq .faq__a p { max-width: 62ch; font-size: 16px; line-height: 1.6; color: #555b61; }
#faq .faq__a p + p { margin-top: 12px; }

@media only screen and (max-width: 980px) {
  #faq { --faq04-gutter: 40px; padding-block: 60px; }
  #faq .faq04__h { font-size: 26px; line-height: 35px; }
}


#faq .faq__a a { color: #30353A; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
#faq .faq__a a:hover { color: #000; }


@media only screen and (max-width: 479px) {
  #faq { --faq04-gutter: 24px; }
}