.page-products {
  --tool-line: rgba(11, 31, 51, .16);
}

.page-products .section {
  padding-block: clamp(38px, 5.5vw, 68px);
}

.page-products .breadcrumbs {
  padding-top: clamp(14px, 2vw, 22px);
  font-size: 13px;
}

/* ---------- 首屏 ---------- */
.page-products .tools-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark-strong);
  margin-top: 12px;
  padding-block: clamp(34px, 5vw, 62px) clamp(30px, 4.5vw, 54px);
}

.page-products .tools-hero::after {
  content: "";
  position: absolute;
  top: -22%;
  right: -14%;
  width: min(60vw, 660px);
  height: 150%;
  background: linear-gradient(165deg, rgba(24, 200, 216, .38), rgba(24, 200, 216, 0) 68%);
  transform: skewX(-13deg);
  pointer-events: none;
}

.page-products .tools-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .hero-eyebrow {
  color: var(--cyan-soft);
}

.page-products .tools-hero h1 {
  margin: 12px 0 0;
  max-width: 22ch;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.14;
  letter-spacing: -.5px;
  color: var(--paper);
}

.page-products .tools-hero__lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--on-dark);
}

.page-products .hero-jump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .hero-jump a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(140, 232, 239, .34);
  background: rgba(11, 31, 51, .34);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.page-products .hero-jump a:hover,
.page-products .hero-jump a:focus-visible {
  background: rgba(24, 200, 216, .2);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-products .hero-jump a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .hero-jump__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
}

/* ---------- 工具矩阵 ---------- */
.page-products .matrix-layout {
  display: grid;
  gap: 26px;
  margin-top: 26px;
}

.page-products .matrix-figure {
  margin: 0;
}

.page-products .tool-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tool-line);
}

.page-products .tool-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 6px 18px 10px;
  border-bottom: 1px solid var(--tool-line);
  transition: background-color .2s var(--ease);
}

.page-products .tool-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--cyan);
  transition: width .24s var(--ease);
}

.page-products .tool-row:hover,
.page-products .tool-row:focus-within {
  background: rgba(24, 200, 216, .07);
}

.page-products .tool-row:hover::before,
.page-products .tool-row:focus-within::before {
  width: 4px;
}

.page-products .tool-row__num {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--cyan);
}

.page-products .tool-row__body h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.4;
}

.page-products .tool-row__body h3 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease);
}

.page-products .tool-row__body h3 a:hover,
.page-products .tool-row__body h3 a:focus-visible {
  border-bottom-color: var(--coral);
}

.page-products .tool-row__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .tool-row__arrow {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--mist);
  transition: color .2s var(--ease), transform .2s var(--ease);
}

.page-products .tool-row:hover .tool-row__arrow {
  color: var(--coral);
  transform: translateX(3px);
}

/* ---------- 索引区 ---------- */
.page-products .index-section {
  background:
    linear-gradient(180deg, rgba(12, 58, 90, .05), rgba(12, 58, 90, 0) 220px);
  border-top: 1px solid var(--tool-line);
}

.page-products .section-head--split {
  display: grid;
  gap: 12px;
}

.page-products .index-layout {
  display: grid;
  gap: 26px;
  margin-top: 26px;
}

.page-products .index-rail {
  background: var(--card);
  border: 1px solid var(--tool-line);
  border-top: 3px solid var(--navy);
  padding: 18px;
  box-shadow: 4px 4px 0 rgba(11, 31, 51, .06);
}

.page-products .rail-block + .rail-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--tool-line);
}

.page-products .rail-block__title {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--slate);
}

.page-products .rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .rail-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--slate);
  border-bottom: 1px dashed rgba(11, 31, 51, .1);
}

.page-products .rail-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: rgba(24, 200, 216, .16);
  padding: 1px 7px;
  border-radius: var(--radius);
}

.page-products .rail-note {
  margin: 18px 0 0;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.6;
  border-radius: var(--radius);
}

.page-products .rail-note__num {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--cyan);
}

.page-products .index-figure {
  margin: 0 0 20px;
}

.page-products .cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.page-products .cat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 15px 13px;
  background: var(--card);
  border: 1px solid var(--tool-line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(11, 31, 51, .05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.page-products .cat-card:nth-child(3n + 2) {
  border-top-color: var(--cyan);
}

.page-products .cat-card:nth-child(3n + 3) {
  border-top-color: var(--coral);
}

.page-products .cat-card:hover,
.page-products .cat-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 4px 9px 0 rgba(11, 31, 51, .12);
}

.page-products .cat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-products .cat-card__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--mist);
  padding: 2px 7px;
  border-radius: var(--radius);
}

.page-products .cat-card__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}

.page-products .cat-card__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.page-products .cat-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.page-products .cat-card__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
}

.page-products .cat-card__list span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  white-space: nowrap;
}

.page-products .cat-card__copy {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--slate);
  background: transparent;
  border: 1px dashed var(--tool-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}

.page-products .cat-card__copy:hover {
  color: var(--ink);
  border-color: var(--cyan);
  background: rgba(24, 200, 216, .12);
}

.page-products .cat-card__copy:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- 平板大卡 ---------- */
.page-products .tablet-section {
  padding-inline: 0;
}

.page-products .tablet-board {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.6vw, 46px);
  background: var(--coral);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(11, 31, 51, .16);
}

.page-products .tablet-board::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -16%;
  width: 54%;
  height: 180%;
  background: linear-gradient(190deg, rgba(24, 200, 216, .88), rgba(24, 200, 216, .22));
  transform: skewX(-13deg);
  pointer-events: none;
}

.page-products .tablet-board__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
}

.page-products .eyebrow--on-coral {
  color: var(--coral-deep);
}

.page-products .tablet-board h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--ink);
}

.page-products .tablet-board__lead {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.8;
  color: #3A1608;
}

.page-products .subzones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .subzones li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.page-products .subzones__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--coral-deep);
}

.page-products .subzones strong {
  font-size: 15px;
  color: var(--ink);
}

.page-products .subzones em {
  font-style: normal;
  font-size: 12px;
  color: var(--slate);
}

.page-products .quick-index__title {
  margin: 22px 0 8px;
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--coral-deep);
}

.page-products .quick-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .quick-index li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px dashed rgba(11, 31, 51, .26);
}

.page-products .quick-index li span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--coral-deep);
}

.page-products .tablet-board__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .tablet-figure {
  margin: 0;
}

.page-products .tablet-board__tip {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #3A1608;
}

.page-products .tablet-board__btn {
  align-self: flex-start;
}

/* ---------- V3 ---------- */
.page-products .v3-layout {
  display: grid;
  gap: 26px;
}

.page-products .v3-title {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.24;
  color: var(--ink);
}

.page-products .v3-lead {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.page-products .v3-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .v3-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  background: var(--card);
  border-left: 3px solid var(--coral);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.page-products .v3-steps__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--coral-deep);
}

.page-products .v3-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .v3-btn {
  margin-top: 18px;
}

.page-products .v3-figure {
  margin: 0;
}

/* ---------- 流程 ---------- */
.page-products .flow-section {
  border-top: 1px solid var(--tool-line);
}

.page-products .flow {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .flow li {
  padding: 18px 18px 20px;
  background: var(--card);
  border: 1px solid var(--tool-line);
  border-left: 4px solid var(--cyan);
  border-radius: var(--radius);
}

.page-products .flow li:nth-child(2) {
  border-left-color: var(--coral);
}

.page-products .flow li:nth-child(3) {
  border-left-color: var(--navy);
}

.page-products .flow__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  color: var(--mist);
}

.page-products .flow h3 {
  margin: 8px 0 6px;
  font-size: 17px;
  line-height: 1.4;
}

.page-products .flow p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .flow-figure {
  margin: 26px 0 0;
}

.page-products .flow-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--slate);
}

.page-products .flow-note a {
  color: var(--ink);
  border-bottom: 2px solid var(--cyan);
  text-decoration: none;
}

.page-products .flow-note a:hover,
.page-products .flow-note a:focus-visible {
  border-bottom-color: var(--coral);
}

/* ---------- 问答 ---------- */
.page-products .qa-section {
  background: linear-gradient(180deg, rgba(24, 200, 216, .07), rgba(24, 200, 216, 0) 80%);
  border-top: 1px solid var(--tool-line);
}

.page-products .qa-layout {
  display: grid;
  gap: 24px;
}

.page-products .qa-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tool-line);
}

.page-products .qa-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--tool-line);
}

.page-products .qa-list h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.5;
}

.page-products .qa-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .qa-aside {
  padding: 20px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 rgba(24, 200, 216, .3);
}

.page-products .qa-aside h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--paper);
}

.page-products .qa-aside p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
}

.page-products .qa-aside .btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

/* ---------- 图片比例 ---------- */
.page-products .media--wide {
  aspect-ratio: 3 / 2;
}

.page-products .media--pano {
  aspect-ratio: 2 / 1;
}

.page-products .media--tall {
  aspect-ratio: 5 / 6;
}

.page-products .media--drawer {
  aspect-ratio: 10 / 7;
}

.page-products .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-products .hero-jump {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .quick-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-products .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 32px;
    align-items: end;
  }

  .page-products .matrix-layout {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 40px;
    align-items: start;
  }

  .page-products .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .page-products .qa-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 38px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-products .index-layout {
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }

  .page-products .index-rail {
    position: sticky;
    top: 96px;
  }

  .page-products .tablet-board__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: 40px;
    align-items: start;
  }

  .page-products .v3-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 48px;
    align-items: start;
  }
}

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

@media (max-width: 520px) {
  .page-products .subzones {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-products .tools-hero h1 {
    font-size: 28px;
  }

  .page-products .tool-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .page-products .tool-row__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .hero-jump a,
  .page-products .tool-row,
  .page-products .tool-row::before,
  .page-products .tool-row__arrow,
  .page-products .cat-card,
  .page-products .cat-card__copy {
    transition-duration: .01ms;
  }

  .page-products .hero-jump a:hover,
  .page-products .cat-card:hover,
  .page-products .cat-card:focus-within {
    transform: none;
  }

  .page-products .tool-row:hover .tool-row__arrow {
    transform: none;
  }
}

@media print {
  .page-products .hero-jump,
  .page-products .v3-btn,
  .page-products .qa-aside {
    display: none;
  }

  .page-products .cat-card,
  .page-products .tablet-board {
    box-shadow: none;
  }
}


<main id="main-content" class="page-products">
  <div class="shell">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol>
        <li><a href="/">首页</a></li>
        <li><a href="/tools/" aria-current="page">工具中心</a></li>
      </ol>
    </nav>
  </div>

  <header class="tools-hero">
    <div class="shell tools-hero__inner">
      <p class="eyebrow hero-eyebrow">工具中心 / TOOL DESK</p>
      <h1>想查一条规则，从类目、编号或公告任一处切进去</h1>
      <p class="tools-hero__lead">乐投游艺把分散的入口收进同一张工作台：12 个一级类目、86 个二级条目按编号排好，平板横屏下有独立的分栏视图，版本变动统一走公告抽屉。你不必先背下路径，挑一个顺手的入口往下走，三步之内基本都能落到位。</p>
      <ul class="hero-jump">
        <li><a href="#matrix"><span class="hero-jump__num">01</span>四类工具</a></li>
        <li><a href="#category-grid"><span class="hero-jump__num">02</span>分类索引</a></li>
        <li><a href="#tablet-board"><span class="hero-jump__num">03</span>平板板块</a></li>
        <li><a href="#v3"><span class="hero-jump__num">04</span>V3 入口</a></li>
      </ul>
    </div>
  </header>

  <section class="section" id="matrix" aria-labelledby="matrix-title">
    <div class="shell">
      <div class="section-head">
        <p class="eyebrow">工具总览</p>
        <h2 class="section-head__title" id="matrix-title">四件工具，对上四种找东西的习惯</h2>
        <p class="section-head__note">有人记得住类目名，有人只记得编号，有人只想看最近改了什么。下面的入口按这几种习惯划分，你先认清自己手上有什么线索，再决定从哪儿进。</p>
      </div>
      <div class="matrix-layout">
        <figure class="media media--wide media--frame matrix-figure">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="四象限工具矩阵信息图，分别对应分类索引、平板板块、V3 入口和订阅管理" loading="lazy" decoding="async">
          <figcaption class="media__caption">索引负责定位，平板负责对照，公告负责时间线，订阅负责把更新送到手上。</figcaption>
        </figure>
        <ol class="tool-rows">
          <li class="tool-row">
            <span class="tool-row__num">01</span>
            <div class="tool-row__body">
              <h3><a href="#category-grid">分类索引</a></h3>
              <p>已经知道要找哪一类，直接进网格按 LT 编号取条目，不用逐层点开菜单。</p>
            </div>
            <span class="tool-row__arrow" aria-hidden="true">→</span>
          </li>
          <li class="tool-row">
            <span class="tool-row__num">02</span>
            <div class="tool-row__body">
              <h3><a href="#tablet-board">平板内容板块</a></h3>
              <p>把平板横过来，类目和条目左右并排，适合一边读规则一边对编号。</p>
            </div>
            <span class="tool-row__arrow" aria-hidden="true">→</span>
          </li>
          <li class="tool-row">
            <span class="tool-row__num">03</span>
            <div class="tool-row__body">
              <h3><a href="#v3">V3 公告入口</a></h3>
              <p>侧边抽屉一拉就能看到最新版本和栏目调整，追更新的人从这里走最短。</p>
            </div>
            <span class="tool-row__arrow" aria-hidden="true">→</span>
          </li>
          <li class="tool-row">
            <span class="tool-row__num">04</span>
            <div class="tool-row__body">
              <h3><a href="/faqs/">订阅与摘要</a></h3>
              <p>选好关注栏目、确认邮箱即可，规则更新和分类调整每周最多两封送到手上。</p>
            </div>
            <span class="tool-row__arrow" aria-hidden="true">→</span>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section index-section" id="category-grid" aria-labelledby="index-title">
    <div class="shell">
      <div class="section-head section-head--split">
        <div>
          <p class="eyebrow">分类索引</p>
          <h2 class="section-head__title" id="index-title">顺着编号往下找，比凭记忆翻要快</h2>
        </div>
        <p class="section-head__note">简体版乐投娱乐查分类的落点就在下面这张网格。一级类目带两位字母标识，二级条目带完整编号，把编号发给同事，对方就能定位到同一条。</p>
      </div>

      <div class="index-layout">
        <aside class="index-rail" aria-label="索引视角与条目统计">
          <div class="rail-block">
            <h3 class="rail-block__title">按内容类型</h3>
            <ul class="rail-tags">
              <li class="tag tag--cyan">规则说明</li>
              <li class="tag">分类索引</li>
              <li class="tag">平台入口</li>
              <li class="tag">版本公告</li>
              <li class="tag">订阅指引</li>
            </ul>
          </div>
          <div class="rail-block">
            <h3 class="rail-block__title">按版本阶段</h3>
            <ul class="rail-tags">
              <li class="tag tag--soft">V1 初版</li>
              <li class="tag tag--soft">V2 索引</li>
              <li class="tag tag--coral">V3 公告</li>
            </ul>
          </div>
          <div class="rail-block">
            <h3 class="rail-block__title">按更新状态</h3>
            <ul class="rail-list">
              <li><span>近 30 天有更新</span><span class="rail-count">14</span></li>
              <li><span>本季度已复核</span><span class="rail-count">12</span></li>
              <li><span>编号长期沿用</span><span class="rail-count">60</span></li>
            </ul>
          </div>
          <p class="rail-note"><span class="rail-note__num">12</span> 个一级类目 · <span class="rail-note__num">86</span> 个二级条目</p>
        </aside>

        <div class="index-main">
          <figure class="media media--wide media--frame index-figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="分类索引卡组平铺俯拍，卡片上印有 LT 编号、短条目名称和筛选标签" loading="lazy" decoding="async">
            <figcaption class="media__caption">一级类目用两位字母区分，二级条目接两位序号，卡片正面只留最短的识别信息。</figcaption>
          </figure>

          <div class="cat-grid">
            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-RL</span>
                <span class="cat-card__count">12 条</span>
              </div>
              <h3 class="cat-card__title">规则说明</h3>
              <ul class="cat-card__list">
                <li><span>LT-RL-03</span>计分与回合衔接</li>
                <li><span>LT-RL-05</span>场次轮换顺序</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-RL" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-GM</span>
                <span class="cat-card__count">9 条</span>
              </div>
              <h3 class="cat-card__title">玩法类目</h3>
              <ul class="cat-card__list">
                <li><span>LT-GM-02</span>单人流程说明</li>
                <li><span>LT-GM-04</span>组队流程说明</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-GM" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-TB</span>
                <span class="cat-card__count">4 条</span>
              </div>
              <h3 class="cat-card__title">平板板块</h3>
              <ul class="cat-card__list">
                <li><span>LT-TB-01</span>横屏分栏布局</li>
                <li><span>LT-TB-03</span>快捷索引分组</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-TB" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-ID</span>
                <span class="cat-card__count">6 条</span>
              </div>
              <h3 class="cat-card__title">编号体系</h3>
              <ul class="cat-card__list">
                <li><span>LT-ID-01</span>一级类目编号规则</li>
                <li><span>LT-ID-04</span>二级序号编排</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-ID" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-VN</span>
                <span class="cat-card__count">8 条</span>
              </div>
              <h3 class="cat-card__title">版本说明</h3>
              <ul class="cat-card__list">
                <li><span>LT-VN-02</span>V2 索引变更点</li>
                <li><span>LT-VN-06</span>V3 入口启用说明</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-VN" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-AN</span>
                <span class="cat-card__count">7 条</span>
              </div>
              <h3 class="cat-card__title">公告归档</h3>
              <ul class="cat-card__list">
                <li><span>LT-AN-01</span>版本标签说明</li>
                <li><span>LT-AN-05</span>栏目标签说明</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-AN" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-SB</span>
                <span class="cat-card__count">5 条</span>
              </div>
              <h3 class="cat-card__title">订阅中心</h3>
              <ul class="cat-card__list">
                <li><span>LT-SB-01</span>关注栏目选择</li>
                <li><span>LT-SB-03</span>邮箱确认步骤</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-SB" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-QA</span>
                <span class="cat-card__count">11 条</span>
              </div>
              <h3 class="cat-card__title">常见问题</h3>
              <ul class="cat-card__list">
                <li><span>LT-QA-02</span>找不到类目怎么办</li>
                <li><span>LT-QA-07</span>订阅状态怎么改</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-QA" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-GL</span>
                <span class="cat-card__count">6 条</span>
              </div>
              <h3 class="cat-card__title">名词表</h3>
              <ul class="cat-card__list">
                <li><span>LT-GL-01</span>常用简称对照</li>
                <li><span>LT-GL-04</span>类目别名索引</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-GL" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-HS</span>
                <span class="cat-card__count">5 条</span>
              </div>
              <h3 class="cat-card__title">发展沿革</h3>
              <ul class="cat-card__list">
                <li><span>LT-HS-01</span>2016 年上线说明</li>
                <li><span>LT-HS-05</span>2025 平板板块上线</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-HS" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-CP</span>
                <span class="cat-card__count">6 条</span>
              </div>
              <h3 class="cat-card__title">栏目调整</h3>
              <ul class="cat-card__list">
                <li><span>LT-CP-02</span>季度复核记录</li>
                <li><span>LT-CP-05</span>栏目合并说明</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-CP" data-copy-label="类目编号">复制编号</button>
            </article>

            <article class="cat-card">
              <div class="cat-card__head">
                <span class="cat-card__code">LT-AC</span>
                <span class="cat-card__count">7 条</span>
              </div>
              <h3 class="cat-card__title">访问帮助</h3>
              <ul class="cat-card__list">
                <li><span>LT-AC-01</span>键盘导航说明</li>
                <li><span>LT-AC-04</span>页面缩放适配</li>
              </ul>
              <button type="button" class="copy-btn cat-card__copy" data-copy="LT-AC" data-copy-label="类目编号">复制编号</button>
            </article>
          </div>

          <p class="copy-status visually-hidden" data-copy-status aria-live="polite"></p>
        </div>
      </div>
    </div>
  </section>

  <section class="section tablet-section" id="tablet-board" aria-labelledby="tablet-title">
    <div class="shell">
      <div class="tablet-board">
        <div class="tablet-board__grid">
          <div class="tablet-board__copy">
            <p class="eyebrow eyebrow--on-coral">平板内容板块</p>
            <h2 id="tablet-title">横过来看，类目和条目并排站着</h2>
            <p class="tablet-board__lead">乐投娱乐平板进板块独立占一整块横带，在首页第二屏就能看到。横屏时左侧固定类目层，右侧翻二级条目，两只手不用来回缩放；竖屏和手机上自动回到单列，阅读顺序不变。</p>

            <ul class="subzones">
              <li><span class="subzones__num">01</span><strong>快捷索引</strong><em>12 条常用</em></li>
              <li><span class="subzones__num">02</span><strong>规则速查</strong><em>按类目折叠</em></li>
              <li><span class="subzones__num">03</span><strong>公告摘要</strong><em>近 6 期</em></li>
              <li><span class="subzones__num">04</span><strong>收藏分组</strong><em>自建清单</em></li>
            </ul>

            <h3 class="quick-index__title">十二个快捷索引</h3>
            <ul class="quick-index">
              <li><span>TB-01</span>基础规则总览</li>
              <li><span>TB-02</span>计分与回合</li>
              <li><span>TB-03</span>单人流程</li>
              <li><span>TB-04</span>组队流程</li>
              <li><span>TB-05</span>版本对照表</li>
              <li><span>TB-06</span>分类编号规则</li>
              <li><span>TB-07</span>本月栏目调整</li>
              <li><span>TB-08</span>最新公告摘要</li>
              <li><span>TB-09</span>订阅设置</li>
              <li><span>TB-10</span>问题速查</li>
              <li><span>TB-11</span>名词对照</li>
              <li><span>TB-12</span>横屏使用指南</li>
            </ul>
          </div>

          <div class="tablet-board__side">
            <figure class="media media--tall media--frame tablet-figure">
              <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="平板设备正视，屏幕显示四个子区与十二条快捷索引，边框为青橙撞色" loading="lazy" decoding="async">
              <figcaption class="media__caption">横屏分栏下，左边类目常驻，右边随点随换。</figcaption>
            </figure>
            <p class="tablet-board__tip">工具中心里提供完整子区入口，从任一子区都能跳回完整索引。</p>
            <a class="btn btn--ghost tablet-board__btn" href="/brand/">看板块演进</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section" id="v3" aria-labelledby="v3-title">
    <div class="shell v3-layout">
      <div class="v3-copy">
        <p class="eyebrow">V3 快速入口</p>
        <h2 class="v3-title" id="v3-title">公告抽屉一拉，版本变动就在手边</h2>
        <p class="v3-lead">页面右上角的「打开公告抽屉」是常驻触发点。抽屉展开后，最上面那个按钮就是 V3 入口，点进去直接落到最新一期更新，不用先在栏目里绕一圈。追版本、盯栏目调整的人，用这条路径最短。</p>
        <ol class="v3-steps">
          <li><span class="v3-steps__num">01</span>在页头右上角点开公告抽屉</li>
          <li><span class="v3-steps__num">02</span>点抽屉顶部的 V3 入口按钮</li>
          <li><span class="v3-steps__num">03</span>按版本、栏目、订阅三类标签回看</li>
        </ol>
        <ul class="v3-tags">
          <li class="tag tag--ink">版本 V1–V3</li>
          <li class="tag tag--ink">栏目调整</li>
          <li class="tag tag--ink">订阅摘要</li>
        </ul>
        <a class="btn btn--solid v3-btn" href="/information/">看全部公告与归档</a>
      </div>

      <figure class="media media--drawer media--frame v3-figure">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="侧边抽屉界面示意，顶部 V3 入口按钮突出，旁边是加载状态条与公告标签" loading="lazy" decoding="async">
        <figcaption class="media__caption">抽屉顶部的入口位置固定，换哪一期公告都不会移动。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section flow-section" aria-labelledby="flow-title">
    <div class="shell">
      <div class="section-head">
        <p class="eyebrow">怎么用起来</p>
        <h2 class="section-head__title" id="flow-title">看你手上有什么线索，走对应的那条</h2>
        <p class="section-head__note">第一次来、只记得类目名、只想追更新，这三种处境各自有一条更短的路径。下面按顺序走一遍，之后基本能自己判断该点哪里。</p>
      </div>

      <ol class="flow">
        <li>
          <span class="flow__num">01</span>
          <h3>第一次来，先认位置</h3>
          <p>从首页五块栏目判断内容归属，再进工具中心，用分类索引定位到一级类目。</p>
        </li>
        <li>
          <span class="flow__num">02</span>
          <h3>只记得类目名，进网格</h3>
          <p>在索引网格里找到对应的两位字母标识，复制 LT 编号，发给同事也能对上同一条。</p>
        </li>
        <li>
          <span class="flow__num">03</span>
          <h3>只想追更新，走公告</h3>
          <p>打开侧边抽屉，经 V3 入口进最新一期，再按标签回看更早的版本与栏目调整。</p>
        </li>
      </ol>

      <figure class="media media--pano media--frame flow-figure">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="三步查找流程图，用等宽编号与电光青箭头连接首页栏目、分类索引和 V3 公告三个入口" loading="lazy" decoding="async">
        <figcaption class="media__caption">三条路径最后都回到同一套编号，换了工具也不会对不上号。</figcaption>
      </figure>

      <p class="flow-note">类目名称和编号为什么这样定，可以翻 <a href="/brand/">品牌档案</a> 里的内容体系说明。</p>
    </div>
  </section>

  <section class="section qa-section" aria-labelledby="qa-title">
    <div class="shell qa-layout">
      <div class="qa-main">
        <p class="eyebrow">工具问答</p>
        <h2 class="section-head__title" id="qa-title">用起来卡住，多半出在这四处</h2>
        <ul class="qa-list">
          <li>
            <h3>复制出来的编号贴到哪里？</h3>
            <p>贴到邮件、聊天窗口或工单里都行。对方在索引网格里搜两位字母标识，就能落到同一个一级类目。</p>
          </li>
          <li>
            <h3>平板上没看到分栏，是哪里没设置？</h3>
            <p>把设备横过来，页面宽度超过阈值后分栏才会展开；竖屏时按单列从上往下读，条目顺序和横屏一致。</p>
          </li>
          <li>
            <h3>V3 入口点开后能查到多早的公告？</h3>
            <p>按版本、栏目、订阅三类标签归档，V1 到 V3 的版本说明都能回看，较早的栏目调整按季度归在一起。</p>
          </li>
          <li>
            <h3>订阅之后想换关注栏目怎么办？</h3>
            <p>每封摘要邮件底部都有订阅管理入口，改栏目或退订都在那一处完成，改完下一期即生效。</p>
          </li>
        </ul>
      </div>

      <aside class="qa-aside">
        <h3>还有别的路径问题</h3>
        <p>问答与指引页把首次访问、分类查找、订阅步骤分场景整理，按你的处境挑一条看。</p>
        <a class="btn btn--cyan" href="/faqs/">去问答与指引</a>
        <a class="btn btn--outline" href="/find-us/">找客服问一句</a>
      </aside>
    </div>
  </section>
</main>

.page-products {
  --tool-line: rgba(11, 31, 51, .16);
}

.page-products .section {
  padding-block: clamp(38px, 5.5vw, 68px);
}

.page-products .breadcrumbs {
  padding-top: clamp(14px, 2vw, 22px);
  font-size: 13px;
}

.page-products .tools-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark-strong);
  margin-top: 12px;
  padding-block: clamp(34px, 5vw, 62px) clamp(30px, 4.5vw, 54px);
}

.page-products .tools-hero::after {
  content: "";
  position: absolute;
  top: -22%;
  right: -14%;
  width: min(60vw, 660px);
  height: 150%;
  background: linear-gradient(165deg, rgba(24, 200, 216, .38), rgba(24, 200, 216, 0) 68%);
  transform: skewX(-13deg);
  pointer-events: none;
}

.page-products .tools-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .hero-eyebrow {
  color: var(--cyan-soft);
}

.page-products .tools-hero h1 {
  margin: 12px 0 0;
  max-width: 22ch;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.14;
  letter-spacing: -.5px;
  color: var(--paper);
}

.page-products .tools-hero__lead {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--on-dark);
}

.page-products .hero-jump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .hero-jump a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(140, 232, 239, .34);
  background: rgba(11, 31, 51, .34);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.page-products .hero-jump a:hover,
.page-products .hero-jump a:focus-visible {
  background: rgba(24, 200, 216, .2);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.page-products .hero-jump a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .hero-jump__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
}

.page-products .matrix-layout {
  display: grid;
  gap: 26px;
  margin-top: 26px;
}

.page-products .matrix-figure {
  margin: 0;
}

.page-products .tool-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tool-line);
}

.page-products .tool-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 6px 18px 10px;
  border-bottom: 1px solid var(--tool-line);
  transition: background-color .2s var(--ease);
}

.page-products .tool-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--cyan);
  transition: width .24s var(--ease);
}

.page-products .tool-row:hover,
.page-products .tool-row:focus-within {
  background: rgba(24, 200, 216, .07);
}

.page-products .tool-row:hover::before,
.page-products .tool-row:focus-within::before {
  width: 4px;
}

.page-products .tool-row__num {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--cyan);
}

.page-products .tool-row__body h3 {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.4;
}

.page-products .tool-row__body h3 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease);
}

.page-products .tool-row__body h3 a:hover,
.page-products .tool-row__body h3 a:focus-visible {
  border-bottom-color: var(--coral);
}

.page-products .tool-row__body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .tool-row__arrow {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--mist);
  transition: color .2s var(--ease), transform .2s var(--ease);
}

.page-products .tool-row:hover .tool-row__arrow {
  color: var(--coral);
  transform: translateX(3px);
}

.page-products .index-section {
  background: linear-gradient(180deg, rgba(12, 58, 90, .05), rgba(12, 58, 90, 0) 220px);
  border-top: 1px solid var(--tool-line);
}

.page-products .section-head--split {
  display: grid;
  gap: 12px;
}

.page-products .index-layout {
  display: grid;
  gap: 26px;
  margin-top: 26px;
}

.page-products .index-rail {
  background: var(--card);
  border: 1px solid var(--tool-line);
  border-top: 3px solid var(--navy);
  padding: 18px;
  box-shadow: 4px 4px 0 rgba(11, 31, 51, .06);
}

.page-products .rail-block + .rail-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--tool-line);
}

.page-products .rail-block__title {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--slate);
}

.page-products .rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .rail-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--slate);
  border-bottom: 1px dashed rgba(11, 31, 51, .1);
}

.page-products .rail-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  background: rgba(24, 200, 216, .16);
  padding: 1px 7px;
  border-radius: var(--radius);
}

.page-products .rail-note {
  margin: 18px 0 0;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1.6;
  border-radius: var(--radius);
}

.page-products .rail-note__num {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--cyan);
}

.page-products .index-figure {
  margin: 0 0 20px;
}

.page-products .cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.page-products .cat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 15px 13px;
  background: var(--card);
  border: 1px solid var(--tool-line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(11, 31, 51, .05);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.page-products .cat-card:nth-child(3n + 2) {
  border-top-color: var(--cyan);
}

.page-products .cat-card:nth-child(3n + 3) {
  border-top-color: var(--coral);
}

.page-products .cat-card:hover,
.page-products .cat-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 4px 9px 0 rgba(11, 31, 51, .12);
}

.page-products .cat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-products .cat-card__code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--mist);
  padding: 2px 7px;
  border-radius: var(--radius);
}

.page-products .cat-card__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}

.page-products .cat-card__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.page-products .cat-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.page-products .cat-card__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
}

.page-products .cat-card__list span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  white-space: nowrap;
}

.page-products .cat-card__copy {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--slate);
  background: transparent;
  border: 1px dashed var(--tool-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}

.page-products .cat-card__copy:hover {
  color: var(--ink);
  border-color: var(--cyan);
  background: rgba(24, 200, 216, .12);
}

.page-products .cat-card__copy:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .tablet-section {
  padding-inline: 0;
}

.page-products .tablet-board {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.6vw, 46px);
  background: var(--coral);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(11, 31, 51, .16);
}

.page-products .tablet-board::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -16%;
  width: 54%;
  height: 180%;
  background: linear-gradient(190deg, rgba(24, 200, 216, .88), rgba(24, 200, 216, .22));
  transform: skewX(-13deg);
  pointer-events: none;
}

.page-products .tablet-board__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
}

.page-products .eyebrow--on-coral {
  color: var(--coral-deep);
}

.page-products .tablet-board h2 {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--ink);
}

.page-products .tablet-board__lead {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.8;
  color: #3A1608;
}

.page-products .subzones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .subzones li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}

.page-products .subzones__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--coral-deep);
}

.page-products .subzones strong {
  font-size: 15px;
  color: var(--ink);
}

.page-products .subzones em {
  font-style: normal;
  font-size: 12px;
  color: var(--slate);
}

.page-products .quick-index__title {
  margin: 22px 0 8px;
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--coral-deep);
}

.page-products .quick-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .quick-index li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px dashed rgba(11, 31, 51, .26);
}

.page-products .quick-index li span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--coral-deep);
}

.page-products .tablet-board__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-products .tablet-figure {
  margin: 0;
}

.page-products .tablet-board__tip {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #3A1608;
}

.page-products .tablet-board__btn {
  align-self: flex-start;
}

.page-products .v3-layout {
  display: grid;
  gap: 26px;
}

.page-products .v3-title {
  margin: 10px 0 0;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.24;
  color: var(--ink);
}

.page-products .v3-lead {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--slate);
}

.page-products .v3-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.page-products .v3-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  background: var(--card);
  border-left: 3px solid var(--coral);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.page-products .v3-steps__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--coral-deep);
}

.page-products .v3-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .v3-btn {
  margin-top: 18px;
}

.page-products .v3-figure {
  margin: 0;
}

.page-products .flow-section {
  border-top: 1px solid var(--tool-line);
}

.page-products .flow {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .flow li {
  padding: 18px 18px 20px;
  background: var(--card);
  border: 1px solid var(--tool-line);
  border-left: 4px solid var(--cyan);
  border-radius: var(--radius);
}

.page-products .flow li:nth-child(2) {
  border-left-color: var(--coral);
}

.page-products .flow li:nth-child(3) {
  border-left-color: var(--navy);
}

.page-products .flow__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1;
  color: var(--mist);
}

.page-products .flow h3 {
  margin: 8px 0 6px;
  font-size: 17px;
  line-height: 1.4;
}

.page-products .flow p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--slate);
}

.page-products .flow-figure {
  margin: 26px 0 0;
}

.page-products .flow-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--slate);
}

.page-products .flow-note a {
  color: var(--ink);
  border-bottom: 2px solid var(--cyan);
  text-decoration: none;
}

.page-products .flow-note a:hover,
.page-products .flow-note a:focus-visible {
  border-bottom-color: var(--coral);
}

.page-products .qa-section {
  background: linear-gradient(180deg, rgba(24, 200, 216, .07), rgba(24, 200, 216, 0) 80%);
  border-top: 1px solid var(--tool-line);
}

.page-products .qa-layout {
  display: grid;
  gap: 24px;
}

.page-products .qa-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tool-line);
}

.page-products .qa-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--tool-line);
}

.page-products .qa-list h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.5;
}

.page-products .qa-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.78;
  color: var(--slate);
}

.page-products .qa-aside {
  padding: 20px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 rgba(24, 200, 216, .3);
}

.page-products .qa-aside h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--paper);
}

.page-products .qa-aside p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.75;
}

.page-products .qa-aside .btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.page-products .media--wide {
  aspect-ratio: 3 / 2;
}

.page-products .media--pano {
  aspect-ratio: 2 / 1;
}

.page-products .media--tall {
  aspect-ratio: 5 / 6;
}

.page-products .media--drawer {
  aspect-ratio: 10 / 7;
}

.page-products .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .page-products .hero-jump {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .quick-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-products .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 32px;
    align-items: end;
  }

  .page-products .matrix-layout {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 40px;
    align-items: start;
  }

  .page-products .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .page-products .qa-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 38px;
    align-items: start;
  }
}

@media (min-width: 960px) {
  .page-products .index-layout {
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }

  .page-products .index-rail {
    position: sticky;
    top: 96px;
  }

  .page-products .tablet-board__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
    gap: 40px;
    align-items: start;
  }

  .page-products .v3-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 48px;
    align-items: start;
  }
}

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

@media (max-width: 520px) {
  .page-products .subzones {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-products .tools-hero h1 {
    font-size: 28px;
  }

  .page-products .tool-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .page-products .tool-row__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .hero-jump a,
  .page-products .tool-row,
  .page-products .tool-row::before,
  .page-products .tool-row__arrow,
  .page-products .cat-card,
  .page-products .cat-card__copy {
    transition-duration: .01ms;
  }

  .page-products .hero-jump a:hover,
  .page-products .cat-card:hover,
  .page-products .cat-card:focus-within {
    transform: none;
  }

  .page-products .tool-row:hover .tool-row__arrow {
    transform: none;
  }
}

@media print {
  .page-products .hero-jump,
  .page-products .v3-btn,
  .page-products .qa-aside {
    display: none;
  }

  .page-products .cat-card,
  .page-products .tablet-board {
    box-shadow: none;
  }
}