.page-faq{
  background:
    linear-gradient(90deg, rgba(0,255,136,.03) 0, transparent 18%, rgba(0,255,136,.02) 64%, transparent 100%),
    var(--bg-deep);
  color: var(--ink-bold);
  padding-bottom: 0;
}
.page-faq .faq-breadcrumb{
  display:flex;align-items:center;gap:10px;
  padding-top:24px;font-size:14px;color:var(--ink-dim);
}
.page-faq .faq-breadcrumb a{
  color:var(--ink-soft);text-decoration:none;transition:color .2s;
}
.page-faq .faq-breadcrumb a:hover{color:var(--accent-green);}
.page-faq .faq-breadcrumb__sep{opacity:.5;}
.page-faq .faq-breadcrumb__current{color:var(--ink-bold);}

/* ===== hero ===== */
.page-faq .faq-hero{
  position:relative;
  padding-top:clamp(2rem,5vw,4.25rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--line-light);
}
.page-faq .faq-hero::before{
  content:"";position:absolute;top:0;right:0;
  width:38%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-green));
}
.page-faq .faq-hero__meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:2.25rem;
}
.page-faq .faq-hero__live{
  width:8px;height:8px;border-radius:50%;background:var(--accent-green);
  box-shadow:0 0 0 0 rgba(0,255,136,.5);animation:faqPulse 2s infinite;
}
@keyframes faqPulse{
  0%{box-shadow:0 0 0 0 rgba(0,255,136,.4)}
  70%{box-shadow:0 0 0 8px rgba(0,255,136,0)}
  100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}
}
.page-faq .faq-hero__grid{
  display:grid;grid-template-columns:1fr;gap:26px;
}
@media (min-width:760px){
  .page-faq .faq-hero__grid{
    grid-template-columns:minmax(0,1fr) 240px;
    gap:clamp(24px,4vw,56px);
    align-items:end;
  }
}
.page-faq .faq-hero h1{
  font-family:var(--font-serif);
  font-size:clamp(2rem,6vw,3.25rem);
  line-height:1.14;letter-spacing:.01em;
  font-weight:700;margin:0 0 18px;
  display:inline-block;position:relative;padding-bottom:12px;
}
.page-faq .faq-hero h1::after{
  content:"";position:absolute;left:0;bottom:0;
  width:76px;height:4px;background:var(--accent-orange);
}
.page-faq .faq-hero .lead{
  color:var(--ink-soft);
  font-size:15px;line-height:1.8;
  max-width:640px;margin:0;
}
.page-faq .faq-hero__aside{
  display:flex;justify-content:space-between;gap:18px;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  padding:18px 0 16px;
}
@media (min-width:760px){
  .page-faq .faq-hero__aside{
    flex-direction:column;border:0;padding:0;
    border-left:2px solid var(--accent-orange);
    padding-left:20px;
  }
}
.page-faq .faq-hero__index{
  display:flex;align-items:center;gap:14px;
}
.page-faq .faq-hero__index-no{
  font-family:var(--font-serif);
  font-size:clamp(3rem,8vw,4.75rem);line-height:1;
  color:var(--accent-orange);font-weight:700;
}
.page-faq .faq-hero__index-label{
  font-size:14px;line-height:1.6;color:var(--ink-soft);letter-spacing:.06em;
}
.page-faq .faq-hero__stats{
  display:grid;gap:8px;
}
.page-faq .faq-hero__stat{
  display:flex;flex-direction:column;
}
.page-faq .faq-hero__stat-value{
  font-family:var(--font-mono);font-size:17px;color:var(--accent-green);font-weight:600;
}
.page-faq .faq-hero__stat-label{
  font-size:12px;color:var(--ink-dim);letter-spacing:.04em;
}

/* ===== search ===== */
.page-faq .faq-search{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  max-width:640px;
}
.page-faq .faq-search__label{
  display:block;font-size:13px;color:var(--ink-dim);
  letter-spacing:.12em;margin-bottom:8px;
}
.page-faq .faq-search__field{
  position:relative;
}
.page-faq .faq-search__field::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--accent-green);z-index:1;
}
.page-faq .faq-search__icon{
  position:absolute;left:16px;top:50%;
  width:17px;height:17px;border:2px solid var(--ink-soft);
  border-radius:50%;transform:translateY(-62%);pointer-events:none;
}
.page-faq .faq-search__icon::after{
  content:"";position:absolute;right:-7px;bottom:-3px;
  width:8px;height:2px;background:var(--ink-soft);
  transform:rotate(45deg);
}
.page-faq .faq-search input{
  width:100%;background:var(--bg-space);
  border:1px solid var(--line-light);border-left:0;
  border-radius:0;padding:16px 18px 16px 46px;
  font-family:var(--font-sans);font-size:15px;
  color:var(--ink-bold);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.page-faq .faq-search input::placeholder{color:var(--ink-dim);}
.page-faq .faq-search input:focus{
  border-color:var(--line-green);
  box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

/* ===== tags ===== */
.page-faq .faq-hero__tags{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;
}
.page-faq .faq-hero__tags .tag{
  color:var(--ink-soft);border-color:var(--line-light);
  background:transparent;text-decoration:none;
  padding:7px 14px;font-size:13px;transition:all .2s;
}
.page-faq .faq-hero__tags .tag:hover{
  color:var(--accent-green);border-color:var(--line-green);
}
.page-faq .faq-hero__tags .tag--green{
  border-color:var(--line-green);color:var(--accent-green);
}

/* ===== route ===== */
.page-faq .faq-route{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:20px;border-top:1px solid var(--line-light);
}
.page-faq .faq-route__item{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink-soft);text-decoration:none;font-size:14px;
  padding:5px 0; transition:color .2s;
}
.page-faq .faq-route__no{
  font-family:var(--font-mono);font-size:12px;
  color:var(--accent-orange);
  border:1px solid rgba(255,107,53,.4);
  padding:2px 8px;
}
.page-faq .faq-route__item:hover{color:var(--accent-green);}

/* ===== layout: rail + main ===== */
.page-faq .faq-layout{
  display:grid;grid-template-columns:1fr;gap:30px;
  padding-top:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
@media (min-width:960px){
  .page-faq .faq-layout{
    grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    gap:clamp(34px,5vw,72px);
    align-items:start;
  }
}
.page-faq .faq-rail__inner{
  border:1px solid var(--line-light);
  background:var(--bg-panel);
  padding:22px 20px;
}
@media (min-width:960px){
  .page-faq .faq-rail__inner{
    position:sticky;top:120px;
  }
}
.page-faq .faq-rail__eyebrow{
  display:inline-block;
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:.16em;color:var(--accent-orange);
  text-transform:uppercase;margin-bottom:8px;
}
.page-faq .faq-rail__title{
  font-family:var(--font-serif);font-size:24px;
  font-weight:700;margin:0 0 4px;color:var(--ink-bold);
}
.page-faq .faq-rail__sub{
  font-size:13px;color:var(--ink-dim);margin:0 0 18px;
}
.page-faq .faq-rail__nav{
  display:grid;grid-template-columns:1fr;gap:0;
}
@media (max-width:959px){
  .page-faq .faq-rail__nav{
    grid-template-columns:repeat(2,1fr);gap:8px;
  }
}
.page-faq .faq-rail__link{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 10px;
  color:var(--ink-soft);text-decoration:none;
  font-size:14px;border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s,color .2s,padding-left .2s;
}
.page-faq .faq-rail__link:hover{
  color:var(--accent-green);
  background:rgba(0,255,136,.05);
  padding-left:14px;
}
.page-faq .faq-rail__link-main{
  display:flex;align-items:center;gap:10px;
}
.page-faq .faq-rail__no{
  font-family:var(--font-mono);font-size:11px;
  color:var(--accent-orange);
  border:1px solid rgba(255,107,53,.35);
  padding:1px 5px;
}
.page-faq .faq-rail__count{
  font-size:12px;color:var(--ink-dim);
  font-family:var(--font-mono);white-space:nowrap;
}
@media (max-width:959px){
  .page-faq .faq-rail__link{
    flex-direction:column;align-items:flex-start;
    padding:13px 12px;border:1px solid var(--line-light);
    background:var(--bg-space);
  }
  .page-faq .faq-rail__count{font-size:11px;}
}
.page-faq .faq-rail__legend{
  margin-top:20px;padding-top:16px;
  border-top:1px dashed rgba(255,255,255,.14);
  display:grid;gap:6px;
}

/* ===== faq groups ===== */
.page-faq .faq-main{
  min-width:0;
}
.page-faq .faq-group{
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.page-faq .faq-group__title{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:12px;margin-bottom:18px;
  border-bottom:2px solid var(--accent-orange);
}
.page-faq .faq-group__no{
  font-family:var(--font-mono);font-size:14px;
  font-weight:500;color:var(--accent-orange);
}
.page-faq .faq-group__name{
  font-family:var(--font-serif);font-size:25px;font-weight:700;
  color:var(--ink-bold);letter-spacing:.02em;
}
@media (max-width:480px){
  .page-faq .faq-group__name{font-size:21px;}
}

/* ===== details items ===== */
.page-faq .faq-item{
  border-left:2px solid var(--line-green);
  background:var(--bg-space);
  margin-bottom:12px;
  transition:border-color .2s;
}
.page-faq .faq-item[open]{
  border-left-color:var(--accent-green);
}
.page-faq .faq-item summary{
  display:flex;align-items:center;gap:12px;
  list-style:none;cursor:pointer;
  padding:16px 18px 16px 20px;
  font-size:15px;font-weight:500;color:var(--ink-bold);
  transition:background .2s;
}
.page-faq .faq-item summary::-webkit-details-marker{display:none;}
.page-faq .faq-item summary:hover{
  background:rgba(0,255,136,.05);
}
.page-faq .faq-item summary:focus-visible{
  outline:2px solid var(--accent-green);outline-offset:-2px;
}
.page-faq .faq-item[open] summary{
  background:rgba(0,255,136,.06);
}
.page-faq .faq-item__no{
  font-family:var(--font-mono);font-size:12px;
  color:var(--accent-orange);
  border:1px solid rgba(255,107,53,.4);
  padding:3px 7px;white-space:nowrap;flex-shrink:0;
}
.page-faq .faq-item__text{
  line-height:1.5;flex:1;
}
.page-faq .faq-item__icon{
  margin-left:auto;position:relative;
  width:14px;height:14px;flex-shrink:0;
}
.page-faq .faq-item__icon::before,
.page-faq .faq-item__icon::after{
  content:"";position:absolute;background:var(--accent-green);
  transition:transform .25s var(--ease),opacity .25s;
}
.page-faq .faq-item__icon::before{
  top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
}
.page-faq .faq-item__icon::after{
  left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
}
.page-faq .faq-item[open] .faq-item__icon::after{
  transform:translateX(-50%) scaleY(0);opacity:0;
}
.page-faq .faq-item__body{
  padding:14px 20px 20px;
  border-top:1px dashed rgba(255,255,255,.12);
  color:var(--ink-soft);font-size:14px;line-height:1.75;
}
.page-faq .faq-item__body p{
  margin:0;
}

/* ===== featured ===== */
.page-faq .faq-feature{
  padding-top:clamp(1.5rem,4vw,2.5rem);
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.page-faq .faq-feature__head{
  display:flex;align-items:center;gap:18px;
  margin-bottom:26px;
}
.page-faq .faq-feature__no,
.page-faq .faq-support__no{
  font-family:var(--font-mono);font-size:14px;
  color:var(--accent-orange);
  border:1px solid rgba(255,107,53,.4);
  padding:4px 10px;
  align-self:flex-start;
}
.page-faq .faq-feature__title{
  font-family:var(--font-serif);font-size:clamp(26px,4vw,34px);
  font-weight:700;margin:0 0 4px;color:var(--ink-bold);
}
.page-faq .faq-feature__lead{
  font-size:14px;color:var(--ink-dim);margin:0;
}
.page-faq .faq-feature__grid{
  display:grid;grid-template-columns:1fr;gap:26px;
}
@media (min-width:900px){
  .page-faq .faq-feature__grid{
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
    align-items:center;
    gap:clamp(28px,5vw,64px);
  }
}
.page-faq .faq-pop{
  background:linear-gradient(135deg,var(--bg-space),rgba(26,42,74,.55));
  border:1px solid var(--line-light);
  border-top:3px solid var(--accent-orange);
  padding:20px 22px;margin-bottom:14px;
  transition:transform .25s var(--ease),border-color .25s;
}
.page-faq .faq-pop:hover{
  transform:translateY(-3px);
  border-color:var(--line-green);
}
.page-faq .faq-pop__rank{
  display:inline-block;
  font-family:var(--font-mono);font-size:12px;
  color:var(--accent-green);
  border:1px solid var(--line-green);
  padding:2px 8px;
}
.page-faq .faq-pop h3{
  font-family:var(--font-serif);font-size:19px;
  font-weight:700;color:var(--ink-bold);
  margin:14px 0 8px;line-height:1.45;
}
.page-faq .faq-pop p{
  font-size:14px;line-height:1.7;color:var(--ink-soft);
  margin:0 0 14px;
}
.page-faq .faq-pop__link{
  font-size:14px;color:var(--accent-orange);
  text-decoration:none;transition:color .2s;
}
.page-faq .faq-pop__link:hover{color:var(--accent-green);}

/* ===== figure ===== */
.page-faq .faq-feature__figure{
  margin:0;border:1px solid var(--line-light);
  background:var(--bg-space);
}
.page-faq .faq-feature__figure img{
  display:block;width:100%;height:auto;
  aspect-ratio:5/4;object-fit:cover;
}
.page-faq .faq-feature__caption{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  font-family:var(--font-mono);font-size:12px;
  color:var(--ink-dim);
  border-top:1px solid var(--line-light);
}
.page-faq .faq-feature__caption-no{
  color:var(--accent-orange);
}

/* ===== support section ===== */
.page-faq .faq-support{
  background:var(--bg-surface);
  color:var(--ink-deep);
  padding-top:clamp(3rem,6vw,4.5rem);
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.page-faq .faq-support__head{
  display:flex;gap:18px;align-items:flex-start;
  margin-bottom:26px;
}
.page-faq .faq-support__title{
  font-family:var(--font-serif);
  font-size:clamp(28px,4vw,36px);font-weight:700;
  margin:0 0 6px;color:var(--ink-deep);
}
.page-faq .faq-support__lead{
  font-size:15px;color:rgba(10,17,40,.7);
  margin:0;max-width:520px;line-height:1.7;
}
.page-faq .faq-support__grid{
  display:grid;grid-template-columns:1fr;gap:28px;
  margin-top:26px;
}
@media (min-width:900px){
  .page-faq .faq-support__grid{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:clamp(32px,6vw,72px);
    align-items:center;
  }
}
.page-faq .faq-support__panel{
  background:#fff;
  border:1px solid rgba(10,17,40,.12);
  padding:clamp(20px,3vw,32px);
  position:relative;
}
.page-faq .faq-support__panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--accent-orange);
}
.page-faq .faq-support__panel-item{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px dashed rgba(10,17,40,.14);
}
.page-faq .faq-support__panel-icon{
  width:44px;height:44px;flex-shrink:0;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;letter-spacing:.04em;
  background:var(--bg-space);color:var(--ink-bold);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.page-faq .faq-support__panel-label{
  display:block;font-size:12px;
  color:rgba(10,17,40,.55);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:3px;
}
.page-faq .faq-support__panel-value{
  font-size:15px;font-weight:600;color:var(--ink-deep);
  word-break:break-all;
}
.page-faq .faq-support__note{
  margin:18px 0 0;
  font-size:14px;line-height:1.7;
  color:rgba(10,17,40,.72);
  padding:14px 16px;
  background:rgba(0,255,136,.08);
  border-left:3px solid var(--accent-green);
}
.page-faq .faq-support__actions{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:22px;
}
.page-faq .faq-support__actions .btn--orange{
  background:var(--accent-orange);color:#fff;
  border:1px solid var(--accent-orange);
}
.page-faq .faq-support__actions .btn--ghost{
  border:1px solid rgba(10,17,40,.35);
  color:var(--ink-deep);background:transparent;
}
.page-faq .faq-support__figure{
  margin:0;
}
.page-faq .faq-support__figure img{
  display:block;width:100%;max-width:300px;height:auto;
  aspect-ratio:1/1;object-fit:cover;
  margin-left:auto;margin-right:auto;
  border:1px solid rgba(10,17,40,.14);
  background:var(--bg-space);
}
@media (min-width:900px){
  .page-faq .faq-support__figure img{
    margin:0 auto;
  }
}

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