.page-faq {
  --faq-soft: #c8d5ec;
  --faq-faint: rgba(200, 213, 236, 0.72);
  --faq-panel-bg: rgba(13, 23, 48, 0.88);
  --faq-card-bg: rgba(26, 34, 51, 0.72);
  --faq-grid-line: rgba(143, 163, 200, 0.12);
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 88% 8%, rgba(30, 107, 255, 0.22), transparent 34rem),
    radial-gradient(circle at 8% 44%, rgba(255, 90, 31, 0.08), transparent 26rem),
    var(--c-ink);
  color: var(--c-white);
}

.page-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--faq-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--faq-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 55%);
}

.page-faq > * {
  position: relative;
  z-index: 1;
}

.page-faq .faq-hero {
  position: relative;
  padding: clamp(20px, 4vw, 44px) 0 clamp(36px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 8%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57, 215, 255, 0.5), transparent);
  transform: rotate(-12deg);
  pointer-events: none;
}

.page-faq .faq-hero__grid {
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
}

.page-faq .faq-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.page-faq .faq-hero__copy h1 {
  margin: 16px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 13ch;
}

.page-faq .faq-hero__copy .lede {
  max-width: 58ch;
  color: var(--faq-soft);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-faq .faq-hero__panel {
  position: relative;
  align-self: stretch;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(13, 23, 48, 0.96), rgba(7, 11, 20, 0.9));
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.page-faq .faq-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--c-orange);
}

.page-faq .faq-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  color: var(--c-mist);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .faq-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-lime);
  box-shadow: 0 0 0 5px rgba(183, 255, 60, 0.1);
  flex: none;
}

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

.page-faq .faq-panel__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .faq-panel__list .mono {
  color: var(--c-orange);
  font-size: 12px;
  line-height: 1.5;
}

.page-faq .faq-panel__list strong {
  display: block;
  color: var(--c-white);
  font-size: 15px;
  line-height: 1.4;
}

.page-faq .faq-panel__list p {
  margin: 4px 0 0;
  color: var(--faq-soft);
  font-size: 13px;
  line-height: 1.55;
}

.page-faq .faq-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--line);
}

.page-faq .faq-panel__stat {
  min-width: 0;
  padding: 12px 10px;
  background: rgba(7, 11, 20, 0.82);
}

.page-faq .faq-panel__num {
  display: block;
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1;
}

.page-faq .faq-panel__stat span:last-child {
  display: block;
  margin-top: 6px;
  color: var(--faq-soft);
  font-size: 11px;
  line-height: 1.45;
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

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

.page-faq .faq-rail__label {
  margin: 0 0 12px;
  color: var(--c-orange);
  font-size: 11px;
  letter-spacing: 0.14em;
}

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

.page-faq .faq-rail__link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-left: -1px;
  padding: 8px 0 8px 12px;
  border-left: 2px solid transparent;
  color: var(--faq-soft);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  border-left-color: var(--c-orange);
  background: linear-gradient(90deg, rgba(255, 90, 31, 0.12), transparent);
  color: var(--c-white);
}

.page-faq .faq-rail__num {
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-faq .faq-rail__meter {
  height: 46px;
  margin: 18px 0;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px);
  opacity: 0.7;
}

.page-faq .faq-rail__help {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--c-white);
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.page-faq .faq-rail__help:hover,
.page-faq .faq-rail__help:focus-visible {
  border-color: rgba(255, 90, 31, 0.62);
  background: rgba(26, 34, 51, 0.9);
}

.page-faq .faq-rail__help .mono {
  display: block;
  margin-bottom: 6px;
  color: var(--c-orange);
  font-size: 11px;
}

.page-faq .faq-track {
  min-width: 0;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}

.page-faq .faq-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line-strong);
}

.page-faq .faq-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.page-faq .faq-section__index {
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 90, 31, 0.4);
  color: var(--c-orange);
  font-size: 12px;
  line-height: 1;
}

.page-faq .faq-section__title {
  margin: 0;
  color: var(--c-white);
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-faq .faq-section__intro {
  max-width: 64ch;
  margin: 10px 0 0;
  color: var(--faq-soft);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
}

.page-faq .faq-steps {
  display: grid;
  gap: 12px;
}

.page-faq .faq-step {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(26, 34, 51, 0.78), rgba(13, 23, 48, 0.55));
}

.page-faq .faq-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 42px;
  background: var(--c-blue);
}

.page-faq .faq-step__num {
  display: block;
  margin-bottom: 10px;
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .faq-step h3 {
  margin: 0 0 8px;
  color: var(--c-white);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.3;
}

.page-faq .faq-step p {
  margin: 0;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-faq .faq-step p a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-step .mono {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--c-mist);
  font-size: 11px;
  line-height: 1.5;
}

.page-faq .faq-figure {
  margin: 24px 0 0;
  border: 1px solid var(--line);
  background: var(--surface-deep);
}

.page-faq .faq-figure .figure__media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1730, #070b14);
}

.page-faq .faq-figure .figure__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(57, 215, 255, 0.045) 5px 6px);
  pointer-events: none;
}

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

.page-faq .faq-figure .figure__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--c-mist);
  font-size: 12px;
  line-height: 1.6;
}

.page-faq .faq-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: faq-check;
}

.page-faq .faq-checks > li {
  position: relative;
  min-width: 0;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line);
  background: rgba(13, 23, 48, 0.55);
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
  counter-increment: faq-check;
}

.page-faq .faq-checks > li::before {
  content: counter(faq-check, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--c-orange);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-faq .faq-checks strong {
  color: var(--c-white);
}

.page-faq .faq-checks--compact > li {
  background: rgba(13, 23, 48, 0.42);
}

.page-faq .faq-note {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--c-cyan);
  background: rgba(30, 107, 255, 0.1);
  color: var(--faq-soft);
  font-size: 14px;
  line-height: 1.7;
}

.page-faq .faq-note strong {
  color: var(--c-white);
}

.page-faq .faq-note a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.page-faq .faq-route > li {
  position: relative;
  min-width: 0;
  padding: 0 0 22px 34px;
}

.page-faq .faq-route > li::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: -6px;
  left: 9px;
  width: 1px;
  background: linear-gradient(var(--c-blue), rgba(30, 107, 255, 0.05));
}

.page-faq .faq-route > li::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--c-blue);
  border-radius: 50%;
  background: var(--c-ink);
}

.page-faq .faq-route > li:last-child {
  padding-bottom: 0;
}

.page-faq .faq-route > li:last-child::before {
  bottom: auto;
  height: 20px;
}

.page-faq .faq-route h3 {
  margin: 0 0 6px;
  color: var(--c-white);
  font-size: 16px;
  line-height: 1.4;
}

.page-faq .faq-route p {
  margin: 0;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-faq .faq-route .mono {
  display: block;
  margin-top: 6px;
  color: var(--c-cyan);
  font-size: 11px;
  line-height: 1.5;
}

.page-faq .faq-query-board {
  border: 1px solid var(--line-strong);
  background: var(--surface-deep);
}

.page-faq .faq-query__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-query__row:last-child {
  border-bottom: 0;
}

.page-faq .faq-query__label {
  color: var(--c-orange);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .faq-query__body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.page-faq .faq-query__text {
  color: var(--faq-soft);
  font-size: 14px;
  line-height: 1.6;
}

.page-faq .faq-mobile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

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

.page-faq .faq-device {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 23, 48, 0.8), rgba(7, 11, 20, 0.92));
}

.page-faq .faq-device img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.page-faq .faq-device figcaption {
  margin-top: 10px;
  color: var(--c-mist);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.page-faq .faq-accordion {
  display: grid;
  gap: 10px;
}

.page-faq .faq-item {
  border: 1px solid var(--line);
  background: rgba(13, 23, 48, 0.55);
}

.page-faq .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  color: var(--c-white);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--c-orange);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
}

.page-faq .faq-item[open] summary::after {
  content: "−";
}

.page-faq .faq-item[open] summary {
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-item__body {
  padding: 14px 16px 16px;
}

.page-faq .faq-item__body ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.75;
}

.page-faq .faq-item__body a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-contact {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 90, 31, 0.55);
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.14), rgba(13, 23, 48, 0.9) 55%);
}

.page-faq .faq-contact__eyebrow {
  margin: 0 0 10px;
  color: var(--c-orange);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.page-faq .faq-contact__lead {
  max-width: 60ch;
  margin: 0;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-faq .faq-contact__channels {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.page-faq .faq-contact__channel {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
}

.page-faq .faq-contact__key {
  color: var(--c-orange);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.page-faq .faq-contact__val {
  color: var(--c-white);
  overflow-wrap: anywhere;
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (min-width: 760px) {
  .page-faq .faq-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-query__row {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-mobile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
  }

  .page-faq .faq-device {
    justify-self: end;
    width: 100%;
    max-width: 340px;
  }

  .page-faq .faq-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .page-faq .faq-rail {
    position: sticky;
    top: calc(var(--header-h) + 18px);
    align-self: start;
  }
}

@media (max-width: 480px) {
  .page-faq .faq-section__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .page-faq .faq-section__index {
    justify-self: start;
    width: max-content;
    margin-top: 0;
  }

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

  .page-faq .faq-hero__panel {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-rail__link,
  .page-faq .faq-rail__help {
    transition: none;
  }
}


<main id="main-content" class="page-faq">
  <section class="faq-hero" aria-labelledby="faq-title">
    <div class="shell">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">主页导航</a></li>
          <li class="breadcrumb__item"><span class="breadcrumb__current">使用教程</span></li>
        </ol>
      </nav>

      <div class="faq-hero__grid grid-12">
        <div class="faq-hero__copy col-7">
          <p class="eyebrow">操作指引 / 2025.06 批次</p>
          <h1 id="faq-title">登录、换设备、找公告，沿着同一条路线操作</h1>
          <p class="lede">遇到登录入口找不到、换设备后栏目位置变了、检索不出想要的公告，先从这条操作路线走一遍。极速彩中心把检索固定在顶部，把常设栏目放在第二屏，按场景操作就能快速回到资讯榜单或服务导览。</p>
          <div class="faq-hero__actions">
            <a class="btn btn--primary" href="#quick-start">从三步开始</a>
            <a class="btn btn--line" href="/notes/">查看资讯榜单</a>
          </div>
        </div>

        <aside class="faq-hero__panel col-5" aria-label="常用操作入口摘要">
          <div class="faq-panel__top">
            <span class="mono">PATH STATUS / 入口状态</span>
            <span class="faq-panel__dot" aria-hidden="true"></span>
          </div>
          <ul class="faq-panel__list">
            <li>
              <span class="mono">01</span>
              <div>
                <strong>顶部检索</strong>
                <p>栏目、批次、关键词都可以直接查。</p>
              </div>
            </li>
            <li>
              <span class="mono">02</span>
              <div>
                <strong>第二屏栏目轨道</strong>
                <p>产品线、资讯榜单、常见说明、服务公告集中在一处。</p>
              </div>
            </li>
            <li>
              <span class="mono">03</span>
              <div>
                <strong>目标栏目</strong>
                <p>查公告去资讯榜单，查版本与下载去服务导览。</p>
              </div>
            </li>
          </ul>
          <div class="faq-panel__stats">
            <div class="faq-panel__stat">
              <span class="faq-panel__num">98%</span>
              <span>主流机型适配</span>
            </div>
            <div class="faq-panel__stat">
              <span class="faq-panel__num">1.8万</span>
              <span>日均检索使用</span>
            </div>
            <div class="faq-panel__stat">
              <span class="faq-panel__num">12</span>
              <span>常设栏目</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <div class="shell faq-layout">
    <aside class="faq-rail" aria-label="教程目录">
      <p class="faq-rail__label mono">INDEX / 操作索引</p>
      <nav class="faq-rail__nav">
        <ol class="faq-rail__list">
          <li><a class="faq-rail__link" href="#quick-start"><span class="faq-rail__num">01</span><span>三步找到内容</span></a></li>
          <li><a class="faq-rail__link" href="#account"><span class="faq-rail__num">02</span><span>登录与状态确认</span></a></li>
          <li><a class="faq-rail__link" href="#switch-device"><span class="faq-rail__num">03</span><span>换设备找回入口</span></a></li>
          <li><a class="faq-rail__link" href="#search"><span class="faq-rail__num">04</span><span>检索与筛选</span></a></li>
          <li><a class="faq-rail__link" href="#mobile"><span class="faq-rail__num">05</span><span>手机与平板使用</span></a></li>
          <li><a class="faq-rail__link" href="#troubleshoot"><span class="faq-rail__num">06</span><span>常见问题排查</span></a></li>
          <li><a class="faq-rail__link" href="#before-contact"><span class="faq-rail__num">07</span><span>联系前准备</span></a></li>
        </ol>
      </nav>
      <div class="faq-rail__meter" aria-hidden="true"></div>
      <a class="faq-rail__help" href="/connect/"><span class="mono">HELP</span>需要人工协助？进入联系通道</a>
    </aside>

    <div class="faq-track">
      <section class="faq-section" id="quick-start" aria-labelledby="quick-start-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">01</span>
          <div>
            <h2 class="faq-section__title" id="quick-start-title">先认准三个位置，之后都不容易走散</h2>
            <p class="faq-section__intro">从主页开始，先把浏览器的位置认准，再决定去服务导览还是资讯榜单。三步足够覆盖大多数首次使用场景。</p>
          </div>
        </div>

        <div class="faq-steps">
          <article class="faq-step">
            <span class="faq-step__num">STEP 01</span>
            <h3>顶部检索先定位</h3>
            <p>在任意栏目页，顶部命令栏右侧都有检索按钮。输入记得的栏目名、批次号或关键词，检索框展开后会列出热门标签，点选即可跳到相关内容。</p>
            <span class="mono">路径：顶部命令栏 → 检索</span>
          </article>
          <article class="faq-step">
            <span class="faq-step__num">STEP 02</span>
            <h3>第二屏看栏目轨道</h3>
            <p>回到主页向下滚动一屏，就能看到横向排列的栏目轨道。产品线、资讯榜单、常见说明、服务公告各有独立入口，卡片上带有栏目编号。</p>
            <span class="mono">路径：主页 → 第二屏栏目轨道</span>
          </article>
          <article class="faq-step">
            <span class="faq-step__num">STEP 03</span>
            <h3>按目的进入目标栏目</h3>
            <p>要查版本和下载，去<a href="/download/">服务导览</a>；要看批次公告和榜单，去<a href="/notes/">资讯榜单</a>；不确定时先检索，命中后再进入对应栏目。</p>
            <span class="mono">路径：栏目轨道 → 服务导览 / 资讯榜单</span>
          </article>
        </div>

        <figure class="faq-figure">
          <div class="figure__media">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="三步操作路线图：顶部检索、第二屏栏目轨道与目标栏目由电光蓝线条串联，关键节点用橙色标记">
          </div>
          <figcaption class="figure__caption">
            <span>从检索到栏目轨道，再到目标页面</span>
            <span class="mono">ROUTE / 01-02-03</span>
          </figcaption>
        </figure>
      </section>

      <section class="faq-section" id="account" aria-labelledby="account-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">02</span>
          <div>
            <h2 class="faq-section__title" id="account-title">登录入口与状态确认</h2>
            <p class="faq-section__intro">登录问题通常来自入口找错、账号切换或浏览器保留了旧状态。按下面顺序确认，大多数情况都能自己处理。</p>
          </div>
        </div>

        <ol class="faq-checks">
          <li><strong>找到登录区。</strong>桌面端在顶部命令栏右侧，紧邻检索按钮；手机端收起在菜单展开层内，展开后再点登录。</li>
          <li><strong>看状态提示。</strong>登录后顶部会显示当前账号状态。如果仍显示未登录，先刷新页面，再检查是否在另一个标签页退出了账号。</li>
          <li><strong>切换账号先退出。</strong>不要在同一页面反复提交，先退出当前账号，再重新登录，避免浏览器沿用旧登录信息。</li>
        </ol>

        <p class="faq-note"><strong>提示：</strong>如果页面提示账号状态异常，先确认网络连接和系统时间是否正常，再换一个浏览器重试。仍然无法登录时，从<a href="/connect/">联系通道</a>说明设备类型和看到的状态提示。</p>
      </section>

      <section class="faq-section" id="switch-device" aria-labelledby="switch-device-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">03</span>
          <div>
            <h2 class="faq-section__title" id="switch-device-title">换设备后，沿原路回到资讯榜单</h2>
            <p class="faq-section__intro">换手机或平板后重新登录，最省时间的做法不是从历史记录里翻，而是走回固定检索和第二屏栏目轨道。四个步骤就能接上之前的阅读。</p>
          </div>
        </div>

        <ol class="faq-route">
          <li>
            <h3>打开主页，确认顶部检索</h3>
            <p>新设备上先进入主页，顶部命令栏的位置与原来一致，检索按钮仍在右侧。</p>
            <span class="mono">PATH / HOME → SEARCH</span>
          </li>
          <li>
            <h3>输入批次号或栏目名</h3>
            <p>记得批次就输入批次号，例如 2025.06；不记得批次，就输入“资讯榜单”“服务公告”这类栏目词。</p>
            <span class="mono">QUERY / 2025.06 或栏目关键词</span>
          </li>
          <li>
            <h3>进入资讯榜单按标签筛选</h3>
            <p>检索结果中出现资讯榜单入口后，进入列表页，用榜单发布、产品线更新、常见说明、服务公告、专题观察五类标签缩小范围。</p>
            <span class="mono">PATH / SEARCH → NOTES</span>
          </li>
          <li>
            <h3>把常用入口加入浏览器书签</h3>
            <p>下次直接打开资讯榜单或服务导览，不用再搜索。换设备时登录同一账号，阅读记录和入口位置更容易接上。</p>
            <span class="mono">PATH / NOTES → BOOKMARK</span>
          </li>
        </ol>
      </section>

      <section class="faq-section" id="search" aria-labelledby="search-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">04</span>
          <div>
            <h2 class="faq-section__title" id="search-title">检索与筛选的组合用法</h2>
            <p class="faq-section__intro">检索框适合找关键词，批次标签适合缩范围，分类筛选适合在结果里继续收窄。三种方式组合起来，比输入一整句长描述更快。</p>
          </div>
        </div>

        <div class="faq-query-board">
          <div class="faq-query">
            <div class="faq-query__row">
              <span class="faq-query__label mono">组合 A</span>
              <div class="faq-query__body">
                <span class="faq-query__text">找某个批次的公告：</span>
                <span class="chip chip--blue">2025.06</span>
                <span class="chip chip--orange">服务公告</span>
              </div>
            </div>
            <div class="faq-query__row">
              <span class="faq-query__label mono">组合 B</span>
              <div class="faq-query__body">
                <span class="faq-query__text">找产品线更新：</span>
                <span class="chip chip--blue">产品线</span>
                <span class="chip chip--cyan">产品线更新</span>
                <span class="chip chip--lime">按季度浏览</span>
              </div>
            </div>
            <div class="faq-query__row">
              <span class="faq-query__label mono">组合 C</span>
              <div class="faq-query__body">
                <span class="faq-query__text">只记得一个短词：</span>
                <span class="chip chip--blue">登录</span>
                <span class="chip chip--blue">版本更新</span>
                <span class="chip chip--magenta">再选批次缩小范围</span>
              </div>
            </div>
          </div>
        </div>

        <p class="faq-note"><strong>操作顺序：</strong>先在顶部检索输入短词，结果过多时再到<a href="/notes/">资讯榜单</a>页用批次标签和分类筛选收窄。筛选后先看相对时间最近的条目，再逐条展开阅读。</p>
      </section>

      <section class="faq-section" id="mobile" aria-labelledby="mobile-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">05</span>
          <div>
            <h2 class="faq-section__title" id="mobile-title">手机与平板上的操作要点</h2>
            <p class="faq-section__intro">窄屏下顶部导航会收为菜单按钮，检索入口仍在栏内；第二屏栏目轨道改为横向滑动，页面底部提供目录和返回顶部。移动端适配覆盖 98% 主流机型。</p>
          </div>
        </div>

        <div class="faq-mobile-grid">
          <div class="faq-mobile__copy">
            <ul class="faq-checks faq-checks--compact">
              <li><strong>顶部检索按钮：</strong>在菜单按钮旁边，点开后输入关键词；检索面板会从顶部下方展开，不遮挡当前阅读位置。</li>
              <li><strong>第二屏栏目轨道：</strong>左右滑动查看全部栏目，卡片上的编号和名称保持固定层级，不会因为滑动而改变位置。</li>
              <li><strong>底部目录与返回顶部：</strong>长教程页面滑到下方后，通过底部目录回看章节，或点返回顶部回到检索入口附近。</li>
              <li><strong>显示不全时：</strong>优先保持竖屏，确认浏览器已更新；宽图或长列表可横屏查看，再切回竖屏继续阅读。</li>
            </ul>
          </div>
          <figure class="faq-device">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="手机界面局部示意：顶部检索按钮与横向栏目轨道在窄屏中的排列方式" loading="lazy" decoding="async">
            <figcaption class="mono">MOBILE / 顶部检索 + 栏目轨道</figcaption>
          </figure>
        </div>
      </section>

      <section class="faq-section" id="troubleshoot" aria-labelledby="troubleshoot-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">06</span>
          <div>
            <h2 class="faq-section__title" id="troubleshoot-title">常见问题，按顺序排查</h2>
            <p class="faq-section__intro">下面四类问题出现频率最高。每一项都给出先做什么、再做什么，展开后照着顺序操作即可。</p>
          </div>
        </div>

        <div class="faq-accordion">
          <details class="faq-item">
            <summary>页面内容没有更新</summary>
            <div class="faq-item__body">
              <ol>
                <li>先下拉刷新当前页面，确认网络连接正常。</li>
                <li>关闭标签页重新打开，排除旧页面缓存。</li>
                <li>在顶部检索输入“2025.06”或对应栏目名，直接进入最新批次内容。</li>
                <li>仍然显示旧内容时，清理浏览器缓存后再访问。</li>
              </ol>
            </div>
          </details>
          <details class="faq-item">
            <summary>检索不到想要的公告</summary>
            <div class="faq-item__body">
              <ol>
                <li>缩短关键词，只保留两到四个字，例如“登录”“版本更新”。</li>
                <li>去掉空格、标点和长句，改用栏目名重新检索。</li>
                <li>清空已选标签后重新搜索，确认不是筛选条件过窄。</li>
                <li>直接进入<a href="/notes/">资讯榜单</a>，按批次和分类逐层浏览。</li>
              </ol>
            </div>
          </details>
          <details class="faq-item">
            <summary>登录状态突然丢失</summary>
            <div class="faq-item__body">
              <ol>
                <li>确认当前页面是否在另一个标签页退出了账号。</li>
                <li>检查浏览器是否允许保存站点数据，关闭无痕模式后重试。</li>
                <li>换一个浏览器重新登录，排除单个浏览器的状态问题。</li>
                <li>仍然无法保持登录时，记录设备类型和提示文字，进入<a href="/connect/">联系通道</a>反馈。</li>
              </ol>
            </div>
          </details>
          <details class="faq-item">
            <summary>手机或平板上显示不全</summary>
            <div class="faq-item__body">
              <ol>
                <li>保持竖屏阅读正文，宽图和长列表可临时横屏查看。</li>
                <li>如果页面嵌在其他应用内，尝试用系统浏览器重新打开。</li>
                <li>更新系统浏览器到较新版本，再刷新页面。</li>
                <li>切换网络后重试，排除加载中断造成的显示缺失。</li>
              </ol>
            </div>
          </details>
        </div>
      </section>

      <section class="faq-section" id="before-contact" aria-labelledby="before-contact-title">
        <div class="faq-section__head">
          <span class="faq-section__index mono">07</span>
          <div>
            <h2 class="faq-section__title" id="before-contact-title">联系支持前，把这几项准备好</h2>
            <p class="faq-section__intro">把问题说清楚，客服就能更快定位。发邮件前准备好设备类型、访问路径、问题描述和出现时间，不需要发送密码等敏感信息。</p>
          </div>
        </div>

        <div class="faq-contact">
          <div>
            <p class="mono faq-contact__eyebrow">CONTACT / 客服与反馈</p>
            <p class="faq-contact__lead">客服邮箱适合处理登录、检索和移动端显示问题；合作咨询或一般事务可发送到联系邮箱。工作日 9:00–18:00 内回复。</p>
            <div class="faq-contact__channels">
              <div class="faq-contact__channel">
                <span class="faq-contact__key">客服邮箱</span>
                <span class="faq-contact__val">service@speed-color-ai.com.cn</span>
              </div>
              <div class="faq-contact__channel">
                <span class="faq-contact__key">联系邮箱</span>
                <span class="faq-contact__val">contact@speed-color-ai.com.cn</span>
              </div>
              <div class="faq-contact__channel">
                <span class="faq-contact__key">联系电话</span>
                <span class="faq-contact__val">400-9173-3323</span>
              </div>
            </div>
          </div>
          <div class="faq-contact__actions">
            <a class="btn btn--primary" href="/connect/">进入联系通道</a>
            <a class="btn btn--line" href="/privacy-center/">了解信息处理</a>
          </div>
        </div>

        <p class="faq-note"><strong>写反馈时建议附上：</strong>设备型号与系统版本、从哪个入口进入、检索词或批次标签、页面提示原文。截图可帮助定位，但请遮挡账号、手机号等个人信息。</p>
      </section>
    </div>
  </div>
</main>

.page-faq {
  --faq-soft: #c8d5ec;
  --faq-faint: rgba(200, 213, 236, 0.72);
  --faq-panel-bg: rgba(13, 23, 48, 0.88);
  --faq-card-bg: rgba(26, 34, 51, 0.72);
  --faq-grid-line: rgba(143, 163, 200, 0.12);
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 88% 8%, rgba(30, 107, 255, 0.22), transparent 34rem),
    radial-gradient(circle at 8% 44%, rgba(255, 90, 31, 0.08), transparent 26rem),
    var(--c-ink);
  color: var(--c-white);
}

.page-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--faq-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--faq-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 55%);
}

.page-faq > * {
  position: relative;
  z-index: 1;
}

.page-faq .faq-hero {
  position: relative;
  padding: clamp(20px, 4vw, 44px) 0 clamp(36px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 8%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(57, 215, 255, 0.5), transparent);
  transform: rotate(-12deg);
  pointer-events: none;
}

.page-faq .faq-hero__grid {
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
}

.page-faq .faq-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.page-faq .faq-hero__copy h1 {
  margin: 16px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 84px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 13ch;
}

.page-faq .faq-hero__copy .lede {
  max-width: 58ch;
  color: var(--faq-soft);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
}

.page-faq .faq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.page-faq .faq-hero__panel {
  position: relative;
  align-self: stretch;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(13, 23, 48, 0.96), rgba(7, 11, 20, 0.9));
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.page-faq .faq-hero__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--c-orange);
}

.page-faq .faq-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  color: var(--c-mist);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .faq-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-lime);
  box-shadow: 0 0 0 5px rgba(183, 255, 60, 0.1);
  flex: none;
}

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

.page-faq .faq-panel__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

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

.page-faq .faq-panel__list .mono {
  color: var(--c-orange);
  font-size: 12px;
  line-height: 1.5;
}

.page-faq .faq-panel__list strong {
  display: block;
  color: var(--c-white);
  font-size: 15px;
  line-height: 1.4;
}

.page-faq .faq-panel__list p {
  margin: 4px 0 0;
  color: var(--faq-soft);
  font-size: 13px;
  line-height: 1.55;
}

.page-faq .faq-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--line);
}

.page-faq .faq-panel__stat {
  min-width: 0;
  padding: 12px 10px;
  background: rgba(7, 11, 20, 0.82);
}

.page-faq .faq-panel__num {
  display: block;
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1;
}

.page-faq .faq-panel__stat span:last-child {
  display: block;
  margin-top: 6px;
  color: var(--faq-soft);
  font-size: 11px;
  line-height: 1.45;
}

.page-faq .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 40px);
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(48px, 8vw, 96px);
}

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

.page-faq .faq-rail__label {
  margin: 0 0 12px;
  color: var(--c-orange);
  font-size: 11px;
  letter-spacing: 0.14em;
}

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

.page-faq .faq-rail__link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-left: -1px;
  padding: 8px 0 8px 12px;
  border-left: 2px solid transparent;
  color: var(--faq-soft);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.page-faq .faq-rail__link:hover,
.page-faq .faq-rail__link:focus-visible {
  border-left-color: var(--c-orange);
  background: linear-gradient(90deg, rgba(255, 90, 31, 0.12), transparent);
  color: var(--c-white);
}

.page-faq .faq-rail__num {
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
}

.page-faq .faq-rail__meter {
  height: 46px;
  margin: 18px 0;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px);
  opacity: 0.7;
}

.page-faq .faq-rail__help {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--c-white);
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}

.page-faq .faq-rail__help:hover,
.page-faq .faq-rail__help:focus-visible {
  border-color: rgba(255, 90, 31, 0.62);
  background: rgba(26, 34, 51, 0.9);
}

.page-faq .faq-rail__help .mono {
  display: block;
  margin-bottom: 6px;
  color: var(--c-orange);
  font-size: 11px;
}

.page-faq .faq-track {
  min-width: 0;
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}

.page-faq .faq-section {
  scroll-margin-top: calc(var(--header-h) + 24px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line-strong);
}

.page-faq .faq-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.page-faq .faq-section__index {
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 90, 31, 0.4);
  color: var(--c-orange);
  font-size: 12px;
  line-height: 1;
}

.page-faq .faq-section__title {
  margin: 0;
  color: var(--c-white);
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-faq .faq-section__intro {
  max-width: 64ch;
  margin: 10px 0 0;
  color: var(--faq-soft);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
}

.page-faq .faq-steps {
  display: grid;
  gap: 12px;
}

.page-faq .faq-step {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(26, 34, 51, 0.78), rgba(13, 23, 48, 0.55));
}

.page-faq .faq-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 42px;
  background: var(--c-blue);
}

.page-faq .faq-step__num {
  display: block;
  margin-bottom: 10px;
  color: var(--c-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .faq-step h3 {
  margin: 0 0 8px;
  color: var(--c-white);
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.3;
}

.page-faq .faq-step p {
  margin: 0;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-faq .faq-step p a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-step .mono {
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--c-mist);
  font-size: 11px;
  line-height: 1.5;
}

.page-faq .faq-figure {
  margin: 24px 0 0;
  border: 1px solid var(--line);
  background: var(--surface-deep);
}

.page-faq .faq-figure .figure__media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1730, #070b14);
}

.page-faq .faq-figure .figure__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(57, 215, 255, 0.045) 5px 6px);
  pointer-events: none;
}

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

.page-faq .faq-figure .figure__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--c-mist);
  font-size: 12px;
  line-height: 1.6;
}

.page-faq .faq-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: faq-check;
}

.page-faq .faq-checks > li {
  position: relative;
  min-width: 0;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--line);
  background: rgba(13, 23, 48, 0.55);
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
  counter-increment: faq-check;
}

.page-faq .faq-checks > li::before {
  content: counter(faq-check, decimal-leading-zero);
  position: absolute;
  top: 14px;
  left: 14px;
  color: var(--c-orange);
  font-family: var(--font-mono);
  font-size: 12px;
}

.page-faq .faq-checks strong {
  color: var(--c-white);
}

.page-faq .faq-checks--compact > li {
  background: rgba(13, 23, 48, 0.42);
}

.page-faq .faq-note {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--c-cyan);
  background: rgba(30, 107, 255, 0.1);
  color: var(--faq-soft);
  font-size: 14px;
  line-height: 1.7;
}

.page-faq .faq-note strong {
  color: var(--c-white);
}

.page-faq .faq-note a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.page-faq .faq-route > li {
  position: relative;
  min-width: 0;
  padding: 0 0 22px 34px;
}

.page-faq .faq-route > li::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: -6px;
  left: 9px;
  width: 1px;
  background: linear-gradient(var(--c-blue), rgba(30, 107, 255, 0.05));
}

.page-faq .faq-route > li::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--c-blue);
  border-radius: 50%;
  background: var(--c-ink);
}

.page-faq .faq-route > li:last-child {
  padding-bottom: 0;
}

.page-faq .faq-route > li:last-child::before {
  bottom: auto;
  height: 20px;
}

.page-faq .faq-route h3 {
  margin: 0 0 6px;
  color: var(--c-white);
  font-size: 16px;
  line-height: 1.4;
}

.page-faq .faq-route p {
  margin: 0;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-faq .faq-route .mono {
  display: block;
  margin-top: 6px;
  color: var(--c-cyan);
  font-size: 11px;
  line-height: 1.5;
}

.page-faq .faq-query-board {
  border: 1px solid var(--line-strong);
  background: var(--surface-deep);
}

.page-faq .faq-query__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-query__row:last-child {
  border-bottom: 0;
}

.page-faq .faq-query__label {
  color: var(--c-orange);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.page-faq .faq-query__body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.page-faq .faq-query__text {
  color: var(--faq-soft);
  font-size: 14px;
  line-height: 1.6;
}

.page-faq .faq-mobile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

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

.page-faq .faq-device {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 23, 48, 0.8), rgba(7, 11, 20, 0.92));
}

.page-faq .faq-device img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.page-faq .faq-device figcaption {
  margin-top: 10px;
  color: var(--c-mist);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.page-faq .faq-accordion {
  display: grid;
  gap: 10px;
}

.page-faq .faq-item {
  border: 1px solid var(--line);
  background: rgba(13, 23, 48, 0.55);
}

.page-faq .faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  color: var(--c-white);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--c-orange);
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
}

.page-faq .faq-item[open] summary::after {
  content: "−";
}

.page-faq .faq-item[open] summary {
  border-bottom: 1px solid var(--line);
}

.page-faq .faq-item__body {
  padding: 14px 16px 16px;
}

.page-faq .faq-item__body ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.75;
}

.page-faq .faq-item__body a {
  color: var(--c-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-contact {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 90, 31, 0.55);
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.14), rgba(13, 23, 48, 0.9) 55%);
}

.page-faq .faq-contact__eyebrow {
  margin: 0 0 10px;
  color: var(--c-orange);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.page-faq .faq-contact__lead {
  max-width: 60ch;
  margin: 0;
  color: var(--faq-soft);
  font-size: 14.5px;
  line-height: 1.7;
}

.page-faq .faq-contact__channels {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.page-faq .faq-contact__channel {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
}

.page-faq .faq-contact__key {
  color: var(--c-orange);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.page-faq .faq-contact__val {
  color: var(--c-white);
  overflow-wrap: anywhere;
}

.page-faq .faq-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (min-width: 760px) {
  .page-faq .faq-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-faq .faq-query__row {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

  .page-faq .faq-mobile-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
  }

  .page-faq .faq-device {
    justify-self: end;
    width: 100%;
    max-width: 340px;
  }

  .page-faq .faq-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px) {
  .page-faq .faq-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
  }

  .page-faq .faq-rail {
    position: sticky;
    top: calc(var(--header-h) + 18px);
    align-self: start;
  }
}

@media (max-width: 480px) {
  .page-faq .faq-section__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .page-faq .faq-section__index {
    justify-self: start;
    width: max-content;
    margin-top: 0;
  }

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

  .page-faq .faq-hero__panel {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-faq .faq-rail__link,
  .page-faq .faq-rail__help {
    transition: none;
  }
}