@layer components {
  .ec-faq {
    --faq-title-size: clamp(2.25rem, 1.9rem + 1.5vw, var(--ec-size-h2));
    --faq-item-radius: 12px;
    --faq-item-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
    --faq-marker-size: 32px;
    --faq-marker-border: 2px;

    background: var(--ec-bg-light);
    interpolate-size: allow-keywords;
  }

  .ec-faq__inner {
    display: flex;
    flex-direction: column;
    gap: var(--ec-section-gap);
  }

  .ec-faq__intro {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-12);
    text-align: center;
  }

  .ec-faq__title {
    color: var(--ec-text-primary);
    font-size: var(--faq-title-size);
    font-weight: var(--ec-weight-black);
    line-height: var(--ec-leading-title-lg);
  }

  .ec-faq__title-accent {
    color: var(--ec-text-accent);
  }

  .ec-faq__lead {
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-lg);
    line-height: var(--ec-leading-body-lg);
  }

  .ec-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-12);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-faq__item {
    border-radius: var(--faq-item-radius);
    background: var(--ec-bg-white);
    box-shadow: var(--faq-item-shadow);
  }

  .ec-faq__question {
    display: flex;
    gap: var(--ec-space-8);
    align-items: center;
    justify-content: space-between;
    padding: var(--ec-space-16) var(--ec-space-24);
    border-radius: var(--faq-item-radius);
    color: var(--ec-text-primary);
    font-size: var(--ec-size-md);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-title);
    list-style: none;
    cursor: pointer;
  }

  .ec-faq__question::-webkit-details-marker {
    display: none;
  }

  .ec-faq__question::after {
    content: "+";
    flex: none;
    display: grid;
    place-content: center;
    inline-size: var(--faq-marker-size);
    block-size: var(--faq-marker-size);
    border: var(--faq-marker-border) solid var(--ec-stroke-accent);
    border-radius: var(--ec-radius-full);
    color: var(--ec-text-accent);
    font-size: var(--ec-size-md);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-flat);
  }

  .ec-faq__item[open] .ec-faq__question::after {
    content: "−";
  }

  .ec-faq__answer {
    padding: 0 var(--ec-space-24) var(--ec-space-16);
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-md);
    line-height: var(--ec-leading-relaxed);
  }

  .ec-faq__answer a {
    color: var(--ec-text-accent);
    text-decoration: underline;
  }

  .ec-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--ec-transition), content-visibility var(--ec-transition);
    transition-behavior: allow-discrete;
  }

  .ec-faq__item[open]::details-content {
    block-size: auto;
  }
}