.faq-page {
  --faq-page-rail-width: 14.5rem;
  --faq-page-layout-gap: 2.75rem;
  --faq-page-hero-gap: clamp(3.75rem, 7vw, 7.5rem);
  background: var(--theme-surface-fill);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--theme-body-readable);
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  position: relative;
  padding: calc(var(--theme-surface-section-padding-block) + var(--theme-surface-text-safe-block))
    var(--section-rail-padding-inline);
  width: 100vw;
}

@supports (width: 100dvw) {
  .faq-page {
    margin-inline: calc(50% - 50dvw);
    width: 100dvw;
  }
}

.faq-page::before {
  background: var(--theme-surface-fill);
  content: "";
  inset-block: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
}

@supports (width: 100dvw) {
  .faq-page::before {
    width: 100dvw;
  }
}

.faq-page::after {
  background: color-mix(in srgb, var(--theme-card-bg-strong) 72%, transparent);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 44% 100%);
  content: "";
  height: clamp(16rem, 29vw, 25rem);
  pointer-events: none;
  position: absolute;
  right: min(-4vw, -1rem);
  top: 0;
  width: clamp(16rem, 34vw, 36rem);
  z-index: 0;
}

.faq-page__shell {
  display: grid;
  gap: var(--faq-page-hero-gap);
  position: relative;
  width: 100%;
  z-index: 1;
}

.faq-page__intro {
  display: grid;
  gap: clamp(var(--space-4), 2.5vw, var(--space-8)) clamp(var(--space-8), 6vw, var(--space-20));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  justify-items: start;
  margin: 0 auto;
  width: 100%;
}

.faq-page__eyebrow,
.faq-page__heading,
.faq-page__lead,
.faq-page__nav-title,
.faq-page__group-label,
.faq-page__question {
  margin: 0;
}

.faq-page__eyebrow {
  color: var(--theme-eyebrow-readable);
  grid-column: 1 / span 7;
  grid-row: 1;
}

.faq-page__heading {
  grid-column: 1 / span 7;
  grid-row: 2;
}

.faq-page__heading :is(h1, h2, h3, h4, h5, h6, p) {
  color: var(--theme-heading-strong) !important;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8.8vw, 8.6rem);
  font-weight: 540;
  letter-spacing: 0;
  line-height: 0.9;
  margin: 0;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}

.faq-page__heading em {
  color: var(--color-primary-accent);
  font-style: italic;
}

.faq-page__lead {
  align-self: end;
  grid-column: 8 / span 4;
  grid-row: 2;
  padding-bottom: clamp(0.35rem, 1vw, 0.8rem);
}

.faq-page__lead :is(p, ul, ol) {
  color: var(--theme-body-readable) !important;
  font-size: var(--text-body);
  line-height: 1.72;
  margin: 0;
}

.faq-page__lead :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--space-4);
}

.faq-page__layout {
  display: grid;
  gap: clamp(2.5rem, 4vw, var(--faq-page-layout-gap));
  grid-template-columns: minmax(12rem, var(--faq-page-rail-width)) minmax(0, 1fr);
  margin: 0 auto;
  width: 100%;
}

.faq-page__rail,
.faq-page__content {
  min-width: 0;
}

.faq-page__rail-inner {
  display: grid;
  gap: var(--space-6);
}

.faq-page--sticky-nav .faq-page__rail-inner {
  position: sticky;
  top: calc(var(--header-offset, 0px) + 2rem);
}

.faq-page__nav-title {
  color: var(--theme-heading-strong);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.4vw, 1.45rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.faq-page__nav-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-page__nav-link {
  align-items: baseline;
  color: var(--theme-body-readable);
  column-gap: 0.55rem;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  opacity: 0.78;
  text-decoration: none;
  width: fit-content;
}

.faq-page__nav-link:hover,
.faq-page__nav-link:focus-visible {
  color: var(--color-primary);
  opacity: 1;
}

.faq-page__nav-index {
  color: var(--color-primary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.faq-page__nav-label {
  color: inherit;
  font-weight: 500;
}

.faq-page__content {
  display: grid;
  gap: clamp(4.5rem, 7vw, 7.25rem);
  justify-self: start;
}

.faq-page__group {
  display: grid;
  gap: clamp(var(--space-6), 3vw, var(--space-10));
}

.faq-page__group-label {
  color: var(--color-primary);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.45rem;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.faq-page__group-separator {
  opacity: 0.72;
}

.faq-page__items {
  display: grid;
}

.faq-page__item {
  border-top: 1px solid var(--color-outline);
}

.faq-page__summary {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: clamp(var(--space-3), 1vw, var(--space-4));
  grid-template-columns: minmax(0, 1fr) 1rem;
  list-style: none;
  padding: clamp(1.5rem, 2.2vw, 1.9rem) 0;
}

.faq-page__summary::-webkit-details-marker {
  display: none;
}

.faq-page__summary:focus-visible {
  outline: 2px solid rgba(150, 73, 0, 0.35);
  outline-offset: 6px;
}

.faq-page__question {
  color: var(--theme-heading-strong);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.25vw, 2.35rem);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: normal;
  text-wrap: pretty;
  word-break: normal;
}

.faq-page__indicator {
  align-self: start;
  display: block;
  height: 0.9rem;
  justify-self: end;
  margin-top: 0.72rem;
  position: relative;
  width: 0.9rem;
}

.faq-page__indicator::before,
.faq-page__indicator::after {
  background: var(--color-primary-accent);
  border-radius: 999px;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-fast);
}

.faq-page__indicator::before {
  height: 2px;
  width: 0.9rem;
}

.faq-page__indicator::after {
  height: 0.9rem;
  width: 2px;
}

.faq-page__item[open] .faq-page__indicator::before,
.faq-page__item[open] .faq-page__indicator::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq-page__answer {
  color: var(--theme-body-readable);
  font-size: var(--text-body);
  line-height: 1.72;
  max-width: min(100%, 56ch);
  padding: 0 0 var(--space-5);
}

.faq-page__answer > :first-child {
  margin-top: 0;
}

.faq-page__answer > :last-child {
  margin-bottom: 0;
}

.faq-page__answer p,
.faq-page__answer ul,
.faq-page__answer ol,
.faq-page__answer li {
  color: inherit;
}

.faq-page__answer :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--space-4);
}

.faq-page__answer ul,
.faq-page__answer ol {
  padding-left: 1.25rem;
}

.faq-page__answer li + li {
  margin-top: var(--space-2);
}

.faq-page__answer a {
  color: var(--theme-link-color);
  text-decoration-color: var(--theme-link-decoration-color);
}

.faq-page__answer a:hover,
.faq-page__answer a:focus-visible {
  color: var(--theme-link-hover-color);
  text-decoration-color: var(--theme-link-decoration-color-hover);
}

@media (max-width: 991px) {
  .faq-page::after {
    opacity: 0.48;
    right: -18vw;
    width: 58vw;
  }

  .faq-page__intro {
    grid-template-columns: 1fr;
  }

  .faq-page__eyebrow,
  .faq-page__heading,
  .faq-page__lead {
    grid-column: 1;
    grid-row: auto;
  }

  .faq-page__lead {
    max-width: min(100%, 36rem);
    padding-bottom: 0;
  }

  .faq-page__layout {
    grid-template-columns: 1fr;
  }

  .faq-page__rail {
    order: 2;
  }

  .faq-page__content {
    order: 1;
  }

  .faq-page__rail-inner,
  .faq-page--sticky-nav .faq-page__rail-inner {
    gap: var(--space-4);
    position: static;
  }

  .faq-page__nav-list {
    column-gap: var(--space-4);
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    white-space: nowrap;
  }

  .faq-page__question {
    font-size: clamp(1.55rem, 5vw, 1.9rem);
  }
}

@media (max-width: 767px) {
  .faq-page {
    padding-block: clamp(var(--space-16), 14vw, var(--space-24));
  }

  .faq-page::after {
    height: 12rem;
    opacity: 0.42;
  }

  .faq-page__heading :is(h1, h2, h3, h4, h5, h6, p) {
    font-size: clamp(3.7rem, 16vw, 5.75rem);
  }

  .faq-page__layout,
  .faq-page__content {
    gap: var(--space-8);
  }

  .faq-page__summary {
    gap: var(--space-4);
    padding: var(--space-6) 0;
  }

  .faq-page__answer {
    padding-bottom: var(--space-6);
  }
}