.page-faq{
  --faq-gold-grad: linear-gradient(135deg, var(--royal-gold) 0%, var(--golden-highlight) 100%);
  font-family: var(--font-body);
  background: var(--neutral-canvas);
}

.page-faq-hero{
  position: relative;
  overflow: hidden;
  padding-top: 2rem;
  background:
    radial-gradient(ellipse at 82% 18%, rgba(201,162,39,.2) 0%, rgba(201,162,39,0) 46%),
    linear-gradient(160deg, var(--deep-blue) 0%, #10294f 62%, #143a63 100%);
}

.page-faq-hero::before{
  content:"";
  position:absolute;
  top:0;
  right:12%;
  width:1px;
  height:100%;
  background: linear-gradient(to bottom, transparent, rgba(240,217,140,.38), transparent);
  transform: skewX(18deg);
}

.page-faq-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:7px;
  background: var(--faq-gold-grad);
  transform: skewY(-1.4deg) scaleX(1.02);
  transform-origin: left;
}

.page-faq-hero .breadcrumbs{
  margin-bottom: 1.5rem;
  font-family: var(--font-data);
  font-size: .8125rem;
  letter-spacing: .03em;
  color: rgba(255,255,255,.68);
}

.page-faq-hero .breadcrumbs a{
  color: rgba(255,255,255,.8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.page-faq-hero .breadcrumbs a:hover,
.page-faq-hero .breadcrumbs a:focus-visible{
  color: #fff;
  border-bottom-color: var(--electric-cyan);
  outline: none;
}

.page-faq-hero .breadcrumbs__sep{
  margin: 0 .4rem;
  color: rgba(255,255,255,.4);
}

.page-faq-hero .breadcrumbs__current{
  color: var(--golden-highlight);
}

.page-faq-hero__inner{
  position: relative;
  display: grid;
  gap: 2rem;
  padding: 1.5rem;
  background: rgba(255,255,255,.045);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.page-faq-hero__content h1{
  margin: .75rem 0 1rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.875rem, 2.2vw + 1rem, 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: #fff;
}

.page-faq-hero__content .eyebrow{
  color: var(--golden-highlight);
}

.page-faq-hero__intro{
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255,255,255,.84);
}

.page-faq-hero__stats{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
}

.page-faq-hero__stats .stat__value{
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--golden-highlight);
}

.page-faq-hero__stats .stat__label{
  font-family: var(--font-data);
  font-size: .8125rem;
  color: rgba(255,255,255,.6);
}

.page-faq-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 1.75rem;
}

.page-faq-hero__actions .btn--outline{
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

.page-faq-hero__media{
  margin: 0;
}

.page-faq-hero__media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  border: 1px solid rgba(240,217,140,.3);
  box-shadow: var(--shadow-lg);
}

.page-faq-hero__note{
  margin-top: 1.25rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(255,255,255,.56);
  border-left: 2px solid var(--royal-gold);
}

.page-faq-index{
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
  background: var(--neutral-canvas);
}

.page-faq-index .section-title{
  color: var(--deep-blue);
}

.page-faq-index__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.page-faq-index__item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  padding: 1.375rem 1.25rem;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--dark-slate);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}

.page-faq-index__item:hover,
.page-faq-index__item:focus-visible{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--royal-gold);
  background-color: #fffdf7;
  outline: none;
}

.page-faq-index__num{
  grid-row: span 2;
  padding-top: .15rem;
  font-family: var(--font-data);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--royal-gold);
}

.page-faq-index__cat{
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--deep-blue);
}

.page-faq-index__desc{
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(28,28,28,.66);
}

.page-faq-index__count{
  grid-column: 1 / -1;
  margin-top: .375rem;
  padding-top: .625rem;
  border-top: 1px solid var(--light-grey);
  font-family: var(--font-data);
  font-size: .8125rem;
  color: var(--violet-accent);
}

.page-faq #faq-index-title{
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.page-faq-topic{
  position: relative;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--light-grey);
  background: var(--neutral-canvas);
}

.page-faq-topic.section--alt{
  background: var(--deep-blue);
  color: #fff;
}

.page-faq-topic[id]{
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.page-faq-topic__head{
  margin-bottom: 2rem;
}

.page-faq-topic__title{
  margin: .375rem 0 .625rem;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.625rem, 1.6vw + .9rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--deep-blue);
}

.page-faq-topic.section--alt .page-faq-topic__title{
  color: #fff;
}

.page-faq-topic__lead{
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(28,28,28,.66);
}

.page-faq-topic.section--alt .page-faq-topic__lead{
  color: rgba(255,255,255,.72);
}

.page-faq-topic__layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

.page-faq-topic__aside{
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.page-faq-accordion{
  display: grid;
  gap: .875rem;
}

.page-faq-accordion__item{
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.page-faq-accordion__item[open]{
  border-color: var(--royal-gold);
  box-shadow: var(--shadow-md);
}

.page-faq-topic.section--alt .page-faq-accordion__item,
.page-faq-support .page-faq-accordion__item{
  border-color: rgba(255,255,255,.16);
}

.page-faq-topic.section--alt .page-faq-accordion__item[open],
.page-faq-support .page-faq-accordion__item[open]{
  border-color: var(--royal-gold);
}

.page-faq-accordion__summary{
  position: relative;
  display: block;
  cursor: pointer;
  padding: 1.125rem 3.25rem 1.125rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--deep-blue);
  list-style: none;
  user-select: none;
  transition: background-color var(--transition), color var(--transition);
}

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

.page-faq-accordion__summary:hover{
  background: rgba(245,242,235,.55);
  color: #000;
}

.page-faq-accordion__summary::before{
  content:"";
  position:absolute;
  left:0;
  top:20%;
  bottom:20%;
  width:3px;
  border-radius: 0 2px 2px 0;
  background: var(--faq-gold-grad);
  opacity: 0;
  transition: opacity var(--transition);
}

.page-faq-accordion__item[open] .page-faq-accordion__summary::before{
  opacity: 1;
}

.page-faq-accordion__summary::after{
  content:"+";
  position:absolute;
  right: 1.125rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-data);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--royal-gold);
  transition: transform var(--transition), color var(--transition);
}

.page-faq-accordion__item[open] .page-faq-accordion__summary::after{
  transform: translateY(-50%) rotate(45deg);
  color: var(--orange-pop);
}

.page-faq-accordion__body{
  padding: 0 1.375rem 1.375rem 1.5rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(28,28,28,.82);
}

.page-faq-accordion__body p + p{
  margin-top: .75rem;
}

.page-faq-accordion__body a{
  color: var(--royal-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.page-faq-accordion__body a:hover,
.page-faq-accordion__body a:focus-visible{
  color: var(--orange-pop);
  text-decoration-color: var(--orange-pop);
  outline: none;
}

.page-faq-index__side{
  padding: 1.375rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.page-faq-index__side-title{
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--deep-blue);
}

.page-faq-steps{
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(28,28,28,.78);
}

.page-faq-steps li + li{
  margin-top: .5rem;
}

.page-faq-steps a{
  color: var(--royal-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq-topic .tag{
  display: inline-block;
  margin: 0 .5rem .5rem 0;
}

.page-faq-tag-list{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.page-faq-note{
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(28,28,28,.66);
}

.page-faq-tip{
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-left: 3px solid var(--orange-pop);
  background: rgba(255,107,53,.08);
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(28,28,28,.78);
}

.page-faq-tip strong{
  color: var(--orange-pop);
  font-weight: 700;
}

.page-faq-topic__aside .stat{
  padding: 1.25rem 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.page-faq-topic__aside .stat__value{
  display: block;
  font-family: var(--font-data);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.15;
  color: var(--deep-blue);
}

.page-faq-support{
  position: relative;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background:
    radial-gradient(ellipse at 8% 88%, rgba(123,47,255,.16) 0%, rgba(123,47,255,0) 42%),
    linear-gradient(175deg, var(--deep-blue) 0%, #10294f 100%);
}

.page-faq-support::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:6px;
  background: var(--faq-gold-grad);
  transform: skewY(-1.2deg) scaleX(1.02);
  transform-origin: left;
}

.page-faq-support .page-faq-topic__title{
  color: #fff;
}

.page-faq-support .page-faq-topic__lead{
  color: rgba(255,255,255,.74);
}

.page-faq-support .eyebrow{
  color: var(--golden-highlight);
}

.page-faq-support__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.page-faq-support__aside{
  display: grid;
  gap: 1.25rem;
}

.page-faq-support__card{
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-md);
}

.page-faq-support__media{
  margin: 0;
}

.page-faq-support__media img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.page-faq-support__contact{
  padding: 1.25rem 1.375rem 1.5rem;
  font-size: .9375rem;
}

.page-faq-support__contact-label{
  margin: 0 0 .75rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--golden-highlight);
}

.page-faq-support__contact p{
  margin: .375rem 0 0;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}

@media (min-width: 600px){
  .page-faq-index__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 800px){
  .page-faq-hero__inner{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    padding: 2.25rem;
  }

  .page-faq-topic__layout{
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 2.5rem;
  }

  .page-faq-support__grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr);
    gap: 2.5rem;
    align-items: start;
  }
}

@media (min-width: 1024px){
  .page-faq-index__grid{
    grid-template-columns: repeat(5, 1fr);
  }

  .page-faq-hero__inner{
    padding: 2.75rem;
  }

  .page-faq-topic{
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}