.faq { background: var(--bg); padding: 40px 80px 120px; }

.faq .container { max-width: 920px; margin: 0 auto; }

.faq .list { margin: 0; padding: 0; }

.faq details {
    background: var(--paper);
    border: 1px solid var(--rule);
    margin-bottom: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

.faq details[open] {
    border-color: var(--pink);
    box-shadow: 0 16px 32px -20px rgba(194, 117, 134, 0.25);
  }

.faq summary {
    list-style: none; cursor: pointer;
    padding: 24px 28px;
    display: grid; grid-template-columns: 40px 1fr 28px;
    gap: 18px; align-items: center;
  }

.faq summary::-webkit-details-marker { display: none; }

.faq summary .q-mark {
    font-family: var(--font-serif);
    font-size: 26px; color: var(--pink-deep);
    font-weight: 500; letter-spacing: 0; line-height: 1;
  }

.faq summary .q-text {
    font-size: 16px; color: var(--ink);
    font-weight: 500; line-height: 1.7;
    letter-spacing: 0.04em;
  }

.faq summary .toggle {
    position: relative; width: 18px; height: 18px;
    justify-self: end;
  }

.faq summary .toggle::before,
  .faq summary .toggle::after {
    content: ""; position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1.5px; background: var(--pink-deep);
    transition: transform 0.3s;
  }

.faq summary .toggle::after {
    transform: rotate(90deg);
  }

.faq details[open] summary .toggle::after {
    transform: rotate(0deg);
  }

.faq .answer {
    padding: 0 28px 28px 86px;
    display: grid; grid-template-columns: 40px 1fr;
    gap: 0;
  }

.faq .answer .a-mark {
    font-family: var(--font-serif);
    font-size: 22px; color: var(--sky-deep);
    font-weight: 500; line-height: 1.5;
    margin-left: -58px;
  }

.faq .answer .a-text {
    font-size: 15px; color: var(--ink);
    line-height: 2; letter-spacing: 0.03em;
    padding-top: 4px;
  }

.faq .answer .a-text p { margin: 0 0 12px; }

.faq .answer .a-text p:last-child { margin-bottom: 0; }@media (max-width: 1199px) {
  .faq { padding: 32px clamp(24px, 5vw, 80px) 96px; }
  .faq summary { padding: 22px 24px; grid-template-columns: 32px 1fr 24px; gap: 14px; }
  .faq summary .q-mark { font-size: 22px; }
  .faq summary .q-text { font-size: 15px; }
  .faq .answer { padding: 0 24px 24px 70px; }
  .faq .answer .a-mark { font-size: 20px; margin-left: -46px; }
}@media (max-width: 899px) {
  .faq { padding: 24px 24px 80px; }
  .faq summary {
      padding: 18px 18px;
      grid-template-columns: 28px 1fr 20px; gap: 12px;
    }
  .faq summary .q-mark { font-size: 19px; }
  .faq summary .q-text { font-size: 14px; line-height: 1.7; }
  .faq .answer {
      padding: 0 18px 22px 58px;
    }
  .faq .answer .a-mark { font-size: 18px; margin-left: -40px; }
  .faq .answer .a-text { font-size: 14px; line-height: 1.95; }
}@media (max-width: 559px) {
  .faq { padding: 16px 16px 64px; }
  .faq summary {
      padding: 16px 14px;
      grid-template-columns: 24px 1fr 18px; gap: 10px;
    }
  .faq summary .q-mark { font-size: 17px; }
  .faq summary .q-text { font-size: 13.5px; }
  .faq .answer {
      padding: 0 14px 18px 48px;
    }
  .faq .answer .a-mark { font-size: 16px; margin-left: -34px; }
  .faq .answer .a-text { font-size: 13.5px; }
}