/* Page framework: page shell */
.pf-page {
  min-height: 100%;
}

.pf-sections-list {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .pf-sections-list {
    overflow-x: clip;
  }
}

/* Page framework: default section shell */
.pf-section {
  width: 100%;
  padding-block: var(--pf-section-y, clamp(24px, 4vw, 48px));
  background: var(--pf-section-light-bg, var(--pair-light-bg));
  color: var(--pf-section-light-color, var(--pair-light-fg));
}

/* Page framework: fixed vertical section band spacing */
.pf-section--band-10 {
  --pf-section-y: 10px;
}

.pf-section--band-20 {
  --pf-section-y: 20px;
}

/* Page framework: automatic alternating section tone */
.pf-page > :where(.pf-section:nth-child(even)) {
  background: var(--pf-section-dark-bg, var(--pair-dark-bg));
  color: var(--pf-section-dark-color, var(--pair-dark-fg));
}

/* Page framework: explicit light section tone */
.pf-section--light {
  background: var(--pf-section-light-bg, var(--pair-light-bg));
  color: var(--pf-section-light-color, var(--pair-light-fg));
}

/* Page framework: explicit dark section tone */
.pf-section--dark {
  background: var(--pf-section-dark-bg, var(--pair-dark-bg));
  color: var(--pf-section-dark-color, var(--pair-dark-fg));
}

/* Page framework: section width wrapper */
.pf-section__inner {
  width: min(calc(100% - var(--page-gutter)), var(--max));
  margin-inline: auto;
}

/* Page framework: section title area */
.pf-section__header {
  width: 100%;
  margin-block-end: var(--pf-section-header-gap, clamp(20px, 4vw, 36px));
}

/* Page framework: section content area */
.pf-section__body {
  width: 100%;
}

/* Page framework: mobile accordion header button */
.pf-section__toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
}

/* Page framework: accordion header title and chevron row */
.pf-section__toggle .pf-section__header > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pf-section-header-gap, clamp(20px, 4vw, 36px));
}

/* Page framework: allow section titles to use full available width */
.pf-section__toggle .pf-section__header > div > :first-child {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.pf-section__header .section-title,
.pf-section__header .section-subtitle {
  max-width: none;
}

/* Page framework: remove empty header gap when mobile accordion is closed */
.pf-section__toggle[aria-expanded="false"] .pf-section__header {
  margin-block-end: 0;
}

/* Page framework: base section layout, single column until desktop */
.pf-section__layout {
  --pf-section-layout-gap: var(--pf-section-gap, clamp(24px, 4vw, 56px));

  display: grid;
  width: 100%;
  gap: var(--pf-section-layout-gap);
}

/* Reusable layout: card and column containers */
.column-grid,
.card-stack,
.cardify-p,
.cardify-li,
.cardify-a {
  width: 100%;
  gap: var(--column-grid-gap, clamp(16px, 3vw, 28px));
}

/* Reusable layout: responsive auto-fit columns */
.column-grid,
.cardify-p,
.cardify-li,
.cardify-a {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--column-grid-min, 240px)), 1fr));
}

.column-grid--top {
  align-items: start;
}

/* Reusable layout: vertical separators between grid columns */
.column-grid--dividers {
  --column-grid-divider-color: color-mix(in srgb, currentColor 18%, transparent);
}

.column-grid--dividers > * {
  position: relative;
}

.column-grid--dividers-full {
  position: relative;
}

/* Reusable layout: vertical card stack */
.card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.card-stack--compact {
  --column-grid-gap: 10px;
}

/* Reusable layout: section-level vertical flow */
.section-flow {
  display: grid;
  gap: var(--section-flow-gap, var(--pf-section-gap, clamp(24px, 4vw, 56px)));
}

/* Reusable layout: content-level vertical flow */
.content-flow {
  display: grid;
  align-content: start;
  gap: var(--content-flow-gap, 16px);
}

.content-flow--center {
  justify-items: center;
  text-align: center;
}

.content-flow--center > :where(p, .section-subtitle, .site-subtitle, .page-hero__lead) {
  margin-inline: auto;
}

/* Reusable layout: protect direct children from overflow */
.column-grid > *,
.card-stack > *,
.section-flow > *,
.content-flow > *,
.cardify-p > p,
.cardify-li > li,
.cardify-a > a {
  min-width: 0;
}

/* Reusable layout: content flow owns vertical rhythm */
.content-flow > :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
}

/* Reusable layout: remove default spacing from cardified children */
.cardify-p > p,
.cardify-li > li,
.cardify-a > a {
  margin: 0;
}

/* Reusable layout: list cardifier reset */
.cardify-li {
  padding-left: 0;
  list-style: none;
}

/* Page framework: media wrapper */
.pf-section__media {
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Page framework: media fills its wrapper */
.pf-section__media > :where(img, picture, video) {
  width: 100%;
  max-width: none;
}

/* Page framework: image and video width reset */
.pf-section__media :where(img, video) {
  width: 100%;
}

/* Page framework: text/content column */
.pf-section__content {
  min-width: 0;
}

/* Page framework: vertically center a content block inside its grid cell */
.pf-section__content--middle {
  align-self: center;
}

/* Page framework: reusable vertical breathing room for content columns */
.pf-section__content--pad-block {
  padding-block: var(--pf-content-pad-block, clamp(28px, 4vw, 56px));
}

/* Page framework: full-width item inside a section layout grid */
.pf-section__full {
  grid-column: 1 / -1;
}

/* Page framework: hide empty media wrappers */
.pf-section:has(.pf-section__media:not(:has(img, picture, video))) .pf-section__media {
  display: none;
}

/* Section type: split media/content, top aligned outside hero */
.pf-section--split:not(.page-hero) .pf-section__layout {
  align-items: start;
}

/* Section modifier: split layout with media bleeding to the viewport edge */
.pf-section--split-bleed-media {
  --pf-section-y: 0;
  --pf-section-layout-gap: 0;
  --pf-split-content-padding-inline: var(--page-content-inset);
}

.pf-section--split-bleed-media > .pf-section__inner {
  width: 100%;
  max-width: none;
}

.pf-section--split-bleed-media .pf-section__content {
  padding-inline: var(--pf-split-content-padding-inline);
}

/* Section type: feature-left media/content, top aligned outside hero */
.pf-section--feature-left:not(.page-hero) .pf-section__layout {
  align-items: start;
}

/* Section type: feature-right media/content, top aligned outside hero */
.pf-section--feature-right:not(.page-hero) .pf-section__layout {
  align-items: start;
}

/* Section type: feature-left media wrapper alignment */
.pf-section--feature-left .pf-section__media {
  align-self: start;
}

/* Section type: feature-right media wrapper alignment */
.pf-section--feature-right .pf-section__media {
  align-self: start;
}

/* Section type: media card grids stretch cards to shared row height */
.pf-section--media-card-grid .pf-section__layout,
.pf-section--media-1-card-grid .pf-section__layout,
.pf-section--media-2-card-grid .pf-section__layout {
  --pf-section-layout-gap: var(--pf-media-card-grid-gap, var(--column-grid-gap, clamp(16px, 3vw, 28px)));

  align-items: stretch;
  gap: var(--pf-section-layout-gap);
}

/* Section type: media card grids stack cards cleanly before desktop */
.pf-section--media-card-grid .pf-section__content,
.pf-section--media-1-card-grid .pf-section__content,
.pf-section--media-2-card-grid .pf-section__content {
  display: grid;
  gap: var(--pf-media-card-grid-gap, var(--column-grid-gap, clamp(16px, 3vw, 28px)));
}

/* Section type: card grid items fill their stretched grid cells */
.pf-section--media-card-grid .pf-section__content > :where(.card, a),
.pf-section--media-1-card-grid .pf-section__content > :where(.card, a),
.pf-section--media-2-card-grid .pf-section__content > :where(.card, a),
.pf-section--floating-card-grid .pf-section__content > :where(.card, a) {
  height: 100%;
}

/* Section type: floating card grid, JS can equalize by natural card text height */
.pf-section--floating-card-grid .pf-section__content > :where(.card, a) {
  min-height: var(--pf-floating-card-equal-height, var(--pf-floating-card-min-height));
}

/* Section type: floating card grid, media spans left while cards fill open slots */
.pf-section--floating-card-grid {
  --pf-floating-card-grid-gap: var(--column-grid-gap, clamp(16px, 3vw, 28px));
  --pf-floating-card-min-height: 88px;
  --pf-floating-media-tablet-rows: 2;
  --pf-floating-media-desktop-rows: 3;
}

/* Section modifier: floating card grid media spans two rows */
.pf-section--floating-media-rows-2 {
  --pf-floating-media-tablet-rows: 2;
  --pf-floating-media-desktop-rows: 2;
}

/* Section type: floating card grid, shared spacing before layout switches */
.pf-section--floating-card-grid .pf-section__layout {
  --pf-section-layout-gap: var(--pf-floating-card-grid-gap);

  align-items: start;
  gap: var(--pf-section-layout-gap);
}

/* Section type: floating card grid, cards stack normally on mobile */
.pf-section--floating-card-grid .pf-section__content {
  display: grid;
  gap: var(--pf-floating-card-grid-gap);
}

/* Section type: floating card grid, actions stay below the dense grid */
.pf-section--floating-card-grid .pf-section__layout > .btn-group {
  grid-column: 1 / -1;
}

/* Section type: background split shell */
.pf-section--background-split {
  position: relative;
  overflow: hidden;
}

/* Section type: background split keeps foreground above media */
.pf-section--background-split .pf-section__inner {
  position: relative;
  z-index: 1;
}

/* Section type: background split media layer */
.pf-section--background-split .pf-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Section type: background split media frame */
.pf-section--background-split .pf-section__media :where(picture, img, video) {
  height: 100%;
}

/* Section type: background split media cover */
.pf-section--background-split .pf-section__media :where(img, video) {
  object-fit: cover;
}

/* Section type: background split foreground layout */
.pf-section--background-split .pf-section__layout {
  align-items: center;
  min-height: var(--pf-background-split-height, clamp(320px, 44vw, 560px));
}

/* Section type: background split child overflow guard */
.pf-section--background-split .pf-section__layout > * {
  min-width: 0;
}

/* Responsive layout: column grids become fixed columns on tablet and wider */
@media (min-width: 768px) {
  /* Responsive layout: two equal columns */
  .column-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Responsive layout: wider leading column with narrower supporting column */
  .column-grid--60-40 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  /* Responsive layout: three equal columns */
  .column-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Responsive layout: four equal columns */
  .column-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Responsive layout: draw dividers in the space between fixed columns */
  .column-grid--dividers > * + *::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--column-grid-gap, clamp(16px, 3vw, 28px)) / -2);
    width: 1px;
    background: var(--column-grid-divider-color);
  }

  .column-grid--2.column-grid--dividers > :nth-child(2n + 1)::before,
  .column-grid--3.column-grid--dividers > :nth-child(3n + 1)::before,
  .column-grid--4.column-grid--dividers > :nth-child(4n + 1)::before {
    content: none;
  }

  .column-grid--dividers.column-grid--dividers-full::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    width: 1px;
    background: var(--column-grid-divider-color);
  }

  .column-grid--dividers.column-grid--dividers-full > * + *::before {
    content: none;
  }

  .column-grid--60-40.column-grid--dividers-full::before {
    inset-inline-start: calc(60% - (var(--column-grid-gap, clamp(16px, 3vw, 28px)) / 10));
  }

  /* Section type: media card grid, two columns with media taking one card slot */
  .pf-section--media-card-grid .pf-section__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Section type: media card grid, media participates as a normal grid item */
  .pf-section--media-card-grid .pf-section__media {
    grid-column: span 1;
    align-self: start;
  }

  /* Section type: media card grid, cards become direct grid items */
  .pf-section--media-card-grid .pf-section__content {
    display: contents;
  }

  /* Section type: media card grid, actions span the full row below cards */
  .pf-section--media-card-grid .pf-section__layout > .btn-group {
    grid-column: 1 / -1;
  }

  /* Section type: floating card grid, image takes the left lane */
  .pf-section--floating-card-grid .pf-section__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: var(--pf-floating-card-equal-height, minmax(var(--pf-floating-card-min-height), auto));
  }

  /* Section type: floating card grid, media fills multiple grid rows */
  .pf-section--floating-card-grid .pf-section__media {
    grid-column: span 1;
    grid-row: span var(--pf-floating-media-tablet-rows);
    align-self: start;
    min-height: 0;
    height: var(--pf-floating-media-height, auto);
  }

  /* Section type: floating card grid, cards become direct dense-grid items */
  .pf-section--floating-card-grid .pf-section__content {
    display: contents;
  }

  /* Section type: floating card grid, media fills its spanned rows */
  .pf-section--floating-card-grid .pf-section__media :where(picture, img, video) {
    height: 100%;
  }

  /* Section type: floating card grid, crop media cleanly inside row span */
  .pf-section--floating-card-grid .pf-section__media :where(img, video) {
    object-fit: cover;
  }
}

/* Desktop section structures: match JS accordion desktop breakpoint */
@media (min-width: 1024px) {
  /* Section type: 50/50 media and content */
  .pf-section--split .pf-section__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

    /* Section type: left media column with content beside it */
    .pf-section--feature-left .pf-section__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Section type: right media column with content beside it */
    .pf-section--feature-right .pf-section__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pf-section--feature-right .pf-section__media {
      order: 2;
    }

    .pf-section--feature-right .pf-section__content {
      order: 1;
    }

    .pf-section--feature-right .pf-section__full {
      order: 3;
    }

    /* Section modifier: left media at 40%, content at 60% */
    .pf-section--feature-left.pf-section--feature-media-40 .pf-section__layout {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

    /* Section modifier: content at 60%, right media at 40% */
    .pf-section--feature-right.pf-section--feature-media-40 .pf-section__layout {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    /* Section modifier: left media at 60%, content at 40% */
    .pf-section--feature-left.pf-section--feature-media-60 .pf-section__layout {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    /* Section modifier: content at 40%, right media at 60% */
    .pf-section--feature-right.pf-section--feature-media-60 .pf-section__layout {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

  /* Section type: media card grid, three columns with media taking one card slot */
  .pf-section--media-card-grid .pf-section__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Section type: floating card grid, four slots with media taking the left half */
  .pf-section--floating-card-grid .pf-section__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Section type: floating card grid, media spans left half and several rows */
  .pf-section--floating-card-grid .pf-section__media {
    grid-column: span 2;
    grid-row: span var(--pf-floating-media-desktop-rows);
  }

  /* Section type: 1/4 media card grid, media takes one of four card slots */
  .pf-section--media-1-card-grid .pf-section__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Section type: 1/4 media card grid, media sits beside three cards */
  .pf-section--media-1-card-grid .pf-section__media {
    grid-column: span 1;
    align-self: start;
    margin: 0;
  }

  /* Section type: 1/4 media card grid, cards become direct grid items */
  .pf-section--media-1-card-grid .pf-section__content {
    display: contents;
  }

  /* Section type: 1/4 media card grid, actions span the full row below cards */
  .pf-section--media-1-card-grid .pf-section__layout > .btn-group {
    grid-column: 1 / -1;
  }

  /* Section type modifier: one media item plus four cards in a single desktop row */
  .pf-section--media-1-card-grid.pf-section--media-5-up .pf-section__layout {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Section type: 2/3 media card grid, media takes two of three card slots */
  .pf-section--media-2-card-grid .pf-section__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Section type: 2/3 media card grid, media sits beside the first card */
  .pf-section--media-2-card-grid .pf-section__media {
    grid-column: span 2;
    align-self: start;
    margin: 0;
  }

  /* Section type: 2/3 media card grid, cards become direct grid items */
  .pf-section--media-2-card-grid .pf-section__content {
    display: contents;
  }

  /* Section type: 2/3 media card grid, actions span the full row below cards */
  .pf-section--media-2-card-grid .pf-section__layout > .btn-group {
    grid-column: 1 / -1;
  }

  /* Section type: banner background with two foreground columns */
  .pf-section--background-split .pf-section__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Wide desktop section structures: media card grid uses four card columns */
@media (min-width: 1200px) {
  /* Section type: media card grid, four columns with media taking two card slots */
  .pf-section--media-card-grid .pf-section__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Section type: media card grid, media takes half of a four-column row */
  .pf-section--media-card-grid .pf-section__media {
    grid-column: span 2;
  }
}

/* Extra-wide desktop section structures: media card grid uses five card columns */
@media (min-width: 1440px) {
  /* Section type: media card grid, five columns with media taking two card slots */
  .pf-section--media-card-grid .pf-section__layout {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Override: reduce media width without changing media proportions */
.pf-section--media-narrow:not(.pf-section--background-split) .pf-section__media,
.pf-section:not(.pf-section--background-split) .pf-section__media--narrow {
  width: min(100%, var(--pf-media-width, 920px));
  margin-inline: auto;
}

/* Override: place media inside a chosen aspect-ratio frame */
.pf-section--media-ratio:not(.pf-section--background-split) .pf-section__media,
.pf-section:not(.pf-section--background-split) .pf-section__media--ratio {
  aspect-ratio: var(--pf-media-ratio, 16 / 9);
}

.pf-section--media-ratio:not(.pf-section--background-split) .pf-section__media :where(picture, img, video),
.pf-section:not(.pf-section--background-split) .pf-section__media--ratio :where(picture, img, video) {
  height: 100%;
}

.pf-section--media-ratio:not(.pf-section--background-split) .pf-section__media :where(img, video),
.pf-section:not(.pf-section--background-split) .pf-section__media--ratio :where(img, video) {
  object-fit: var(--pf-media-fit, cover);
}

/* Override: change the background banner frame ratio */
.pf-section--background-split.pf-section--media-ratio .pf-section__layout {
  min-height: 0;
  aspect-ratio: var(--pf-media-ratio, 16 / 9);
}

/* Override: preserve full media inside an aspect-ratio frame */
.pf-section--media-contain,
.pf-section__media--contain {
  --pf-media-fit: contain;
}

/* Reusable override: stretch a media card beside a taller sibling card */
@media (min-width: 1024px) {
  .pf-section--split.pf-section--sync-card-media .pf-section__layout,
  .pf-section--sync-card-media .pf-section__layout {
    align-items: stretch;
  }

  .pf-section--sync-card-media .pf-section__content {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    min-height: 0;
  }

  .pf-section--sync-card-media .pf-section__content > .card:has(.card__media) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }

  .pf-section--sync-card-media .pf-section__content > .card:has(.card__media) > .card__media {
    flex: 1 1 0;
    min-height: 120px;
  }

  .pf-section--sync-card-media .pf-section__content > .card:has(.card__media) > .card__media :where(img, picture, video),
  .pf-section--sync-card-media .pf-section__content > .card:has(.card__media) > .card__media > picture > img {
    height: 100%;
  }

  .pf-section--sync-card-media .pf-section__content > .card:has(.card__media) > .card__media :where(img, video),
  .pf-section--sync-card-media .pf-section__content > .card:has(.card__media) > .card__media > picture > img {
    object-fit: var(--pf-media-fit, cover);
  }
}

/* Override: stretch split/feature media to the full row height on desktop */
@media (min-width: 1024px) {
  .pf-section--split-media-fill .pf-section__layout,
  .pf-section--feature-media-fill .pf-section__layout,
  .pf-section--feature-media-fill.pf-section--feature-left:not(.page-hero) .pf-section__layout,
  .pf-section--feature-media-fill.pf-section--feature-right:not(.page-hero) .pf-section__layout {
    align-items: stretch;
  }

  .pf-section--split-media-fill .pf-section__media,
  .pf-section--feature-media-fill .pf-section__media,
  .pf-section--feature-media-fill.pf-section--media-ratio:not(.pf-section--background-split) .pf-section__media {
    align-self: stretch;
    aspect-ratio: auto;
  }

  .pf-section--feature-media-fill .pf-section__content {
    align-self: center;
  }

  .pf-section--split-media-fill .pf-section__media > :where(img, picture, video) {
    height: 100%;
  }

  .pf-section--split-media-fill .pf-section__media :where(img, video) {
    object-fit: var(--pf-media-fit, cover);
  }

  .pf-section--feature-media-fill .pf-section__media {
    position: relative;
    min-height: 0;
  }

  .pf-section--feature-media-fill .pf-section__media > :where(img, picture, video) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .pf-section--feature-media-fill .pf-section__media > picture > img {
    width: 100%;
    height: 100%;
  }

  .pf-section--feature-media-fill .pf-section__media > :where(img, video),
  .pf-section--feature-media-fill .pf-section__media > picture > img {
    object-fit: var(--pf-media-fit, cover);
  }

  .pf-section--media-card-fill .pf-section__media {
    align-self: stretch;
    position: relative;
    min-height: 0;
  }

  .pf-section--media-card-fill .pf-section__media > :where(img, picture, video) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .pf-section--media-card-fill .pf-section__media > picture > img {
    width: 100%;
    height: 100%;
  }

  .pf-section--media-card-fill .pf-section__media > :where(img, video),
  .pf-section--media-card-fill .pf-section__media > picture > img {
    object-fit: var(--pf-media-fit, cover);
  }
}

.pf-section:not(.pf-section--background-split):not(:has(.pf-section__media)) .pf-section__layout,
.pf-section:not(.pf-section--background-split):has(.pf-section__media:not(:has(img, picture, video))) .pf-section__layout {
  grid-template-columns: minmax(0, 1fr);
}

/* Page framework: accordion and FAQ chevron base */
.pf-section__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  color: var(--color-icon-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-icon);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-none);
  transform-origin: center;
  transition: transform 0.22s ease, color 0.15s ease;
}

.pf-section__chevron--toggle {
  margin-top: 0.2rem;
}

.pf-section__chevron--faq {
  width: 1em;
  height: 1em;
  font-size: var(--font-size-icon-sm);
}

.pf-section--dark .pf-section__chevron {
  color: var(--color-white-68);
}

.pf-section__toggle[aria-expanded="true"] .pf-section__chevron--toggle,
.pf-section__faq-question[aria-expanded="true"] .pf-section__chevron--faq {
  transform: rotate(180deg);
}

/* Mobile section accordion: below desktop breakpoint */
@media (max-width: 1023px) {
  .pf-page .pf-section {
    padding-block-end: var(--pf-mobile-section-padding-bottom, 50px);
  }

  .pf-page .page-banner {
    padding-block-end: 0;
  }

  /* Mobile section accordion: tappable section header */
  .pf-page .pf-section__toggle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobile section accordion: keep toggle control from shifting centered text */
  .pf-page [data-collapsible] .pf-section__toggle .pf-section__header > div {
    position: relative;
    justify-content: center;
  }

  /* Mobile section accordion: center header text without moving the toggle control */
  .pf-page [data-collapsible] .pf-section__toggle .pf-section__header > div > :first-child {
    text-align: center;
  }

  /* Mobile section accordion: tighter collapsed section spacing */
  .pf-page [data-collapsible]:has(.pf-section__toggle[aria-expanded="false"]) {
    --pf-section-y: var(--pf-mobile-collapsed-section-y, 6px);
    --pf-mobile-preview-gap: 8px;
  }

  /* Mobile section accordion: animated body wrapper */
  .pf-page [data-collapsible] > .pf-section__collapse,
  .pf-page [data-collapsible] > .pf-section__inner > .pf-section__collapse {
    overflow: hidden;
  }

  /* Mobile section accordion: opened body wrapper */
  .pf-page [data-collapsible] > .pf-section__collapse.is-open,
  .pf-page [data-collapsible] > .pf-section__inner > .pf-section__collapse.is-open {
    overflow: visible;
  }

  /* Mobile section accordion: collapsed banner preview */
  .pf-page .pf-section--has-mobile-preview .pf-section__toggle[aria-expanded="false"] > :first-child::after {
    content: "";
    display: block;
    width: 100vw;
    aspect-ratio: var(--pf-mobile-preview-ratio, 16 / 9);
    margin-inline: calc(50% - 50vw);
    margin-block-start: var(--pf-mobile-preview-gap, 16px);
    background-color: var(--pf-section-media-bg, var(--pair-light-media-bg));
    background-image: var(--pf-mobile-preview-image);
    background-position: var(--pf-mobile-preview-position, center);
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* Mobile section accordion: toggle chevron control */
  .pf-page .pf-section__chevron--toggle {
    --pf-toggle-border: var(--pair-light-border);
    --pf-toggle-bg: color-mix(in srgb, var(--pair-light-hover-bg) 55%, transparent);
    --pf-toggle-fg: var(--color-icon-muted);
    --pf-toggle-hover-border: var(--pair-light-focus);
    --pf-toggle-hover-bg: color-mix(in srgb, var(--pair-light-hover-bg) 78%, transparent);
    --pf-toggle-hover-fg: var(--pair-light-hover-fg);

    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    margin-top: 0;
    padding: 6px;
    border: 1px solid var(--pf-toggle-border);
    border-radius: 999px;
    background: var(--pf-toggle-bg);
    color: var(--pf-toggle-fg);
  }

  /* Mobile section accordion: keep active open-section toggle visible */
  .pf-page [data-collapsible].is-floating-toggle-active .pf-section__chevron--toggle {
    position: fixed;
    right: var(--pf-mobile-floating-toggle-right, 16px);
    top: auto;
    bottom: var(--pf-mobile-floating-toggle-bottom, 84px);
    z-index: 50;
    box-shadow: var(--shadow-sm);
  }

  /* Mobile section accordion: toggle chevron hover and focus */
  .pf-page .pf-section__toggle:hover .pf-section__chevron--toggle,
  .pf-page .pf-section__toggle:focus-visible .pf-section__chevron--toggle {
    border-color: var(--pf-toggle-hover-border);
    background: var(--pf-toggle-hover-bg);
    color: var(--pf-toggle-hover-fg);
  }

  /* Mobile section accordion: dark toggle chevron color set */
  .pf-page > :where(.pf-section:nth-child(even):not(.pf-section--light)) .pf-section__chevron--toggle,
  .pf-page .pf-section--dark .pf-section__chevron--toggle {
    --pf-toggle-border: var(--pair-dark-border);
    --pf-toggle-bg: color-mix(in srgb, var(--pair-dark-hover-bg) 55%, transparent);
    --pf-toggle-fg: var(--pair-dark-muted);
    --pf-toggle-hover-border: var(--pair-dark-focus);
    --pf-toggle-hover-bg: color-mix(in srgb, var(--pair-dark-hover-bg) 78%, transparent);
    --pf-toggle-hover-fg: var(--pair-dark-hover-fg);
  }
}

/* Desktop section accordion reset: expanded static sections */
@media (min-width: 1024px) {
  /* Desktop section accordion reset: section header is not interactive */
  .pf-page .pf-section__toggle {
    pointer-events: none;
    cursor: default;
  }

  /* Desktop section accordion reset: hide mobile toggle chevron */
  .pf-page .pf-section__chevron--toggle {
    display: none;
  }

  /* Desktop section accordion reset: force section body open */
  .pf-page [data-collapsible] > .pf-section__collapse,
  .pf-page [data-collapsible] > .pf-section__inner > .pf-section__collapse {
    height: auto !important;
    overflow: visible;
  }

}