/* ==========================================================================
   WBI Horizontal Accordion
   Numbered steps. Side by side, one step is an open card and the others are
   narrow columns with a vertical title; stacked, the others are rows under
   the card. An optional intro (title and text) sits on the left or on top.

   Tokens live in :where() (zero specificity) so any rule Bricks generates on
   the root (#brxe-xxx { --token: ... }) always wins, regardless of the order
   in which the stylesheets load.

   Sizes are in `em` against --wbi-ha-base (16px) or in px, never in rem:
   Bricks sets the root to 10px and the component would silently shrink.

   Default values reproduce the design at 1440, 1024 and 402 px.
   ========================================================================== */

:where(.wbi-horizontal-accordion) {
  --wbi-ha-base: 16px;
  /* Theme Styles > WBI Elements > Font (see wbi-fonts.css) */
  --wbi-ha-font: var(--wbi-font), system-ui, -apple-system, "Segoe UI", sans-serif;
  --wbi-ha-focus: #3E94B9;
  --wbi-ha-duration: 600ms;
  --wbi-ha-ease: cubic-bezier(0.22, 1, 0.36, 1); /* quick start, soft landing */

  /* --- Intro -----------------------------------------------------------
     Text colors are defaults only: each Typography control writes `color`
     on its selector and wins over them. */
  --wbi-ha-intro-w: 320px;
  --wbi-ha-heading-color: #0D1115;
  --wbi-ha-text-color: #3A3A3A;
  --wbi-ha-text-w: none;

  /* --- Steps ------------------------------------------------------------ */
  --wbi-ha-min-h: 587px;        /* + the card border: 589px in the design */
  --wbi-ha-col-w: 138px;        /* collapsed step, gap included */
  --wbi-ha-gap: 30px;
  --wbi-ha-line-w: 1px;
  --wbi-ha-line-color: #CBD1DB;
  --wbi-ha-bleed: 0px;          /* 20px on phones, see the end of the file */

  /* --- Number: outlined, drawn as SVG text --------------------------------
     Closed steps stroke it with the text color, the open card with the
     gradient. */
  --wbi-ha-num-color: #3A3A3A;
  --wbi-ha-num-fill: transparent;
  --wbi-ha-num-stroke-w: 1px;
  --wbi-ha-num-from: #D3EEFA;
  --wbi-ha-num-to: #00589C;

  /* --- Collapsed step ---------------------------------------------------- */
  --wbi-ha-label-color: #CBD1DB;
  --wbi-ha-label-hover: #8E97A8;
  --wbi-ha-label-gap: 84px;     /* number · vertical title */
  --wbi-ha-label-len: 300px;    /* a longer vertical title wraps */
  --wbi-ha-col-pad-top: 0px;
  --wbi-ha-col-pad-x: 22px;     /* divider · content */
  --wbi-ha-col-num-shift: 4px;  /* the number sits a little right of the title */
  --wbi-ha-row-num-w: 73px;     /* stacked: number column */

  /* --- Open card --------------------------------------------------------- */
  --wbi-ha-card-bg: #FFFFFF;
  --wbi-ha-card-border: #DFDFDF;
  --wbi-ha-card-border-w: 1px;
  --wbi-ha-card-radius: 10px;
  --wbi-ha-card-shadow: 0 23px 34px -3px rgba(0, 0, 0, 0.18);
  --wbi-ha-num-gap: 92px;       /* number · title */
  --wbi-ha-num-shift: 9px;      /* the design sets the number in from the text */
  --wbi-ha-title-color: #0D1115;
  --wbi-ha-title-w: 250px;
  --wbi-ha-title-gap: 79px;     /* title · description */
  --wbi-ha-desc-color: #3A3A3A;
  --wbi-ha-desc-w: 410px;
  --wbi-ha-link-color: inherit;
}

/* Undeclared tokens
   A few tokens are never declared above and are read as var(--x, default)
   instead:
   - `dimensions` controls (card padding, stacked row padding) emit one token
     per side and only for the sides the editor fills in; declaring them would
     pin every side and the fallback would never apply.
   - --wbi-ha-intro-gap-x, --wbi-ha-intro-gap-y and --wbi-ha-heading-gap and
     the card padding have their own defaults on narrower containers (the
     design's tablet and phone artboards); left undeclared, a value set in the
     builder applies at every width. */

/* ==========================================================================
   Root and intro
   ========================================================================== */

.wbi-horizontal-accordion {
  /* Required, not cosmetic: `container-type: inline-size` stops the content
     from contributing intrinsic width, and Bricks containers are flex with
     `align-items: flex-start`. Without this it collapses to 0px in the builder. */
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: wbiva;
  font-family: var(--wbi-ha-font);
  font-size: var(--wbi-ha-base);
}

.wbi-horizontal-accordion *,
.wbi-horizontal-accordion *::before,
.wbi-horizontal-accordion *::after {
  box-sizing: border-box;
}

/* Intro on the left of the steps. Below a 1200px container it moves on top
   (same rule, one column). The "Intro position" control writes this token
   with an id selector, which wins over both. */
.wbi-horizontal-accordion__layout {
  --wbi-ha-layout-cols: minmax(0, var(--wbi-ha-intro-w)) minmax(0, 1fr);
  display: grid;
  grid-template-columns: var(--wbi-ha-layout-cols);
  align-items: center;
  gap: var(--wbi-ha-intro-gap-y, 80px) var(--wbi-ha-intro-gap-x, 64px);
}

/* Without an intro the steps take the whole row, whatever the columns. */
.wbi-horizontal-accordion__list:only-child {
  grid-column: 1 / -1;
}

.wbi-horizontal-accordion__intro {
  min-width: 0;
}

.wbi-horizontal-accordion__heading {
  margin: 0;
  font-family: inherit;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.0625;
  letter-spacing: 0;
  color: var(--wbi-ha-heading-color);
}

.wbi-horizontal-accordion__text {
  max-width: var(--wbi-ha-text-w);
  margin: 0;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wbi-ha-text-color);
}

.wbi-horizontal-accordion__heading + .wbi-horizontal-accordion__text {
  margin-top: var(--wbi-ha-heading-gap, 25px);
}

/* ==========================================================================
   Steps: layout modes
   One switch, --wbi-ha-stack, turns "side by side" into "stacked". Its
   value `initial` (the guaranteed-invalid value) means side by side; an
   empty value means stacked. The container query at the end empties it below
   640px, and the "Steps layout" control writes it per breakpoint with an id
   selector, which wins over both.

   Every mode token below is its stacked value behind the switch (the "space
   toggle"): with the switch off it is invalid too, and the var() that reads
   it falls back to the side-by-side value written right there. Nothing adds
   builder values with calc(), so a zero from Bricks cannot break it.
   ========================================================================== */

.wbi-horizontal-accordion__list {
  --wbi-ha-stack: initial;

  --wbi-ha-flow: var(--wbi-ha-stack) column;
  --wbi-ha-closed-flex: var(--wbi-ha-stack) 0 0 auto;
  --wbi-ha-open-flex: var(--wbi-ha-stack) 0 0 auto;
  --wbi-ha-gap-x: var(--wbi-ha-stack) 0px;
  --wbi-ha-item-rows: var(--wbi-ha-stack) auto auto;
  --wbi-ha-panel-row: var(--wbi-ha-stack) 2;
  --wbi-ha-shut: var(--wbi-ha-stack) 0fr;
  --wbi-ha-panel-w: var(--wbi-ha-stack) auto;
  --wbi-ha-closed-dir: var(--wbi-ha-stack) row;
  --wbi-ha-closed-align: var(--wbi-ha-stack) last baseline;
  --wbi-ha-closed-gap: var(--wbi-ha-stack) 0px;
  --wbi-ha-closed-pad: var(--wbi-ha-stack) var(--wbi-ha-row-pad-top, 33px) var(--wbi-ha-row-pad-right, 20px) var(--wbi-ha-row-pad-bottom, 8px) var(--wbi-ha-row-pad-left, 20px);
  --wbi-ha-closed-num-w: var(--wbi-ha-stack) var(--wbi-ha-row-num-w);
  --wbi-ha-closed-num-shift: var(--wbi-ha-stack) 0px;
  --wbi-ha-label-wm: var(--wbi-ha-stack) horizontal-tb;
  --wbi-ha-label-size: var(--wbi-ha-stack) auto;
  --wbi-ha-label-max: var(--wbi-ha-stack) none;
  --wbi-ha-line-inset: var(--wbi-ha-stack) auto 0 0 0;
  --wbi-ha-line-iw: var(--wbi-ha-stack) auto;
  --wbi-ha-line-bs: var(--wbi-ha-stack) var(--wbi-ha-line-w);
  /* Up to the screen edge, never past it: a bleed wider than the real side
     padding would add a horizontal scrollbar. A bleed of 0 from the builder
     arrives unitless and makes this invalid, which also means no bleed. */
  --wbi-ha-list-bleed: var(--wbi-ha-stack) calc(-1 * min(var(--wbi-ha-bleed), (100vw - 100%) / 2));

  /* Fades, derived from the duration (150, 400 and 270ms at 600ms). */
  --wbi-ha-fade-out: calc(var(--wbi-ha-duration) * 0.25);
  --wbi-ha-fade-in: calc(var(--wbi-ha-duration) * 0.667);
  --wbi-ha-fade-delay: calc(var(--wbi-ha-duration) * 0.45);

  /* Its own container: 100cqi below is the width of the steps, not of the
     whole element (the intro may sit beside them). */
  container-type: inline-size;
  container-name: wbiva-list;
  display: flex;
  flex-direction: var(--wbi-ha-flow, row);
  align-items: stretch;
  min-width: 0;
  margin-inline: var(--wbi-ha-list-bleed, 0px);
}

/* ==========================================================================
   Step
   Each step holds both faces: the closed one (number and title, for the
   narrow column or the row) and the open card. Side by side they share one
   grid cell, so a step is as tall as its tallest face whatever its state;
   stacked they sit on two rows and each folds its own height (a grid row
   going from 1fr to 0fr).
   ========================================================================== */

.wbi-horizontal-accordion__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Side by side both faces share one cell. */
  grid-template-rows: var(--wbi-ha-item-rows, minmax(0, 1fr));
  flex: var(--wbi-ha-closed-flex, 0 0 var(--wbi-ha-col-w));
  min-width: 0;
  /* Stacked, the script puts the step that opens this far from the top of
     the window. Raise it under a sticky header. */
  scroll-margin-top: 16px;
  overflow: hidden;
  /* Side by side the gap sits on the side away from the open card, so every
     collapsed step keeps the same width. */
  padding-inline: var(--wbi-ha-gap-start, 0px) var(--wbi-ha-gap-end, 0px);
  border: var(--wbi-ha-card-border-w) solid transparent;
  /* No radius while closed: it would clip the ends of the divider. */
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  transition:
    flex var(--wbi-ha-duration) var(--wbi-ha-ease),
    padding var(--wbi-ha-duration) var(--wbi-ha-ease),
    border-radius var(--wbi-ha-fade-in) ease,
    background-color var(--wbi-ha-fade-in) ease,
    border-color var(--wbi-ha-fade-in) ease,
    box-shadow var(--wbi-ha-fade-in) ease;
}

.wbi-horizontal-accordion__item.is-open ~ .wbi-horizontal-accordion__item {
  --wbi-ha-gap-start: var(--wbi-ha-gap-x, var(--wbi-ha-gap));
}

.wbi-horizontal-accordion__item:has(~ .wbi-horizontal-accordion__item.is-open) {
  --wbi-ha-gap-end: var(--wbi-ha-gap-x, var(--wbi-ha-gap));
}

.wbi-horizontal-accordion__item.is-open {
  flex: var(--wbi-ha-open-flex, 1 1 0%);
  border-color: var(--wbi-ha-card-border);
  border-radius: var(--wbi-ha-card-radius);
  background-color: var(--wbi-ha-card-bg);
  /* The "Shadow" control writes box-shadow here with an id selector. */
  box-shadow: var(--wbi-ha-card-shadow);
}

/* --- Trigger: the whole step is the button ------------------------------
   The heading covers the step and its button stretches over it with a
   visually hidden name (number and title); both faces are decorative. */

.wbi-horizontal-accordion__header {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0;
  padding: 0;
  font: inherit;
  /* The open card's content (links included) must stay clickable. */
  pointer-events: none;
}

.wbi-horizontal-accordion__trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Two classes: themes often style `button:hover` (0,1,1). */
.wbi-horizontal-accordion__trigger.wbi-horizontal-accordion__trigger {
  background: none;
  box-shadow: none;
}

.wbi-horizontal-accordion__item.is-open .wbi-horizontal-accordion__trigger {
  cursor: default;
  pointer-events: none;
}

.wbi-horizontal-accordion__trigger:focus {
  outline: none;
}

/* Inset: the step clips anything drawn outside it. */
.wbi-horizontal-accordion__trigger:focus-visible {
  outline: 2px solid var(--wbi-ha-focus);
  outline-offset: -2px;
}

.wbi-horizontal-accordion__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The name matches the face on screen: the closed title, or the open one. */
.wbi-horizontal-accordion__item.is-open .wbi-horizontal-accordion__sr--closed,
.wbi-horizontal-accordion__item:not(.is-open) .wbi-horizontal-accordion__sr--open {
  display: none;
}

/* --- Number -------------------------------------------------------------
   The HTML text (hidden) gives the box its exact size and baseline; the SVG
   copy on top draws the outline, which CSS cannot paint with a gradient.
   With a 0.8 line height the baseline sits at 0.75em from the top. The open
   card's copy gets the gradient stroke from an inline style (see the render). */

.wbi-horizontal-accordion__num {
  position: relative;
  display: block;
  flex: none;
  min-width: var(--wbi-ha-closed-num-w, auto);
  font-family: inherit;
  font-size: 4.375em;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0;
  color: var(--wbi-ha-num-color);
  white-space: nowrap;
  user-select: none;
}

.wbi-horizontal-accordion__num-text {
  visibility: hidden;
}

.wbi-horizontal-accordion__num-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wbi-horizontal-accordion__num-svg text {
  font: inherit;
  letter-spacing: inherit;
  fill: var(--wbi-ha-num-fill);
  stroke: currentColor;
  stroke-width: var(--wbi-ha-num-stroke-w);
}

.wbi-horizontal-accordion__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.wbi-horizontal-accordion__stop--from {
  stop-color: var(--wbi-ha-num-from);
}

.wbi-horizontal-accordion__stop--to {
  stop-color: var(--wbi-ha-num-to);
}

/* --- Faces --------------------------------------------------------------
   Each face is a one-row grid over a clip: 1fr shows it, 0fr folds it. Two
   rows in one grid would not work: the hidden face's content would size the
   visible one. Side by side the hidden face never folds (--wbi-ha-shut falls
   back to 1fr): it keeps its height and only fades, so every step is as tall
   as its open content and the row does not jump between steps. */

.wbi-horizontal-accordion__closed,
.wbi-horizontal-accordion__panel {
  display: grid;
  grid-column: 1;
  min-width: 0;
}

.wbi-horizontal-accordion__closed-clip,
.wbi-horizontal-accordion__panel-clip {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Closed face */

.wbi-horizontal-accordion__closed {
  grid-row: 1;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--wbi-ha-duration) var(--wbi-ha-ease),
    opacity var(--wbi-ha-fade-in) ease var(--wbi-ha-fade-delay),
    visibility 0s linear var(--wbi-ha-fade-delay);
}

.wbi-horizontal-accordion__item.is-open .wbi-horizontal-accordion__closed {
  grid-template-rows: var(--wbi-ha-shut, 1fr);
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--wbi-ha-duration) var(--wbi-ha-ease),
    opacity var(--wbi-ha-fade-out) ease,
    visibility 0s linear var(--wbi-ha-fade-out);
}

/* Divider: on the left side by side, at the bottom when stacked. */
.wbi-horizontal-accordion__closed-clip::before {
  content: "";
  position: absolute;
  inset: var(--wbi-ha-line-inset, 0 auto 0 0);
  inline-size: var(--wbi-ha-line-iw, var(--wbi-ha-line-w));
  block-size: var(--wbi-ha-line-bs, auto);
  background-color: var(--wbi-ha-line-color);
}

.wbi-horizontal-accordion__closed-body {
  display: flex;
  flex-direction: var(--wbi-ha-closed-dir, column);
  align-items: var(--wbi-ha-closed-align, flex-start);
  gap: var(--wbi-ha-closed-gap, var(--wbi-ha-label-gap));
  padding: var(--wbi-ha-closed-pad, var(--wbi-ha-col-pad-top) 0px 0px var(--wbi-ha-col-pad-x));
}

.wbi-horizontal-accordion__closed .wbi-horizontal-accordion__num {
  margin-inline-start: var(--wbi-ha-closed-num-shift, var(--wbi-ha-col-num-shift));
}

/* Side by side the vertical title takes its whole max length instead of
   shrinking to its text. Safari (WebKit 26) measures a vertical title with
   the fallback font, before the web font loads, and keeps that size: the
   wider web font then wrapped every title onto two lines. With a fixed length
   the lines break with whichever font is there. The column reserves the
   length, so number + gap + length should stay under the card's height. */
.wbi-horizontal-accordion__label {
  display: block;
  min-width: 0;
  inline-size: var(--wbi-ha-label-size, var(--wbi-ha-label-len));
  max-inline-size: var(--wbi-ha-label-max, var(--wbi-ha-label-len));
  writing-mode: var(--wbi-ha-label-wm, vertical-rl);
  font-family: inherit;
  font-size: 1.71875em;
  font-weight: 700;
  line-height: 1.1636;
  letter-spacing: 0;
  color: var(--wbi-ha-label-color);
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

@media (hover: hover) {
  .wbi-horizontal-accordion__item:not(.is-open):hover .wbi-horizontal-accordion__label {
    color: var(--wbi-ha-label-hover);
  }
}

/* Open face */

.wbi-horizontal-accordion__panel {
  grid-row: var(--wbi-ha-panel-row, 1);
  grid-template-rows: var(--wbi-ha-shut, 1fr);
  /* Side by side the card's content keeps its final width while the card
     grows or shrinks, so its text never rewraps mid-animation. */
  width: var(--wbi-ha-panel-w, calc(100cqi - (var(--wbi-ha-count, 4) - 1) * var(--wbi-ha-col-w)));
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--wbi-ha-duration) var(--wbi-ha-ease),
    opacity var(--wbi-ha-fade-out) ease,
    visibility 0s linear var(--wbi-ha-fade-out);
}

.wbi-horizontal-accordion__item.is-open .wbi-horizontal-accordion__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--wbi-ha-duration) var(--wbi-ha-ease),
    opacity var(--wbi-ha-fade-in) ease calc(var(--wbi-ha-duration) * 0.35),
    visibility 0s linear 0s;
}

.wbi-horizontal-accordion__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--wbi-ha-min-h);
  padding:
    var(--wbi-ha-card-pad-top, 42px)
    var(--wbi-ha-card-pad-right, 40px)
    var(--wbi-ha-card-pad-bottom, 40px)
    var(--wbi-ha-card-pad-left, 38px);
}

.wbi-horizontal-accordion__card .wbi-horizontal-accordion__num {
  margin-inline-start: var(--wbi-ha-num-shift);
  margin-bottom: var(--wbi-ha-num-gap);
}

.wbi-horizontal-accordion__title {
  display: block;
  max-width: var(--wbi-ha-title-w);
  margin: 0;
  font-family: inherit;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3333;
  letter-spacing: 0;
  color: var(--wbi-ha-title-color);
}

.wbi-horizontal-accordion__desc {
  max-width: var(--wbi-ha-desc-w);
  margin-top: var(--wbi-ha-title-gap);
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wbi-ha-desc-color);
}

/* No title: the number's own gap separates it from the description. */
.wbi-horizontal-accordion__num + .wbi-horizontal-accordion__desc {
  margin-top: 0;
}

.wbi-horizontal-accordion__desc > * {
  margin-top: 0;
  margin-bottom: 1em;
}

.wbi-horizontal-accordion__desc > :last-child {
  margin-bottom: 0;
}

.wbi-horizontal-accordion__desc a {
  color: var(--wbi-ha-link-color);
}

/* ==========================================================================
   Container widths: the design's tablet and phone artboards
   ========================================================================== */

/* Intro on top, smaller headings. */
@container wbiva (max-width: 1199px) {
  .wbi-horizontal-accordion__layout {
    --wbi-ha-layout-cols: minmax(0, 1fr);
  }

  .wbi-horizontal-accordion__heading {
    font-size: 1.75em;
    line-height: 1.2;
  }

  .wbi-horizontal-accordion__heading + .wbi-horizontal-accordion__text {
    margin-top: var(--wbi-ha-heading-gap, 15px);
  }

  /* The design tightens the intro text on tablet and phone. */
  .wbi-horizontal-accordion__text {
    letter-spacing: -0.044em;
  }

  .wbi-horizontal-accordion__title {
    font-size: 1.25em;
    line-height: 1.2;
  }
}

/* Stacked steps. */
@container wbiva (max-width: 639px) {
  .wbi-horizontal-accordion__list {
    --wbi-ha-stack: ;
  }

  .wbi-horizontal-accordion__title {
    font-size: 1.125em;
  }

  .wbi-horizontal-accordion__desc {
    line-height: 1.25;
  }

  .wbi-horizontal-accordion__card {
    padding:
      var(--wbi-ha-card-pad-top, 12px)
      var(--wbi-ha-card-pad-right, 44px)
      var(--wbi-ha-card-pad-bottom, 36px)
      var(--wbi-ha-card-pad-left, 36px);
  }
}

/* Phones: the stacked cards and dividers reach the screen edges, as in the
   design. The "Stacked · side bleed" control overrides it per breakpoint. */
@media (max-width: 767px) {
  :where(.wbi-horizontal-accordion) {
    --wbi-ha-bleed: 20px;
  }
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* Stacked, the script switches the steps at once (no folding, which made the
   page roll past the steps) and the card that opens fades in. `!important`:
   the open and closed faces set their transitions with longer selectors. */
.wbi-horizontal-accordion__list.is-switching,
.wbi-horizontal-accordion__list.is-switching * {
  transition: none !important;
}

@keyframes wbi-ha-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.wbi-horizontal-accordion__item.is-entering .wbi-horizontal-accordion__card {
  animation: wbi-ha-enter calc(var(--wbi-ha-duration) * 0.55) cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* Every timing derives from --wbi-ha-duration. Declared on the list, a
   descendant, the zero wins over any duration set on the root. A duration of
   0 set in the builder arrives unitless, which invalidates the transitions:
   also no animation. */
.wbi-horizontal-accordion--static .wbi-horizontal-accordion__list {
  --wbi-ha-duration: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .wbi-horizontal-accordion__list {
    --wbi-ha-duration: 0ms;
  }
}