.accordion__item { position: relative; }
.accordion__item + .accordion__item { margin-top: calc(80 * var(--design-unit)); }
.accordion__item + .accordion__item::before { position: absolute; top: calc(-41 * var(--design-unit)); left: 0; width: 100%; height: calc(2 * var(--design-unit)); background: url('../../images/common/accordion-divider.svg') center / 100% 100% no-repeat; content: ""; }
.accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: calc(30 * var(--design-unit)); color: #fff; cursor: pointer; list-style: none; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ""; }
.accordion__summary h3 { min-width: 0; font-size: calc(24 * var(--design-unit)); font-weight: 700; line-height: 1.6; }
.accordion__summary:focus-visible { outline: 2px solid #bdabff; outline-offset: calc(8 * var(--design-unit)); border-radius: calc(4 * var(--design-unit)); }
.accordion__summary:hover h3 { color: #bdabff; }
.accordion__toggle { position: relative; flex: 0 0 calc(18 * var(--design-unit)); height: calc(18 * var(--design-unit)); }
.accordion__toggle::before, .accordion__toggle::after { position: absolute; top: calc(8 * var(--design-unit)); left: 0; width: 100%; height: calc(2 * var(--design-unit)); background: currentColor; content: ""; }
.accordion__toggle::after { transform: rotate(90deg); transition: transform .2s ease; }
.accordion__item[open] > .accordion__summary .accordion__toggle::after { transform: rotate(0deg); }
.accordion__body { margin-top: calc(10 * var(--design-unit)); color: var(--color-muted); font-size: calc(17 * var(--design-unit)); line-height: 1.8; }
.accordion__body p, .accordion__body h4, .accordion__body ul { margin-bottom: calc(12 * var(--design-unit)); }
.accordion__body > :last-child { margin-bottom: 0; }
.accordion__body h4 { color: #fff; font-size: inherit; font-weight: 700; }
.accordion__body ul { padding-left: 1.5em; }
.accordion__body li { list-style: disc; }

/* Intrinsic grid height follows translated copy and responsive line wrapping.
   Keep details open through the exit; only the clipped panel changes height. */
[data-accordion] { overflow-anchor: none; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.4, 0, .2, 1); }
.accordion__clip { min-height: 0; overflow: hidden; }
/* Once expanded, let existing button shadows and focus outlines paint normally. */
.accordion__item--settled > .accordion__panel > .accordion__clip { overflow: visible; }
.accordion__content { display: flow-root; opacity: 0; translate: 0 calc(24 * var(--design-unit)); transition: opacity .8s cubic-bezier(.4, 0, .2, 1), translate .8s cubic-bezier(.4, 0, .2, 1); }
.accordion__item--expanded > .accordion__panel { grid-template-rows: 1fr; }
.accordion__item--expanded > .accordion__panel > .accordion__clip > .accordion__content { opacity: 1; translate: 0 0; }
.accordion__item--animated > .accordion__summary .accordion__toggle::after { transition-duration: .8s; }
.accordion__item--animated:not(.accordion__item--expanded) > .accordion__summary .accordion__toggle::after { transform: rotate(90deg); }

@media (max-width: 768px) {
  .accordion__content { translate: 0 .2rem; }
  .accordion__item + .accordion__item { margin-top: .48rem; }
  .accordion__item + .accordion__item::before { top: -.25rem; height: 2px; }
  .accordion__summary { gap: .16rem; min-height: .44rem; }
  .accordion__summary h3 { font-size: .18rem; line-height: 1.5; }
  .accordion__summary:focus-visible { outline-offset: .04rem; border-radius: .04rem; }
  .accordion__toggle { flex-basis: .18rem; height: .18rem; }
  .accordion__toggle::before, .accordion__toggle::after { top: .08rem; height: .02rem; }
  .accordion__body { margin-top: .14rem; font-size: .15rem; line-height: 1.75; }
  .accordion__body p, .accordion__body h4, .accordion__body ul { margin-bottom: .12rem; }
}