.page-faq{
  --faq-panel:rgba(16,43,58,.55);
  --faq-soft:rgba(243,247,248,.78);
  --faq-bg:var(--ink-900);
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(53,230,255,.10), transparent 70%),
    radial-gradient(760px 400px at -10% 28%, rgba(255,180,84,.07), transparent 72%);
  color:var(--fog);
  padding:18px 0 72px;
  overflow-x:hidden;
}

.page-faq .faq-hero{padding:0 0 36px;}

.page-faq .faq-hero__grid{
  display:grid;
  gap:28px;
  align-items:start;
  margin-top:20px;
}

.page-faq .faq-hero__main h1{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(34px,7.4vw,64px);
  line-height:1.05;
  letter-spacing:-.012em;
  margin:10px 0 16px;
  color:var(--fog);
}

.page-faq .faq-hero__lede{
  margin:0 0 22px;
  max-width:62ch;
  font-size:16px;
  line-height:1.78;
  color:var(--faq-soft);
}

.page-faq .faq-hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.page-faq .faq-hero__fact{
  flex:1 1 140px;
  min-width:132px;
  border:1px solid var(--line);
  background:var(--faq-panel);
  padding:10px 14px;
}

.page-faq .faq-hero__fact b{
  display:block;
  font-family:var(--font-mono);
  font-size:20px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--cyan);
}

.page-faq .faq-hero__fact span{
  display:block;
  margin-top:4px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--slate);
}

.page-faq .faq-hero__figure{
  margin:0;
  border:1px solid var(--line);
  background:var(--ink-990);
}

.page-faq .faq-hero__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-faq .faq-layout{
  display:grid;
  gap:30px;
  align-items:start;
}

.page-faq .faq-index{
  border:1px solid var(--line);
  background:var(--faq-panel);
  padding:18px 16px;
}

.page-faq .faq-index__title{
  margin:0 0 12px;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--amber);
}

.page-faq .faq-index__list{
  list-style:none;
  margin:0;
  padding:0;
}

.page-faq .faq-index__list li + li{border-top:1px solid var(--line);}

.page-faq .faq-index__link{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 0;
  font-size:14px;
  color:var(--fog);
  text-decoration:none;
  transition:color .16s var(--ease);
}

.page-faq .faq-index__link:hover,
.page-faq .faq-index__link:focus-visible{color:var(--cyan);}

.page-faq .faq-index__code{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--slate);
}

.page-faq .faq-index__note{
  margin:14px 0 14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.65;
  color:var(--slate);
}

.page-faq .faq-index .btn{width:100%;justify-content:center;text-align:center;}

.page-faq .faq-body{min-width:0;}

.page-faq .faq-sec{
  border-top:1px solid var(--line);
  padding:30px 0 6px;
  scroll-margin-top:80px;
}

.page-faq .faq-sec:first-child{
  border-top:0;
  padding-top:0;
}

.page-faq .faq-sec__head{margin-bottom:14px;}

.page-faq .faq-sec__code{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--amber);
}

.page-faq .faq-sec__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(24px,4.4vw,34px);
  line-height:1.2;
  letter-spacing:.01em;
  margin:0 0 10px;
  color:var(--fog);
}

.page-faq .faq-sec__intro{
  margin:0;
  max-width:66ch;
  font-size:15px;
  line-height:1.72;
  color:var(--slate);
}

.page-faq .faq-q{border-bottom:1px solid var(--line);}
.page-faq .faq-q:first-child{border-top:1px solid var(--line);}

.page-faq .faq-q .expand__trigger{
  display:flex;
  gap:12px;
  align-items:baseline;
  width:100%;
  padding:16px 0;
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  color:var(--fog);
  transition:color .16s var(--ease);
}

.page-faq .faq-q .expand__trigger:hover{color:var(--cyan);}

.page-faq .faq-q .expand__trigger[aria-expanded="true"] .faq-q__code{color:var(--amber);}

.page-faq .faq-q__code{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--slate);
}

.page-faq .faq-q__text{flex:1 1 auto;min-width:0;}

.page-faq .faq-answer{
  padding:0 0 20px 26px;
  max-width:720px;
}

.page-faq .faq-answer p{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.8;
  color:var(--faq-soft);
}

.page-faq .faq-answer p:last-child{margin-bottom:0;}

.page-faq .faq-list{
  list-style:none;
  margin:0 0 12px;
  padding:0;
  display:grid;
  gap:8px;
}

.page-faq .faq-list:last-child{margin-bottom:0;}

.page-faq .faq-list li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.72;
  color:var(--faq-soft);
}

.page-faq .faq-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.8em;
  width:10px;
  height:1px;
  background:var(--cyan);
}

.page-faq .faq-modules{
  list-style:none;
  margin:0 0 12px;
  padding:1px;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.page-faq .faq-modules li{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 12px;
  background:var(--ink-900);
  font-size:14px;
  line-height:1.68;
  color:var(--faq-soft);
}

.page-faq .faq-modules .mono{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--amber);
}

.page-faq .faq-flow{
  display:grid;
  gap:18px;
  margin-top:26px;
  padding:18px;
  border:1px solid var(--line);
  background:var(--faq-panel);
}

.page-faq .faq-flow__figure{
  margin:0;
  border:1px solid var(--line);
  background:var(--ink-990);
}

.page-faq .faq-flow__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.page-faq .faq-flow__label{
  margin:0 0 12px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--amber);
}

.page-faq .faq-steps{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:grid;
  gap:10px;
}

.page-faq .faq-steps li{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:14px;
  line-height:1.7;
  color:var(--faq-soft);
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.page-faq .faq-steps li:last-child{border-bottom:0;padding-bottom:0;}

.page-faq .faq-steps__n{
  flex:0 0 auto;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--cyan);
}

.page-faq .faq-next{
  margin-top:52px;
  border:1px solid var(--line);
  background:var(--faq-panel);
  padding:22px 18px;
}

.page-faq .faq-next__label{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--amber);
}

.page-faq .faq-next__title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:24px;
  line-height:1.25;
  margin:0 0 16px;
  color:var(--fog);
}

.page-faq .faq-next__list{
  list-style:none;
  margin:0;
  padding:1px;
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.page-faq .faq-next__list li{background:var(--ink-900);}

.page-faq .faq-next__list a{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:12px 14px;
  font-size:15px;
  color:var(--fog);
  text-decoration:none;
  transition:background .16s var(--ease),color .16s var(--ease);
}

.page-faq .faq-next__list a:hover,
.page-faq .faq-next__list a:focus-visible{
  background:rgba(53,230,255,.07);
  color:var(--cyan);
}

.page-faq .faq-next__list .mono{
  flex:0 0 auto;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--slate);
}

@media (min-width:720px){
  .page-faq{padding-top:24px;}

  .page-faq .faq-layout{gap:36px;}

  .page-faq .faq-answer{padding-left:30px;}

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

  .page-faq .faq-flow{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;
    gap:24px;
    padding:22px;
  }

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

  .page-faq .faq-next{padding:26px 24px;}
}

@media (min-width:920px){
  .page-faq .faq-hero__grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:44px;
  }

  .page-faq .faq-layout{
    grid-template-columns:248px minmax(0,1fr);
    gap:56px;
  }

  .page-faq .faq-index{
    position:sticky;
    top:20px;
  }

  .page-faq .faq-sec{padding:38px 0 8px;}

  .page-faq .faq-q .expand__trigger{
    font-size:17px;
    padding:18px 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-index__link,
  .page-faq .faq-q .expand__trigger,
  .page-faq .faq-next__list a{transition:none;}
}
<<<END>>>