.page-faq{
  --faq-grid-line:rgba(0,229,255,.08);
  --faq-panel:rgba(17,24,39,.72);
  --faq-border:rgba(255,255,255,.06);
  --faq-chip-cyan:rgba(0,229,255,.12);
  --faq-chip-magenta:rgba(255,42,109,.12);
  --faq-chip-purple:rgba(122,90,248,.16);
  --faq-chip-green:rgba(57,255,136,.12);
  --faq-chip-warning:rgba(255,184,108,.14);
  position:relative;
  background:var(--bg-deep);
  color:var(--text-high);
  padding:28px clamp(16px,4vw,56px) 72px;
  font-family:var(--font-body);
  line-height:1.7
}
.page-faq .breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-low);
  margin:0 0 28px;
  padding:0
}
.page-faq .crumb{
  color:var(--text-low);
  text-decoration:none;
  transition:color .2s ease
}
.page-faq .crumb:hover{
  color:var(--cyan-primary)
}
.page-faq .crumb--current{
  color:var(--text-mid)
}
.page-faq .crumb-sep{
  color:var(--text-low);
  opacity:.6
}
.page-faq .page-faq__hero{
  position:relative;
  padding:0 0 40px
}
.page-faq .page-faq__hero-grid{
  display:grid;
  gap:28px;
  margin-top:28px
}
.page-faq .page-faq__hero-copy{
  min-width:0
}
.page-faq .page-faq__hero h1{
  font-family:var(--font-head);
  font-size:clamp(26px,1.6rem + 3vw,46px);
  line-height:1.2;
  font-weight:800;
  margin:14px 0 16px;
  letter-spacing:-.01em;
  transform:skewX(-1.5deg);
  max-width:14em
}
.page-faq .page-faq__lead{
  color:var(--text-mid);
  font-size:15px;
  max-width:52em;
  margin:0
}
.page-faq .page-faq__lead strong{
  color:var(--cyan-primary);
  font-weight:600
}
.page-faq .page-faq__quick-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px
}
.page-faq .faq-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(0,229,255,.07);
  border:1px solid rgba(0,229,255,.16);
  color:var(--text-high);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  line-height:1.4;
  transition:var(--transition-base)
}
.page-faq .faq-tag:hover{
  background:rgba(0,229,255,.16);
  border-color:var(--cyan-primary);
  color:var(--cyan-primary);
  transform:translateY(-2px)
}
.page-faq .page-faq__hero-figure{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,42,109,.18);
  transform:rotate(-1.5deg);
  box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 32px rgba(255,42,109,.08)
}
.page-faq .page-faq__hero-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover
}
.page-faq .page-faq__layout{
  display:block
}
.page-faq .page-faq__answers{
  min-width:0
}
.page-faq .faq-block{
  margin-bottom:48px;
  scroll-margin-top:24px
}
.page-faq .faq-block__head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--faq-grid-line);
  position:relative
}
.page-faq .faq-block__head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:64px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-primary),transparent)
}
.page-faq .faq-block__num{
  font-family:var(--font-mono);
  font-size:28px;
  font-weight:700;
  color:var(--magenta-accent);
  opacity:.85;
  line-height:1;
  transform:skewX(-4deg)
}
.page-faq .faq-block h2{
  font-family:var(--font-head);
  font-size:22px;
  font-weight:700;
  margin:0 0 4px;
  letter-spacing:-.01em
}
.page-faq .faq-block__desc{
  margin:0;
  color:var(--text-low);
  font-size:13px
}
.page-faq .faq-item{
  background:var(--faq-panel);
  border:1px solid var(--faq-border);
  border-radius:var(--radius-md);
  margin-bottom:14px;
  transition:var(--transition-base);
  overflow:hidden
}
.page-faq .faq-item[open]{
  border-color:rgba(0,229,255,.32);
  box-shadow:0 0 28px rgba(0,229,255,.05),0 8px 24px rgba(0,0,0,.2)
}
.page-faq .faq-item__summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-head);
  font-size:14.5px;
  font-weight:600;
  line-height:1.5;
  user-select:none
}
.page-faq .faq-item__summary::-webkit-details-marker{
  display:none
}
.page-faq .faq-item__summary:focus-visible{
  outline:2px solid var(--cyan-primary);
  outline-offset:-2px;
  border-radius:var(--radius-md)
}
.page-faq .faq-item__question{
  flex:1;
  min-width:0
}
.page-faq .faq-item__icon{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(0,229,255,.32);
  position:relative;
  flex-shrink:0;
  transition:var(--transition-base)
}
.page-faq .faq-item__icon::before,
.page-faq .faq-item__icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--cyan-primary);
  border-radius:2px;
  transition:var(--transition-base)
}
.page-faq .faq-item__icon::before{
  width:10px;
  height:2px
}
.page-faq .faq-item__icon::after{
  width:2px;
  height:10px
}
.page-faq .faq-item[open] .faq-item__icon{
  background:rgba(0,229,255,.12);
  border-color:var(--cyan-primary);
  transform:rotate(180deg)
}
.page-faq .faq-item[open] .faq-item__icon::after{
  transform:translate(-50%,-50%) scaleY(0)
}
.page-faq .faq-item__body{
  padding:0 18px 20px;
  color:var(--text-mid);
  font-size:14px;
  line-height:1.85
}
.page-faq .faq-item__body p{
  margin:0 0 12px
}
.page-faq .faq-item__body p:last-child{
  margin-bottom:0
}
.page-faq .faq-item__body ol{
  margin:0 0 12px;
  padding-left:20px
}
.page-faq .faq-item__body li{
  margin-bottom:6px
}
.page-faq .faq-item__body a{
  color:var(--cyan-primary);
  text-decoration:none;
  border-bottom:1px dashed rgba(0,229,255,.4);
  transition:var(--transition-base)
}
.page-faq .faq-item__body a:hover{
  color:#7cf2ff;
  border-bottom-style:solid
}
.page-faq .faq-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1.5
}
.page-faq .faq-chip--cyan{
  background:var(--faq-chip-cyan);
  color:var(--cyan-primary)
}
.page-faq .faq-chip--magenta{
  background:var(--faq-chip-magenta);
  color:var(--magenta-accent)
}
.page-faq .faq-chip--purple{
  background:var(--faq-chip-purple);
  color:#b8a4ff
}
.page-faq .faq-chip--green{
  background:var(--faq-chip-green);
  color:var(--green-accent)
}
.page-faq .faq-chip--warning{
  background:var(--faq-chip-warning);
  color:var(--warning)
}
.page-faq .faq-mobile__figure{
  margin:0 0 20px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(0,229,255,.14);
  max-width:480px;
  transform:rotate(.8deg);
  box-shadow:0 10px 32px rgba(0,0,0,.28)
}
.page-faq .faq-mobile__figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover
}
.page-faq .page-faq__toc{
  display:none
}

@media (min-width:768px){
  .page-faq{
    padding-top:36px
  }
  .page-faq .page-faq__hero-grid{
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:40px
  }
  .page-faq .page-faq__hero{
    padding-bottom:56px
  }
  .page-faq .faq-block h2{
    font-size:24px
  }
  .page-faq .faq-item__summary{
    font-size:15px;
    padding:18px 22px
  }
  .page-faq .faq-item__body{
    padding:0 22px 22px
  }
}

@media (min-width:1024px){
  .page-faq{
    padding:40px clamp(20px,4vw,64px) 88px
  }
  .page-faq .page-faq__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 240px;
    gap:52px;
    align-items:start
  }
  .page-faq .page-faq__toc{
    display:block;
    position:sticky;
    top:24px;
    align-self:start
  }
  .page-faq .page-faq__toc-inner{
    position:relative;
    padding:22px 18px;
    background:rgba(17,24,39,.82);
    border-radius:var(--radius-md);
    border:1px solid rgba(0,229,255,.1);
    box-shadow:0 8px 32px rgba(0,0,0,.24)
  }
  .page-faq .page-faq__toc-label{
    display:block;
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--text-low);
    margin-bottom:16px;
    padding-left:10px
  }
  .page-faq .page-faq__toc-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:10px;
    color:var(--text-mid);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:var(--transition-base);
    position:relative;
    z-index:1
  }
  .page-faq .page-faq__toc-link span{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--cyan-primary);
    opacity:.8
  }
  .page-faq .page-faq__toc-link:hover{
    background:rgba(0,229,255,.08);
    color:var(--text-high);
    transform:translateX(4px)
  }
  .page-faq .page-faq__toc-deco{
    position:absolute;
    right:12px;
    bottom:12px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,42,109,.16),rgba(122,90,248,.08) 60%,transparent);
    pointer-events:none
  }
}