.faq-page {
  --faq-section-gap: var(--space-4xl);
  --faq-card-gap: var(--space-xl);
  --faq-tile-radius: var(--radius-tab);
  --faq-card-radius: var(--radius-card);
  --faq-border: 1px solid var(--border-ink-15);
  --faq-border-strong: 1px solid var(--border-ink-40);
  --faq-shadow: var(--shadow-card);
  --faq-transition: var(--transition-fast);
  --faq-press-transition: var(--transition-press);
  --faq-focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
  --faq-focus-offset: var(--focus-outline-offset);
  --faq-text-measure: 68ch;
  --faq-text-measure-narrow: 55ch;
  --faq-text-measure-cta: 480px;
}

.faq-page .container {
  max-width: var(--container-editorial);
}

/* Hero */
.faq-hero {
  padding-block: var(--space-4xl) var(--space-3xl);
}

.faq-hero__inner {
  display: flex;
  justify-content: flex-start;
}

.faq-hero__content {
  width: 100%;
  max-width: 720px;
  text-align: left;
}

.faq-hero__content h1 {
  margin-block-end: var(--space-lg);
}

.faq-hero__lead {
  max-width: var(--faq-text-measure);
  color: var(--color-ink-soft);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-leading);
  margin-block-end: 0;
}

/* Index */
.faq-index {
  padding-block-end: var(--space-3xl);
}

.faq-index h2 {
  margin-block-end: var(--space-sm);
}

.faq-index__intro {
  color: var(--color-ink-soft);
  margin-block-end: var(--space-xl);
}

.faq-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
}

.faq-index__item {
  flex: 0 1 180px;
  min-width: 0;
}

.faq-index__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-paper-deep);
  border: 1px solid var(--border-ink-15);
  border-radius: var(--faq-tile-radius);
  color: var(--color-ink);
  font-weight: 500;
  text-align: center;
  transition: border-color var(--faq-transition), transform var(--faq-transition), background-color var(--faq-transition);
}

.faq-index__link:hover {
  border-color: var(--border-ink-40);
  transform: translateY(-1px);
  background-color: var(--color-paper-light);
}

.faq-index__link:focus-visible {
  outline: var(--faq-focus-outline);
  outline-offset: var(--faq-focus-offset);
}

/* FAQ section grid */
.faq-section {
  padding-block-end: var(--space-4xl);
}

.faq-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  align-items: start;
}

.faq-section__main {
  min-width: 0;
}

.faq-section__main h2 {
  margin-block-end: var(--space-xl);
}

.faq-section__aside {
  min-width: 0;
}

.faq-aside-card {
  background-color: var(--color-paper-light);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  box-shadow: var(--faq-shadow);
  padding: var(--space-xl);
}

.faq-aside-card__title {
  margin-block-end: var(--space-sm);
}

.faq-aside-card__text {
  color: var(--color-ink-soft);
  margin-block-end: 0;
}

/* Accordion */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-accordion__item {
  background-color: var(--color-paper-light);
  border: 1px solid var(--border-ink-soft-20);
  border-radius: var(--faq-card-radius);
  box-shadow: var(--faq-shadow);
  overflow: hidden;
}

.faq-accordion__heading {
  margin-block-end: 0;
}

.faq-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  min-height: 44px;
  padding: var(--space-lg) var(--space-xl);
  background: none;
  border: none;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-leading);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--faq-transition);
}

.faq-accordion__trigger:hover {
  background-color: var(--color-paper-deep);
}

.faq-accordion__trigger:focus-visible {
  outline: var(--faq-focus-outline);
  outline-offset: calc(var(--faq-focus-offset) * -1);
}

.faq-accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-accordion__icon::before,
.faq-accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--color-ink);
  transform: translate(-50%, -50%);
  transition: transform var(--faq-transition);
}

.faq-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-accordion__trigger[aria-expanded="true"] .faq-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-accordion__panel {
  padding-inline: var(--space-xl);
  padding-block-end: var(--space-xl);
}

.faq-accordion__panel[hidden] {
  display: none;
}

.faq-accordion__content {
  max-width: var(--faq-text-measure);
  color: var(--color-ink-soft);
}

.faq-accordion__content p {
  margin-block-end: var(--space-md);
}

.faq-accordion__content ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-xl);
  list-style-type: disc;
}

.faq-accordion__content li {
  margin-block-end: var(--space-xs);
}

/* Guide */
.faq-guide {
  padding-block-end: var(--space-4xl);
}

.faq-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  align-items: start;
}

.faq-guide__main {
  min-width: 0;
}

.faq-guide__main h2 {
  margin-block-end: var(--space-xl);
}

.faq-guide__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: faq-step;
}

.faq-guide__step {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  background-color: var(--color-paper-deep);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  padding: var(--space-xl);
}

.faq-guide__step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: 600;
}

.faq-guide__step-content {
  min-width: 0;
  flex: 1;
}

.faq-guide__step-content h3 {
  margin-block-end: var(--space-sm);
}

.faq-guide__step-content p {
  max-width: var(--faq-text-measure);
  color: var(--color-ink-soft);
  margin-block-end: 0;
}

.faq-guide__aside {
  min-width: 0;
}

.faq-guide__figure {
  margin-block-end: 0;
}

.faq-guide__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--border-ink-soft-20);
  border-radius: var(--radius-image);
}

.faq-guide__figure figcaption {
  margin-block-start: var(--space-sm);
}

/* Checklist */
.faq-checklist {
  padding-block-end: var(--space-4xl);
}

.faq-checklist__inner {
  display: flex;
  justify-content: center;
}

.faq-checklist__card {
  width: 100%;
  max-width: 800px;
  background-color: var(--color-paper-light);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  box-shadow: var(--faq-shadow);
  padding: var(--space-2xl);
}

.faq-checklist__card h2 {
  margin-block-end: var(--space-sm);
}

.faq-checklist__intro {
  color: var(--color-ink-soft);
  margin-block-end: var(--space-xl);
  max-width: var(--faq-text-measure);
}

.faq-checklist__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
  padding-inline-start: 0;
  list-style: none;
}

.faq-checklist__item {
  min-width: 0;
}

.faq-checklist__label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  cursor: pointer;
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-ink);
  margin-block-end: 0;
}

.faq-checklist__checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  accent-color: var(--color-terracotta);
}

.faq-checklist__checkbox:focus-visible {
  outline: var(--faq-focus-outline);
  outline-offset: var(--faq-focus-offset);
}

.faq-checklist__text {
  min-width: 0;
  overflow-wrap: break-word;
}

.faq-checklist__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-md) var(--space-xl);
  background-color: transparent;
  border: 1px solid var(--border-ink-25);
  border-radius: var(--faq-tile-radius);
  color: var(--color-ink);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--faq-transition), border-color var(--faq-transition);
}

.faq-checklist__clear:hover {
  background-color: var(--color-paper-deep);
  border-color: var(--border-ink-40);
}

.faq-checklist__clear:focus-visible {
  outline: var(--faq-focus-outline);
  outline-offset: var(--faq-focus-offset);
}

/* Tips */
.faq-tips {
  padding-block-end: var(--space-4xl);
}

.faq-tips h2 {
  margin-block-end: var(--space-xl);
}

.faq-tips__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.faq-tips__card {
  min-width: 0;
  background-color: var(--color-paper-light);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  box-shadow: var(--faq-shadow);
  padding: var(--space-xl);
  transition: border-color var(--faq-transition), transform var(--faq-transition);
}

.faq-tips__card:hover {
  border-color: var(--border-ink-40);
  transform: translateY(-1px);
}

.faq-tips__card h3 {
  margin-block-end: var(--space-sm);
}

.faq-tips__card p {
  max-width: var(--faq-text-measure-narrow);
  color: var(--color-ink-soft);
  margin-block-end: 0;
}

/* Safety */
.faq-safety {
  padding-block-end: var(--space-4xl);
}

.faq-safety h2 {
  margin-block-end: var(--space-xl);
}

.faq-safety__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}

.faq-safety__block {
  min-width: 0;
  background-color: var(--color-paper-deep);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  padding: var(--space-xl);
}

.faq-safety__block h3 {
  margin-block-end: var(--space-sm);
}

.faq-safety__block p {
  color: var(--color-ink-soft);
  margin-block-end: 0;
}

/* Payments */
.faq-payments {
  padding-block-end: var(--space-4xl);
}

.faq-payments__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  align-items: start;
}

.faq-payments__main {
  min-width: 0;
}

.faq-payments__main h2 {
  margin-block-end: var(--space-xl);
}

.faq-payments__aside {
  min-width: 0;
}

/* Family */
.faq-family {
  padding-block-end: var(--space-4xl);
}

.faq-family h2 {
  margin-block-end: var(--space-xl);
}

.faq-family__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}

.faq-family__block {
  min-width: 0;
  background-color: var(--color-paper-light);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  box-shadow: var(--faq-shadow);
  padding: var(--space-xl);
}

.faq-family__block h3 {
  margin-block-end: var(--space-sm);
}

.faq-family__block p {
  color: var(--color-ink-soft);
  margin-block-end: 0;
}

/* Resources */
.faq-resources {
  padding-block-end: var(--space-4xl);
}

.faq-resources h2 {
  margin-block-end: var(--space-sm);
}

.faq-resources__intro {
  color: var(--color-ink-soft);
  margin-block-end: var(--space-xl);
}

.faq-resources__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
}

.faq-resources__item {
  flex: 0 1 200px;
  min-width: 0;
  background-color: var(--color-paper-deep);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  padding: var(--space-lg);
  transition: border-color var(--faq-transition), transform var(--faq-transition);
}

.faq-resources__item:hover {
  border-color: var(--border-ink-40);
  transform: translateY(-1px);
}

.faq-resources__link {
  display: inline-block;
  color: var(--color-ink);
  font-weight: 600;
  margin-block-end: var(--space-xs);
  text-decoration: none;
}

.faq-resources__link:hover {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-terracotta);
}

.faq-resources__link:focus-visible {
  outline: var(--faq-focus-outline);
  outline-offset: var(--faq-focus-offset);
}

.faq-resources__desc {
  color: var(--color-ink-soft);
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  margin-block-end: 0;
}

/* CTA */
.faq-cta {
  padding-block-end: var(--space-5xl);
}

.faq-cta__inner {
  display: flex;
  justify-content: center;
}

.faq-cta__card {
  width: 100%;
  max-width: 600px;
  background-color: var(--color-paper-deep);
  border: var(--faq-border);
  border-radius: var(--faq-card-radius);
  box-shadow: var(--faq-shadow);
  padding: var(--space-2xl);
  text-align: center;
}

.faq-cta__card h2 {
  margin-block-end: var(--space-md);
}

.faq-cta__text {
  max-width: var(--faq-text-measure-cta);
  margin-inline: auto;
  color: var(--color-ink-soft);
  margin-block-end: var(--space-xl);
}

.faq-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.faq-cta__button {
  min-width: 220px;
}

.faq-cta__link {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-ink-25);
  transition: color var(--faq-transition), text-decoration-color var(--faq-transition);
}

.faq-cta__link:hover {
  color: var(--color-terracotta);
  text-decoration-color: var(--color-terracotta);
}

.faq-cta__link:focus-visible {
  outline: var(--faq-focus-outline);
  outline-offset: var(--faq-focus-offset);
}

/* Tablet */
@media (max-width: 1023px) {
  .faq-section__grid,
  .faq-guide__grid,
  .faq-payments__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .faq-section__aside,
  .faq-guide__aside,
  .faq-payments__aside {
    order: 2;
  }

  .faq-safety__grid,
  .faq-family__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .faq-guide__figure {
    max-width: 480px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .faq-page {
    --faq-section-gap: var(--space-3xl);
    --faq-card-gap: var(--space-lg);
  }

  .faq-hero {
    padding-block: var(--space-3xl) var(--space-2xl);
  }

  .faq-hero__content {
    max-width: 100%;
  }

  .faq-index__list,
  .faq-resources__list {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-index__item,
  .faq-resources__item {
    flex-basis: auto;
    width: 100%;
  }

  .faq-index__link {
    width: 100%;
  }

  .faq-safety__grid,
  .faq-family__grid {
    grid-template-columns: 1fr;
  }

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

  .faq-guide__step {
    flex-direction: column;
    gap: var(--space-md);
  }

  .faq-guide__step-number {
    width: 36px;
    height: 36px;
    font-size: var(--text-body-size);
  }

  .faq-checklist__card,
  .faq-cta__card {
    padding: var(--space-lg);
  }

  .faq-accordion__trigger {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-leading);
  }

  .faq-accordion__panel {
    padding-inline: var(--space-lg);
    padding-block-end: var(--space-lg);
  }

  .faq-cta__button {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-page *,
  .faq-page *::before,
  .faq-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .faq-index__link:hover,
  .faq-tips__card:hover,
  .faq-resources__item:hover {
    transform: none;
  }
}