/* PageFly "content-tabs" (How It Works) styles, lifted from the live
   primitivelabsresearch.com theme so the section renders + animates the same.
   Template-specific suffixes stripped to keep the rules generic. */

.content-tabs__header { display: flex; flex-direction: column; align-items: center; }
.content-tabs__heading-content { margin-bottom: 2rem; text-align: center; }
.content-tabs__heading + .rte { margin-top: 1rem; }

.content-tabs__buttons { flex-wrap: wrap; gap: 0.5em; flex-shrink: 0; background: none; position: relative; z-index: 0; }
.content-tabs__buttons--outlined { --padding: .4rem; padding: var(--padding); border: solid .1rem rgb(var(--color-background)); }
.content-tabs__buttons--shadow { box-shadow: rgba(0, 0, 0, 0.15) 0px 0.3em 1em; }

.content-tab-button { font-size: inherit; padding: 0px 1.25em; line-height: 2.5em; flex-shrink: 0; color: rgb(var(--color-background)); background: none; transition: background 0.3s, color 0.3s; cursor: pointer; z-index: 1; gap: 0.25em; font-family: var(--font-body-family); }
.content-tab-button--active { color: rgb(var(--color-foreground)); }
.content-tabs__buttons--animation-opacity .content-tab-button--active { background: rgb(var(--color-background)); transition-delay: 0.1s; }
.content-tabs__buttons--animation-moving .content-tab-button { transition-duration: 0.4s; transition-delay: 0s; }
.content-tab-button img { width: 1.5em; height: 1.5em; object-fit: contain; }

.content-tab-buttom__active-bg { position: absolute; z-index: 0; width: 0px; background: rgb(var(--color-background)); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.content-tabs__tabs { position: relative; z-index: 0; overflow: hidden; transition: height 0.3s ease-in-out; margin-top: 2rem; border-radius: 0.5rem; }
.content-tab { position: absolute; top: 0px; left: 0px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out; z-index: -1; width: 100%; padding: 2rem; display: flex; flex-direction: column; align-items: center; row-gap: 3rem; }
.content-tab--active { position: relative; opacity: 1; visibility: visible; z-index: 0; transition-delay: 0.2s; }
.content-tab__media, .content-tab__content { width: 100%; }

.content-tabs .content-tabs__buttons { font-size: 1.3rem; border-radius: 0.6em; }
.content-tabs .content-tabs__buttons--outlined { border-radius: calc(0.6em + var(--padding)); }
.content-tabs .content-tab-button, .content-tabs .content-tab-buttom__active-bg { border-radius: 0.6em; }

@media screen and (min-width: 750px) {
  .content-tabs__header--horizontal { flex-flow: wrap; justify-content: space-between; }
  .content-tabs__heading-content { margin-bottom: 3rem; }
  .content-tabs__header--horizontal .content-tabs__heading-content { margin-bottom: 0px; text-align: left; }
  .content-tabs__header--horizontal .content-tabs__heading { line-height: 1.3; }
  .content-tab-buttons--desktop-expand .content-tabs__buttons { width: 100%; }
  .content-tab-buttons--desktop-expand .content-tab-button { flex-grow: 1; }
  .content-tab--2-column { display: grid; grid-template-columns: repeat(2, 1fr); place-items: center; column-gap: 3rem; }
  .content-tabs .content-tab-button, .content-tabs .content-tab-buttom__active-bg { font-size: 1.5rem; }
}

@media screen and (max-width: 749px) {
  .content-tabs__buttons--outlined { --padding: .3rem; }
  .content-tab-buttons--mobile-expand .content-tabs__buttons { width: 100%; }
  .content-tab-buttons--mobile-expand .content-tab-button { flex-grow: 1; }
  .content-tabs__tabs { margin-top: 0.5rem; }
  .content-tab { padding: 1.5rem; row-gap: 2rem; }
}