.page-home {
  --home-rule: 1px solid var(--grid-300);
  --home-gap: clamp(18px, 3vw, 28px);
}

.page-home .band {
  padding-block: clamp(48px, 7vw, 96px);
}

.page-home .band + .band {
  border-top: var(--home-rule);
}

.page-home .band--hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(18px, 3vw, 32px);
}

.page-home .band--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    to right,
    var(--grid-300) 0 1px,
    transparent 1px calc(100% / 12)
  );
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  pointer-events: none;
}

.page-home .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--steel-500);
}

.page-home .breadcrumb a {
  color: var(--steel-500);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.page-home .breadcrumb a:hover {
  color: var(--cyan-400);
}

.page-home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.12em;
  color: var(--gold-400);
}

.page-home .eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold-400);
}

.page-home .section-title {
  margin: 14px 0 0;
  font-size: var(--fs-40);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 900;
  color: var(--fog-100);
}

.page-home .section-lede {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: var(--fs-17);
  line-height: 1.8;
  color: var(--steel-500);
}

.page-home .footnote {
  margin: 16px 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--steel-500);
}

.page-home .hero__grid {
  display: grid;
  gap: 36px;
  margin-top: 18px;
}

.page-home .hero__lead h1 {
  margin: 16px 0 0;
  font-size: var(--fs-64);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--fog-100);
}

.page-home .hero__lede {
  margin: 18px 0 0;
  max-width: 32em;
  font-size: var(--fs-20);
  line-height: 1.72;
  color: var(--fog-100);
  opacity: 0.78;
}

.page-home .steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.page-home .step {
  position: relative;
  padding: 0 0 20px 30px;
  border-left: 1px solid var(--grid-300);
}

.page-home .step:last-child {
  padding-bottom: 0;
}

.page-home .step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid var(--cyan-400);
}

.page-home .step:nth-child(2)::before {
  border-color: var(--gold-400);
}

.page-home .step:nth-child(3)::before {
  border-color: var(--steel-500);
}

.page-home .step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--fog-100);
}

.page-home .step__head::-webkit-details-marker {
  display: none;
}

.page-home .step__head::marker {
  content: "";
}

.page-home .step-index {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gold-400);
}

.page-home .step__body {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--cyan-400);
}

.page-home .step__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--steel-500);
}

.page-home .flow-figure {
  margin: 28px 0 0;
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
  overflow: hidden;
}

.page-home .flow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .flow-figure figcaption {
  padding: 10px 14px;
  border-top: var(--home-rule);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--steel-500);
}

.page-home .channel-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 2px solid var(--grid-300);
  border-radius: var(--radius);
  background: var(--ink-700);
  display: grid;
  gap: 14px;
}

.page-home .channel-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .channel-panel__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-home .channel-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(165deg, rgba(6, 15, 24, 0.3), rgba(6, 15, 24, 0.93) 72%);
  pointer-events: none;
}

.page-home .channel-panel > *:not(.channel-panel__bg):not(.channel-panel__light) {
  position: relative;
  z-index: 1;
}

.page-home .channel-panel__light {
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--cyan-400) 45%, var(--gold-400) 62%, transparent);
  opacity: 0.85;
  pointer-events: none;
  animation: homeSweep 12s linear infinite;
}

@keyframes homeSweep {
  from {
    transform: translateX(-16%);
  }
  to {
    transform: translateX(16%);
  }
}

.page-home .channel-panel__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.14em;
  color: var(--fog-100);
}

.page-home .gate {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: rgba(6, 15, 24, 0.6);
}

.page-home .gate--open {
  border-color: rgba(47, 224, 214, 0.55);
}

.page-home .gate--login {
  border-color: rgba(242, 183, 80, 0.55);
}

.page-home .gate .btn {
  width: 100%;
  text-align: center;
}

.page-home .gate p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--steel-500);
}

.page-home .channel-panel__note {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--steel-500);
}

.page-home .channel-panel__note a,
.page-home .inline-link {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 224, 214, 0.5);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .channel-panel__note a:hover,
.page-home .inline-link:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
}

.page-home .text-link {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--fs-17);
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 224, 214, 0.45);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .text-link:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
}

.page-home #screen-check {
  scroll-margin-top: 120px;
}

.page-home .status-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  overflow: hidden;
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.page-home .status-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.page-home .status-band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 15, 24, 0.12), rgba(6, 15, 24, 0.94) 76%);
}

.page-home .status-band__body {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 46em;
  padding: clamp(22px, 4vw, 44px);
}

.page-home .update__grid {
  display: grid;
  gap: 30px;
}

.page-home .note-stack {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-home .note {
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
  transition: box-shadow 0.2s var(--ease);
}

.page-home .note[open] {
  box-shadow: inset 3px 0 0 var(--cyan-400);
}

.page-home .note summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--fog-100);
}

.page-home .note summary::-webkit-details-marker {
  display: none;
}

.page-home .note summary::marker {
  content: "";
}

.page-home .note summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-17);
  color: var(--gold-400);
}

.page-home .note[open] summary::after {
  content: "−";
}

.page-home .note__body {
  padding: 0 16px 16px;
}

.page-home .note__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--steel-500);
}

.page-home .trouble {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
}

.page-home .trouble__item {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-top: var(--home-rule);
}

.page-home .trouble__num {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  color: var(--gold-400);
}

.page-home .trouble__title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--fog-100);
}

.page-home .trouble__text {
  margin: 0;
  max-width: 30em;
  font-size: var(--fs-17);
  line-height: 1.75;
  color: var(--steel-500);
}

.page-home .after-note {
  margin: 0;
}

.page-home .contact {
  display: grid;
  gap: 30px;
}

.page-home .contact__intro .section-lede + .section-lede {
  margin-top: 10px;
}

.page-home .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 8px;
}

.page-home .contact-card {
  padding: 22px;
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.page-home .contact-card dl {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-home .contact-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(30, 54, 72, 0.7);
}

.page-home .contact-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-home .contact-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--steel-500);
}

.page-home .contact-row dd {
  margin: 0;
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--fog-100);
  word-break: break-word;
}

@media (min-width: 900px) {
  .page-home .update__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-home .contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-home .trouble {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 40px);
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
    margin-top: 26px;
  }

  .page-home .channel-panel {
    position: sticky;
    top: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .channel-panel__light {
    animation: none;
  }

  .page-home .breadcrumb a,
  .page-home .text-link,
  .page-home .inline-link,
  .page-home .channel-panel__note a,
  .page-home .note {
    transition: none;
  }
}


<main id="main-content" class="page-home">
  <div class="shell">
    <nav class="breadcrumb" aria-label="当前位置">
      <a href="/">入口总览</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">首次到访</span>
    </nav>
  </div>

  <section class="band band--hero" aria-labelledby="home-title">
    <div class="shell">
      <div class="hero__grid">
        <div class="hero__lead">
          <p class="eyebrow">MANBET / 入口总览</p>
          <h1 id="home-title">第一次来，先分清打开和登录</h1>
          <p class="hero__lede">第一次到 MANBET 找入口，只需要记住一件事：打开负责进入页面，登录负责确认身份。顺着下面三步走，多数人一次就能到位。</p>

          <ol class="steps">
            <li class="step">
              <details class="step__item">
                <summary class="step__head">
                  <span class="step-index">01</span>
                  <span class="step__name">选一条入口，只点一次</span>
                </summary>
                <div class="step__body">
                  <p>要进页面就点打开，已经进来只需要确认身份就点登录。点错不要紧，回到这一屏重新选就行。</p>
                </div>
              </details>
            </li>
            <li class="step">
              <details class="step__item">
                <summary class="step__head">
                  <span class="step-index">02</span>
                  <span class="step__name">对照手边的设备</span>
                </summary>
                <div class="step__body">
                  <p>家用电脑、笔记本和外接大屏走的是同一条路径。屏幕越宽，状态条显示得越完整，先在宽屏上做一次，之后换设备也心里有数。</p>
                </div>
              </details>
            </li>
            <li class="step">
              <details class="step__item">
                <summary class="step__head">
                  <span class="step-index">03</span>
                  <span class="step__name">看到已通过再离开</span>
                </summary>
                <div class="step__body">
                  <p>状态标识变成已通过，说明这次操作到位了。停在第二步，就回到上一步重新选择设备，不用从头再来。</p>
                </div>
              </details>
            </li>
          </ol>

          <figure class="flow-figure">
            <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="三个等距排列的方形节点由细线连接，中间一个节点处于点亮状态">
            <figcaption>三步顺序：确认入口、查看设备、状态标识变为已通过。</figcaption>
          </figure>
        </div>

        <aside class="channel-panel" aria-label="打开与登录两条通道">
          <div class="channel-panel__bg">
            <img src="{zhanqunpic:h:1200w:1600}" width="1600" height="1200" alt="深墨蓝底上两道青色与金色几何光带平行延伸的抽象示意">
          </div>
          <span class="channel-panel__light" aria-hidden="true"></span>
          <p class="channel-panel__label">两条通道</p>
          <div class="gate gate--open">
            <a class="btn btn--open" href="/products/">打开通道</a>
            <p>还没进入页面，从这里开始。</p>
          </div>
          <div class="gate gate--login">
            <a class="btn btn--login" href="/products/">登录通道</a>
            <p>已经进来，确认身份与当前状态。</p>
          </div>
          <p class="channel-panel__note">换了电脑或接了外接大屏？<a href="#screen-check">先看这条状态带</a></p>
        </aside>
      </div>
    </div>
  </section>

  <section class="band" id="screen-check" aria-labelledby="screen-title">
    <div class="shell">
      <div class="status-band">
        <img class="status-band__img" src="{zhanqunpic:h:400w:1600}" width="1600" height="400" alt="横向展开的状态核对条界面切片，含设备标签与状态刻度" loading="lazy" decoding="async">
        <span class="status-band__veil" aria-hidden="true"></span>
        <div class="status-band__body">
          <p class="eyebrow">大屏通道</p>
          <h2 class="section-title" id="screen-title">换了设备，先看这条状态带</h2>
          <p class="section-lede">会员中心里，最近 5 次设备登录记录和当前状态标识会一起显示。接到大屏上时，把窗口拉到 1920 像素以上，横向条会自动展开，这台机器是新登录还是沿用，一眼就能看出来。</p>
          <a class="text-link" href="/products/">大屏通道的完整说明</a>
        </div>
      </div>
    </div>
  </section>

  <section class="band" aria-labelledby="update-title">
    <div class="shell">
      <div class="update__grid">
        <div class="update__intro">
          <p class="eyebrow">兼容说明 / 2024 年 6 月修订版</p>
          <h2 class="section-title" id="update-title">这次更新，和电脑端的人有关</h2>
          <p class="section-lede">内地品牌站电脑端的兼容说明做了一次系统性修订，重点落在浏览器内核、窗口宽度和页面缩放比例三项。此后按季度滚动更新，会员中心会同步出现提示。</p>
          <p class="footnote">品牌从 2019 年持续运营至今，团队构成与服务覆盖可以看<a class="inline-link" href="/mission/">品牌使命</a>。</p>
        </div>

        <div class="note-stack">
          <details class="note">
            <summary>这次改了什么</summary>
            <div class="note__body">
              <p>把判断顺序整理成：先看浏览器内核版本，再看窗口宽度，最后看页面缩放比例。三项都正常时再联系客服，附上截图更容易定位。</p>
            </div>
          </details>
          <details class="note">
            <summary>多久修订一次</summary>
            <div class="note__body">
              <p>兼容说明按季度滚动修订，通道布局与流程提示同期发布。每季度还会做一轮兼容性回归，覆盖 6 类主流浏览器内核和 3 种屏幕宽度区间。</p>
            </div>
          </details>
          <details class="note">
            <summary>会员中心的提示在哪</summary>
            <div class="note__body">
              <p>登录后，状态面板上方会有一条提示条，标注当前版本更新时间。点开能看到与公告对应的条目，换设备前扫一眼就行。</p>
            </div>
          </details>
          <a class="text-link" href="/blog/">看完整的更新记录</a>
        </div>
      </div>
    </div>
  </section>

  <section class="band" aria-labelledby="trouble-title">
    <div class="shell">
      <p class="eyebrow">排查顺序</p>
      <h2 class="section-title" id="trouble-title">页面打不开时的三个动作</h2>
      <p class="section-lede">先按顺序做完这三件事，大多数显示问题当场就能解决，不用等回复。</p>

      <ol class="trouble">
        <li class="trouble__item">
          <span class="trouble__num">动作 01</span>
          <h3 class="trouble__title">换一个内核再开</h3>
          <p class="trouble__text">先用常见的 Chromium 内核浏览器打开，再换火狐类。两个都打不开，说明问题不在浏览器本身。</p>
        </li>
        <li class="trouble__item">
          <span class="trouble__num">动作 02</span>
          <h3 class="trouble__title">把缩放调回 100%</h3>
          <p class="trouble__text">缩放比例会影响横向条展开。恢复为 100% 以后再把窗口拉宽，看通道条是否完整显示。</p>
        </li>
        <li class="trouble__item">
          <span class="trouble__num">动作 03</span>
          <h3 class="trouble__title">对照最近一条公告</h3>
          <p class="trouble__text">兼容类修订会提前出现在更新与动态里。对照时间点，能判断是不是已经记录在案的情况。</p>
        </li>
      </ol>

      <p class="after-note"><a class="text-link" href="/help/">按大屏访问专题继续排查</a></p>
    </div>
  </section>

  <section class="band" aria-labelledby="contact-title">
    <div class="shell">
      <div class="contact">
        <div class="contact__intro">
          <p class="eyebrow">客服与反馈</p>
          <h2 class="section-title" id="contact-title">随时能找到人</h2>
          <p class="section-lede">工作日 9:00–18:00 有人工客服在线，26 人的团队分三班覆盖，平均首次响应约 12 分钟。兼容类问题提交后，通常 1 个工作日内给出定位结论。</p>
          <p class="section-lede">提交时附上浏览器版本和截图，能省掉来回确认的时间。</p>
          <div class="contact-actions">
            <a class="text-link" href="/feedback/">提交兼容问题</a>
            <a class="text-link" href="/agreement/">阅读使用协议</a>
          </div>
        </div>

        <div class="contact-card">
          <dl>
            <div class="contact-row">
              <dt>客服邮箱</dt>
              <dd>support@manbet-phone.com.cn</dd>
            </div>
            <div class="contact-row">
              <dt>客服电话</dt>
              <dd>400-5728-4708</dd>
            </div>
            <div class="contact-row">
              <dt>服务时段</dt>
              <dd>工作日 9:00–18:00</dd>
            </div>
            <div class="contact-row">
              <dt>服务地区</dt>
              <dd>北京，覆盖全国 26 个省份的中文用户</dd>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </section>
</main>

.page-home {
  --home-rule: 1px solid var(--grid-300);
}

.page-home .band {
  padding-block: clamp(48px, 7vw, 96px);
}

.page-home .band + .band {
  border-top: var(--home-rule);
}

.page-home .band--hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(18px, 3vw, 32px);
}

.page-home .band--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    to right,
    var(--grid-300) 0 1px,
    transparent 1px calc(100% / 12)
  );
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
  pointer-events: none;
}

.page-home .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--steel-500);
}

.page-home .breadcrumb a {
  color: var(--steel-500);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.page-home .breadcrumb a:hover {
  color: var(--cyan-400);
}

.page-home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.12em;
  color: var(--gold-400);
}

.page-home .eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold-400);
}

.page-home .section-title {
  margin: 14px 0 0;
  font-size: var(--fs-40);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 900;
  color: var(--fog-100);
}

.page-home .section-lede {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: var(--fs-17);
  line-height: 1.8;
  color: var(--steel-500);
}

.page-home .footnote {
  margin: 16px 0 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--steel-500);
}

.page-home .hero__grid {
  display: grid;
  gap: 36px;
  margin-top: 18px;
}

.page-home .hero__lead h1 {
  margin: 16px 0 0;
  font-size: var(--fs-64);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--fog-100);
}

.page-home .hero__lede {
  margin: 18px 0 0;
  max-width: 32em;
  font-size: var(--fs-20);
  line-height: 1.72;
  color: var(--fog-100);
  opacity: 0.78;
}

.page-home .steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.page-home .step {
  position: relative;
  padding: 0 0 20px 30px;
  border-left: 1px solid var(--grid-300);
}

.page-home .step:last-child {
  padding-bottom: 0;
}

.page-home .step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid var(--cyan-400);
}

.page-home .step:nth-child(2)::before {
  border-color: var(--gold-400);
}

.page-home .step:nth-child(3)::before {
  border-color: var(--steel-500);
}

.page-home .step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--fog-100);
}

.page-home .step__head::-webkit-details-marker {
  display: none;
}

.page-home .step__head::marker {
  content: "";
}

.page-home .step-index {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gold-400);
}

.page-home .step__body {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--cyan-400);
}

.page-home .step__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.75;
  color: var(--steel-500);
}

.page-home .flow-figure {
  margin: 28px 0 0;
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
  overflow: hidden;
}

.page-home .flow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .flow-figure figcaption {
  padding: 10px 14px;
  border-top: var(--home-rule);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--steel-500);
}

.page-home .channel-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 2px solid var(--grid-300);
  border-radius: var(--radius);
  background: var(--ink-700);
  display: grid;
  gap: 14px;
}

.page-home .channel-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-home .channel-panel__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.page-home .channel-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(165deg, rgba(6, 15, 24, 0.3), rgba(6, 15, 24, 0.93) 72%);
  pointer-events: none;
}

.page-home .channel-panel > *:not(.channel-panel__bg):not(.channel-panel__light) {
  position: relative;
  z-index: 1;
}

.page-home .channel-panel__light {
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, var(--cyan-400) 45%, var(--gold-400) 62%, transparent);
  opacity: 0.85;
  pointer-events: none;
  animation: homeSweep 12s linear infinite;
}

@keyframes homeSweep {
  from {
    transform: translateX(-16%);
  }
  to {
    transform: translateX(16%);
  }
}

.page-home .channel-panel__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.14em;
  color: var(--fog-100);
}

.page-home .gate {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: rgba(6, 15, 24, 0.6);
}

.page-home .gate--open {
  border-color: rgba(47, 224, 214, 0.55);
}

.page-home .gate--login {
  border-color: rgba(242, 183, 80, 0.55);
}

.page-home .gate .btn {
  width: 100%;
  text-align: center;
}

.page-home .gate p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--steel-500);
}

.page-home .channel-panel__note {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: var(--steel-500);
}

.page-home .channel-panel__note a,
.page-home .inline-link {
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 224, 214, 0.5);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .channel-panel__note a:hover,
.page-home .inline-link:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
}

.page-home .text-link {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--fs-17);
  color: var(--cyan-400);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 224, 214, 0.45);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.page-home .text-link:hover {
  color: var(--gold-400);
  border-bottom-color: var(--gold-400);
}

.page-home #screen-check {
  scroll-margin-top: 120px;
}

.page-home .status-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  overflow: hidden;
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.page-home .status-band__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.page-home .status-band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 15, 24, 0.12), rgba(6, 15, 24, 0.94) 76%);
}

.page-home .status-band__body {
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 46em;
  padding: clamp(22px, 4vw, 44px);
}

.page-home .update__grid {
  display: grid;
  gap: 30px;
}

.page-home .note-stack {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-home .note {
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
  transition: box-shadow 0.2s var(--ease);
}

.page-home .note[open] {
  box-shadow: inset 3px 0 0 var(--cyan-400);
}

.page-home .note summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--fog-100);
}

.page-home .note summary::-webkit-details-marker {
  display: none;
}

.page-home .note summary::marker {
  content: "";
}

.page-home .note summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-17);
  color: var(--gold-400);
}

.page-home .note[open] summary::after {
  content: "−";
}

.page-home .note__body {
  padding: 0 16px 16px;
}

.page-home .note__body p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: 1.8;
  color: var(--steel-500);
}

.page-home .trouble {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
}

.page-home .trouble__item {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-top: var(--home-rule);
}

.page-home .trouble__num {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: 0.08em;
  color: var(--gold-400);
}

.page-home .trouble__title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--fog-100);
}

.page-home .trouble__text {
  margin: 0;
  max-width: 30em;
  font-size: var(--fs-17);
  line-height: 1.75;
  color: var(--steel-500);
}

.page-home .after-note {
  margin: 0;
}

.page-home .contact {
  display: grid;
  gap: 30px;
}

.page-home .contact__intro .section-lede + .section-lede {
  margin-top: 10px;
}

.page-home .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 8px;
}

.page-home .contact-card {
  padding: 22px;
  border: var(--home-rule);
  border-radius: var(--radius);
  background: var(--ink-800);
}

.page-home .contact-card dl {
  margin: 0;
  display: grid;
  gap: 14px;
}

.page-home .contact-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(30, 54, 72, 0.7);
}

.page-home .contact-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-home .contact-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--steel-500);
}

.page-home .contact-row dd {
  margin: 0;
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--fog-100);
  word-break: break-word;
}

@media (min-width: 900px) {
  .page-home .update__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-home .contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .page-home .trouble {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 40px);
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
    margin-top: 26px;
  }

  .page-home .channel-panel {
    position: sticky;
    top: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .channel-panel__light {
    animation: none;
  }

  .page-home .breadcrumb a,
  .page-home .text-link,
  .page-home .inline-link,
  .page-home .channel-panel__note a,
  .page-home .note {
    transition: none;
  }
}