.page-products{
  background: var(--paper-100);
  color: var(--ink-900);
}

.page-products img{
  display: block;
  max-width: 100%;
  height: auto;
}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family: var(--font-cond);
  margin: 0;
}

.page-products .eyebrow{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--apricot-500);
}

.page-products h1{
  margin: .45rem 0 1rem;
  font-size: clamp(2.05rem, 6.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--paper-100);
}

.page-products .section-title{
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.page-products .lede{
  margin: 0;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 62ch;
}

.page-products .prod-hero .lede,
.page-products .prod-section--night .lede{
  color: rgba(244,235,221,.84);
}

.page-products .prod-hero{
  position: relative;
  overflow: hidden;
  padding: 28px 0 58px;
  background: var(--green-900);
  color: var(--paper-100);
}

.page-products .prod-hero::after{
  content: "";
  position: absolute;
  top: -30%;
  right: -22%;
  width: 70%;
  height: 180%;
  background: linear-gradient(160deg, rgba(242,138,46,.20), rgba(53,214,196,.06));
  transform: rotate(14deg);
  pointer-events: none;
}

.page-products .prod-hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-products .prod-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .prod-stats{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-paper);
}

.page-products .prod-stat-num{
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--apricot-500);
}

.page-products .prod-stat-label{
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  line-height: 1.45;
  color: rgba(244,235,221,.7);
}

.page-products .prod-hero-visual{
  position: relative;
}

.page-products .prod-hero-img{
  margin: 0;
  border: 1px solid var(--line-paper);
}

.page-products .device{
  position: relative;
  width: min(320px, 100%);
  margin: -2.2rem auto 0;
  padding: 12px 12px 10px;
  background: var(--paper-100);
  border: 6px solid var(--green-900);
  box-shadow: 0 18px 40px rgba(14,31,26,.45);
  color: var(--ink-900);
}

.page-products .device-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--grey-green);
}

.page-products .device-dot{
  display: block;
  width: 7px;
  height: 7px;
  background: var(--cyan-400);
}

.page-products .device-list{
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.page-products .device-list li{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-ink-soft);
  font-size: .76rem;
}

.page-products .device-list li:last-child{
  border-bottom: 0;
}

.page-products .dev-time{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--red-600);
  white-space: nowrap;
}

.page-products .dev-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-products .device-foot{
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--grey-green);
}

.page-products .prod-section{
  position: relative;
  padding: 50px 0;
}

.page-products .prod-section--night{
  background: var(--green-900);
  color: var(--paper-100);
}

.page-products .prod-section--paper{
  background: var(--paper-200);
}

.page-products .prod-head{
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-ink);
}

.page-products .prod-section--night .prod-head{
  border-bottom-color: var(--line-paper);
}

.page-products .prod-text{
  margin: 0 0 16px;
  font-size: .94rem;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 58ch;
}

.page-products .prod-text--small{
  font-size: .84rem;
  color: var(--grey-green);
}

.page-products .prod-section--night .prod-text,
.page-products .prod-section--night .prod-text--small{
  color: rgba(244,235,221,.82);
}

.page-products .prod-text a{
  color: var(--apricot-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .prod-channel-grid{
  display: grid;
  gap: 1px;
  background: var(--line-paper);
  border: 1px solid var(--line-paper);
}

.page-products .prod-channel-item{
  background: var(--green-800);
  padding: 22px 18px;
}

.page-products .prod-ch-num{
  display: block;
  margin-bottom: 10px;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gold-400);
}

.page-products .prod-channel-item h3{
  margin-bottom: 8px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--paper-100);
}

.page-products .prod-channel-item p{
  margin: 0;
  font-size: .85rem;
  line-height: 1.75;
  color: rgba(244,235,221,.78);
}

.page-products .prod-schedule{
  background: var(--paper-100);
}

.page-products .prod-schedule-grid{
  display: grid;
  gap: 30px;
}

.page-products .prod-schedule-img{
  margin: 0;
}

.page-products .prod-schedule-img img{
  width: 100%;
}

.page-products .prod-copy-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 14px 16px;
  background: var(--paper-200);
  border: 1px dashed var(--line-ink);
}

.page-products .prod-copy-code{
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  overflow-wrap: anywhere;
  color: var(--ink-900);
}

.page-products .prod-copy-status{
  margin: 8px 0 18px;
  min-height: 1.1em;
  font-size: .75rem;
  color: var(--red-600);
}

.page-products .prod-refresh{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-left: 2px solid var(--apricot-500);
}

.page-products .prod-refresh li{
  display: grid;
  grid-template-columns: 5.6rem minmax(0,1fr);
  gap: 12px;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--line-ink-soft);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ink-700);
}

.page-products .prod-refresh li:last-child{
  border-bottom: 0;
}

.page-products .prod-refresh .mono{
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  color: var(--green-700);
}

.page-products .prod-lineup-grid{
  display: grid;
  gap: 16px;
}

.page-products .prod-round{
  background: var(--paper-100);
  border: 1px solid var(--line-ink);
}

.page-products .prod-round-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--green-900);
  color: var(--paper-100);
  font-size: .82rem;
  font-weight: 700;
}

.page-products .prod-round-head .mono{
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  color: var(--cyan-400);
}

.page-products .prod-round-list{
  list-style: none;
  margin: 0;
  padding: 4px 14px 10px;
}

.page-products .prod-round-list li{
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-ink-soft);
  font-size: .84rem;
}

.page-products .prod-round-list li:last-child{
  border-bottom: 0;
}

.page-products .prod-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--red-600);
}

.page-products .prod-state{
  padding: 2px 6px;
  border: 1px solid var(--line-ink);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--grey-green);
  white-space: nowrap;
}

.page-products .prod-state.is-start{
  border-color: var(--cyan-400);
  color: var(--green-700);
}

.page-products .prod-state.is-sub{
  border-color: var(--line-ink-soft);
  color: var(--grey-green);
}

.page-products .prod-state.is-out{
  border-color: var(--red-600);
  color: var(--red-600);
}

.page-products .prod-lineup-img{
  margin: 22px 0 0;
}

.page-products .prod-cache-grid{
  display: grid;
  gap: 30px;
}

.page-products .prod-cache-figure{
  position: relative;
  margin: 0;
}

.page-products .prod-cache-figure img{
  width: 100%;
  border: 1px solid var(--line-paper);
}

.page-products .prod-meter-card{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -22px 0 0 16px;
  padding: 14px 16px;
  background: var(--green-800);
  border: 1px solid var(--line-gold);
}

.page-products .prod-ring{
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
}

.page-products .prod-meter-body{
  flex: 1;
  min-width: 0;
}

.page-products .prod-meter-label{
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--paper-100);
}

.page-products .prod-meter-track{
  height: 6px;
  background: rgba(244,235,221,.16);
  overflow: hidden;
}

.page-products .prod-meter-fill{
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-400), var(--apricot-500));
}

.page-products .prod-meter-note{
  margin: 8px 0 0;
  font-size: .68rem;
  color: rgba(244,235,221,.65);
}

.page-products .prod-switch-wrap{
  position: relative;
  margin-top: 24px;
}

.page-products .prod-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-products .prod-switch{
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(244,235,221,.9);
}

.page-products .prod-switch-track{
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 24px;
  background: var(--green-800);
  border: 1px solid var(--line-paper);
  transition: background var(--ease), border-color var(--ease);
}

.page-products .prod-switch-knob{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--grey-green);
  transition: transform var(--ease), background var(--ease);
}

.page-products .prod-switch-input:checked ~ .prod-switch .prod-switch-track{
  background: var(--apricot-500);
  border-color: var(--apricot-500);
}

.page-products .prod-switch-input:checked ~ .prod-switch .prod-switch-knob{
  background: var(--green-900);
  transform: translateX(22px);
}

.page-products .prod-switch-input:focus-visible ~ .prod-switch .prod-switch-track{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}

.page-products .prod-switch-off{
  display: none;
}

.page-products .prod-switch-input:not(:checked) ~ .prod-switch .prod-switch-on{
  display: none;
}

.page-products .prod-switch-input:not(:checked) ~ .prod-switch .prod-switch-off{
  display: inline;
}

.page-products .prod-panel{
  padding: 50px 0;
  background: var(--paper-100);
}

.page-products .prod-panel-inner{
  display: grid;
  gap: 20px;
  padding: 26px 20px;
  background: var(--apricot-500);
  border-left: 8px solid var(--green-900);
  color: var(--ink-900);
}

.page-products .prod-panel-inner .eyebrow{
  color: var(--green-900);
}

.page-products .prod-panel-copy p{
  margin: 0;
  font-size: .87rem;
  line-height: 1.78;
  color: rgba(26,23,20,.86);
  max-width: 62ch;
}

.page-products .prod-panel-title{
  margin: 6px 0 10px;
  font-size: clamp(1.22rem, 2.7vw, 1.68rem);
  font-weight: 700;
  line-height: 1.26;
  color: var(--ink-900);
}

.page-products .prod-panel-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  background: var(--green-900);
  color: var(--paper-100);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease), transform var(--ease);
}

.page-products .prod-panel-link:hover{
  background: var(--green-800);
  transform: translateY(-2px);
}

.page-products .prod-audience{
  background: var(--paper-100);
}

.page-products .prod-aud-grid{
  display: grid;
  gap: 16px;
}

.page-products .prod-aud-card{
  padding: 22px 20px;
  background: var(--paper-100);
  border: 1px solid var(--line-ink);
  border-top: 3px solid var(--green-900);
}

.page-products .prod-aud-tag{
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--apricot-500);
}

.page-products .prod-aud-card h3{
  margin: 0 0 10px;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.42;
}

.page-products .prod-aud-card p{
  margin: 0;
  font-size: .87rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-products .prod-aud-fig{
  margin: 0;
}

.page-products .prod-aud-fig img{
  width: 100%;
  min-height: 210px;
  object-fit: cover;
  border: 1px solid var(--line-ink);
}

.page-products .prod-inline-link{
  display: inline-block;
  margin-top: 12px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--red-600);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--ease);
}

.page-products .prod-inline-link:hover{
  color: var(--green-900);
}

.page-products .prod-steps-grid{
  display: grid;
  gap: 26px;
}

.page-products .prod-accordion{
  border-top: 1px solid var(--line-ink);
}

.page-products .prod-step{
  border-bottom: 1px solid var(--line-ink);
}

.page-products .prod-step summary{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: .97rem;
  font-weight: 700;
  color: var(--ink-900);
}

.page-products .prod-step summary::-webkit-details-marker{
  display: none;
}

.page-products .prod-step summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--apricot-500);
}

.page-products .prod-step[open] summary::after{
  content: "–";
}

.page-products .prod-step-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--green-700);
}

.page-products .prod-step p{
  margin: 0 0 18px;
  padding: 0 4px;
  font-size: .87rem;
  line-height: 1.78;
  color: var(--ink-700);
  max-width: 56ch;
}

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

  .page-products .prod-channel-item{
    padding: 26px 22px;
  }

  .page-products .prod-lineup-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .page-products .prod-stat-num{
    font-size: 1.35rem;
  }
}

@media (min-width: 900px){
  .page-products .prod-hero{
    padding: 40px 0 76px;
  }

  .page-products .prod-hero-grid{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    gap: 52px;
    align-items: start;
  }

  .page-products .device{
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 300px;
    margin: 0;
  }

  .page-products .prod-section{
    padding: 66px 0;
  }

  .page-products .prod-schedule-grid{
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
    gap: 54px;
    align-items: start;
  }

  .page-products .prod-cache-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
    gap: 54px;
    align-items: center;
  }

  .page-products .prod-panel-inner{
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 32px 30px;
  }

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

  .page-products .prod-aud-a{
    grid-column: span 7;
  }

  .page-products .prod-aud-fig{
    grid-column: span 5;
  }

  .page-products .prod-aud-b{
    grid-column: span 5;
  }

  .page-products .prod-aud-c{
    grid-column: span 7;
  }

  .page-products .prod-steps-grid{
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    gap: 54px;
    align-items: start;
  }

  .page-products .prod-lineup-img{
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .prod-panel-link:hover{
    transform: none;
  }

  .page-products .prod-switch-track,
  .page-products .prod-switch-knob{
    transition: none;
  }
}


<main id="main-content" class="page-products">

  <nav class="breadcrumb container" aria-label="面包屑导航">
    <ol class="breadcrumb-list">
      <li><a class="breadcrumb-link" href="/">首页</a></li>
      <li class="breadcrumb-current" aria-current="page">产品与下载</li>
    </ol>
  </nav>

  <section class="prod-hero">
    <div class="container prod-hero-grid">
      <div class="prod-hero-copy">
        <p class="eyebrow">产品与下载 · 稳定版 3.8</p>
        <h1>赛程、阵容、缓存，一个入口从赛前排到散场</h1>
        <p class="lede">杏彩体育把赛程区间、近三轮名单和当日战报放进同一套产品里：先在电脑上把周末两场排好，再让手机把当天的栏目存下来，地铁里翻看不必等网络。</p>
        <div class="prod-actions">
          <a class="btn btn-signal" href="#download-steps">获取 APP</a>
          <a class="btn btn-ghost" href="/guide/">打开使用指南</a>
        </div>
        <ul class="prod-stats">
          <li><span class="prod-stat-num">3 端</span><span class="prod-stat-label">内容同步更新</span></li>
          <li><span class="prod-stat-num">120</span><span class="prod-stat-label">条 · 单次缓存上限</span></li>
          <li><span class="prod-stat-num">48 MB</span><span class="prod-stat-label">安装包平均大小</span></li>
        </ul>
      </div>
      <div class="prod-hero-visual">
        <figure class="media-frame media-frame--scrim prod-hero-img">
          <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="夜间场馆俯拍，看台灯光照亮斜向的场地线条">
        </figure>
        <div class="device">
          <div class="device-bar"><span>18:00 已刷新</span><span class="device-dot" aria-hidden="true"></span></div>
          <ul class="device-list">
            <li><span class="dev-time">周三 20:00</span><span class="dev-name">主馆 · 第 12 轮</span><span class="tag tag--signal">焦点</span></li>
            <li><span class="dev-time">周四 19:30</span><span class="dev-name">副馆 · 第 13 轮</span><span class="tag">常规</span></li>
            <li><span class="dev-time">周六 15:00</span><span class="dev-name">主馆 · 第 14 轮</span><span class="tag tag--cyan">已缓存</span></li>
            <li><span class="dev-time">周日 20:00</span><span class="dev-name">副馆 · 第 15 轮</span><span class="tag tag--cyan">已缓存</span></li>
          </ul>
          <p class="device-foot">离线可用 · 4 条赛程</p>
        </div>
      </div>
    </div>
  </section>

  <section class="prod-section prod-section--night" id="channel">
    <div class="container">
      <div class="prod-head">
        <p class="eyebrow">同一份内容</p>
        <h2 class="section-title">电脑上排计划，手机上接着看</h2>
        <p class="lede">PC 网页、移动网页与 APP 共用同一套赛程与阵容内容，首屏平均加载时间低于 1.4 秒。您在办公室标好的场次，回家换个屏幕依然停在那一栏。</p>
      </div>
      <div class="prod-channel-grid">
        <article class="prod-channel-item">
          <span class="prod-ch-num mono">01</span>
          <h3>PC 网页</h3>
          <p>适合一次排开整周的赛程区间，大屏上看阵容名单和日期归档，眼睛更轻松。</p>
        </article>
        <article class="prod-channel-item">
          <span class="prod-ch-num mono">02</span>
          <h3>移动网页</h3>
          <p>不装应用也能查，浏览器里打开即读，临时想找一场比赛时足够用。</p>
        </article>
        <article class="prod-channel-item">
          <span class="prod-ch-num mono">03</span>
          <h3>APP</h3>
          <p>把当日栏目存到本地，弱网和飞行模式下照样翻阵容与赛程。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="prod-section prod-schedule" id="schedule">
    <div class="container prod-schedule-grid">
      <div class="prod-schedule-copy">
        <div class="prod-head">
          <p class="eyebrow">赛程区间</p>
          <h2 class="section-title">一天两次刷新，比赛日按日期排好</h2>
        </div>
        <p class="prod-text">早上 07:30 更新当日区间，傍晚 18:00 补齐晚间场次，赛前 90 分钟再把出场名单换上新的一版。周末连看两场之前，把要看的区间复制下来发给同行的朋友，不必反复截图。</p>
        <div class="prod-copy-row">
          <code class="prod-copy-code">周三 20:00 · 第 12 轮 · 主馆</code>
          <button class="copy-btn btn btn-sm btn-signal" type="button" data-copy="周三 20:00 · 第 12 轮 · 主馆">复制区间</button>
        </div>
        <p class="prod-copy-status"><span class="copy-live" data-copy-status aria-live="polite"></span></p>
        <ol class="prod-refresh">
          <li><span class="mono">07:30</span><span>当日赛程区间首次刷新，日期归档同步归位</span></li>
          <li><span class="mono">18:00</span><span>晚间场次与场馆信息补齐</span></li>
          <li><span class="mono">赛前 90 分</span><span>近三轮名单与出场状态更新</span></li>
        </ol>
        <p class="prod-text prod-text--small">当天的快讯和复盘会进入<a href="/blog/">战报博客</a>的比赛日归档，查完赛程顺着往下读即可。</p>
      </div>
      <figure class="media-frame media-frame--portrait prod-schedule-img">
        <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" loading="lazy" decoding="async" alt="手机屏幕上的赛程列表，按比赛日分组显示等宽日期与状态标签">
      </figure>
    </div>
  </section>

  <section class="prod-section prod-section--paper" id="lineup">
    <div class="container">
      <div class="prod-head">
        <p class="eyebrow">近三轮名单</p>
        <h2 class="section-title">谁在场上、谁有伤停，三行名单说清楚</h2>
        <p class="lede">周末连看两场之前，很多老用户会先查杏彩体育赛事阵容：近三轮的名单按位置排开，号码用等宽字体对齐，出场状态与伤停各有一枚标记，赛前 90 分钟换成最新一版。</p>
      </div>
      <div class="prod-lineup-grid">
        <article class="prod-round">
          <div class="prod-round-head"><span>第 12 轮</span><span class="mono">主场</span></div>
          <ul class="prod-round-list">
            <li><span class="prod-num">01</span><span>门将</span><span class="prod-state is-start">首发</span></li>
            <li><span class="prod-num">04</span><span>后卫</span><span class="prod-state is-start">首发</span></li>
            <li><span class="prod-num">08</span><span>中场</span><span class="prod-state is-sub">替补</span></li>
            <li><span class="prod-num">11</span><span>前锋</span><span class="prod-state is-out">伤停</span></li>
          </ul>
        </article>
        <article class="prod-round">
          <div class="prod-round-head"><span>第 13 轮</span><span class="mono">客场</span></div>
          <ul class="prod-round-list">
            <li><span class="prod-num">01</span><span>门将</span><span class="prod-state is-start">首发</span></li>
            <li><span class="prod-num">05</span><span>后卫</span><span class="prod-state is-sub">替补</span></li>
            <li><span class="prod-num">09</span><span>中场</span><span class="prod-state is-start">首发</span></li>
            <li><span class="prod-num">07</span><span>前锋</span><span class="prod-state is-start">首发</span></li>
          </ul>
        </article>
        <article class="prod-round">
          <div class="prod-round-head"><span>第 14 轮</span><span class="mono">主场</span></div>
          <ul class="prod-round-list">
            <li><span class="prod-num">12</span><span>门将</span><span class="prod-state is-sub">替补</span></li>
            <li><span class="prod-num">04</span><span>后卫</span><span class="prod-state is-start">首发</span></li>
            <li><span class="prod-num">08</span><span>中场</span><span class="prod-state is-start">首发</span></li>
            <li><span class="prod-num">11</span><span>前锋</span><span class="prod-state is-out">伤停</span></li>
          </ul>
        </article>
      </div>
      <figure class="media-frame prod-lineup-img">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="纸质名单卡与屏幕名单并置，列出位置、号码、出场状态与伤停标记">
      </figure>
    </div>
  </section>

  <section class="prod-section prod-section--night prod-cache" id="cache">
    <div class="container prod-cache-grid">
      <div class="prod-cache-copy">
        <div class="prod-head">
          <p class="eyebrow">离线缓存</p>
          <h2 class="section-title">进地铁前按一下保存，出站还是那一屏</h2>
        </div>
        <p class="prod-text">当日栏目和近三轮名单都可以先存到手机里，单次最多保存 120 条赛程记录。栏目订阅可以把提醒放在赛前 90 分钟或开赛前 30 分钟，抬眼看手机就知道该不该赶下一场。</p>
        <div class="prod-switch-wrap">
          <input class="prod-switch-input" type="checkbox" id="prod-cache-switch" checked>
          <label class="prod-switch" for="prod-cache-switch">
            <span class="prod-switch-track" aria-hidden="true"><span class="prod-switch-knob"></span></span>
            <span class="prod-switch-on">缓存已开启 · 打开即是当天内容</span>
            <span class="prod-switch-off">缓存已关闭 · 弱网环境会等待加载</span>
          </label>
        </div>
      </div>
      <figure class="prod-cache-figure">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" loading="lazy" decoding="async" alt="手机 APP 离线缓存界面特写，显示已保存栏目、容量刻度与赛程条">
        <figcaption class="prod-meter-card">
          <svg class="prod-ring" viewBox="0 0 80 80" aria-hidden="true">
            <circle cx="40" cy="40" r="32" fill="none" stroke="rgba(244,235,221,.16)" stroke-width="8"></circle>
            <circle cx="40" cy="40" r="32" fill="none" stroke="#35D6C4" stroke-width="8" stroke-dasharray="201" stroke-dashoffset="56" transform="rotate(-90 40 40)"></circle>
          </svg>
          <div class="prod-meter-body">
            <p class="prod-meter-label">已保存 86 / 120 条</p>
            <div class="prod-meter-track"><span class="prod-meter-fill"></span></div>
            <p class="prod-meter-note">当日栏目 · 近三轮名单</p>
          </div>
        </figcaption>
      </figure>
    </div>
  </section>

  <section class="prod-section prod-panel">
    <div class="container prod-panel-inner">
      <div class="prod-panel-copy">
        <p class="eyebrow">稳定版 3.8 · 说明面板</p>
        <h2 class="prod-panel-title">场馆信息、版本差异、缓存问题，一页看全</h2>
        <p>42 个条目按场馆信息、赛程区间、版本差异、常见问题四组排开，从第一次安装到跨版本迁移都能对上号。需要这些细节时，直接进使用指南。</p>
      </div>
      <a class="prod-panel-link" href="/guide/">打开使用指南</a>
    </div>
  </section>

  <section class="prod-section prod-audience" id="audience">
    <div class="container">
      <div class="prod-head">
        <p class="eyebrow">适合谁</p>
        <h2 class="section-title">三种人，三种用法</h2>
      </div>
      <div class="prod-aud-grid">
        <article class="prod-aud-card prod-aud-a">
          <span class="prod-aud-tag">周末连看</span>
          <h3>老用户：开赛前把两场排进同一屏</h3>
          <p>把周六与周日的区间一次看全，近三轮名单提前读一遍，判断轮换和伤停之后，再决定取票还是安排出发时间。</p>
        </article>
        <figure class="prod-aud-fig">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" loading="lazy" decoding="async" alt="通勤途中手持手机查看已缓存的赛程列表，屏幕内容清晰">
        </figure>
        <article class="prod-aud-card prod-aud-b">
          <span class="prod-aud-tag">通勤路上</span>
          <h3>上班族：缓存好，车厢里照常翻</h3>
          <p>出门前存下当日栏目，换乘时不用等加载；提醒设在赛前 90 分钟，早高峰就能决定晚上去不去场馆。</p>
        </article>
        <article class="prod-aud-card prod-aud-c">
          <span class="prod-aud-tag">数据与内容伙伴</span>
          <h3>合作方：赛程与场馆信息可以对接</h3>
          <p>需要按比赛日同步的赛程区间、阵容名单或场馆公告，可以走合作渠道谈谈接入方式和更新节奏。</p>
          <a class="prod-inline-link" href="/cooperation/">了解合作方式</a>
        </article>
      </div>
    </div>
  </section>

  <section class="prod-section prod-section--paper prod-steps" id="download-steps">
    <div class="container prod-steps-grid">
      <div class="prod-steps-copy">
        <div class="prod-head">
          <p class="eyebrow">获取与安装</p>
          <h2 class="section-title">四步装好，第二天通勤就能用</h2>
        </div>
        <p class="prod-text">下载Xingcai体育APP查赛程，是通勤族最常用的一条路：装好之后先缓一次，往后就只剩打开和翻页。安装包平均 48MB，用移动网络下载也不心疼。</p>
        <p class="prod-text prod-text--small">装完想对照着看细节，可以回到<a href="/">首页</a>，从今日赛程刻度进入。</p>
      </div>
      <div class="prod-accordion">
        <details class="prod-step" open>
          <summary><span class="prod-step-num">01</span><span class="prod-step-title">选择 Android 或 iOS</span></summary>
          <p>两个版本功能一致，都支持离线缓存与栏目订阅；按手机系统选一个即可，不必两个都装。</p>
        </details>
        <details class="prod-step">
          <summary><span class="prod-step-num">02</span><span class="prod-step-title">下载并完成安装</span></summary>
          <p>安装包平均 48MB，在 Wi-Fi 环境下几分钟装好；安装过程中若提示来源限制，按系统引导放行即可继续。</p>
        </details>
        <details class="prod-step">
          <summary><span class="prod-step-num">03</span><span class="prod-step-title">登录后开启缓存与订阅</span></summary>
          <p>首次进入在设置里打开离线缓存，再选择赛前 90 分钟或开赛前 30 分钟作为提醒时间；两档也可以只留一档。</p>
        </details>
        <details class="prod-step">
          <summary><span class="prod-step-num">04</span><span class="prod-step-title">回到当日栏目看一眼</span></summary>
          <p>把当天栏目点开一次，看到“已缓存”标记就说明存好了；第二天进站前不必再联网重刷。</p>
        </details>
      </div>
    </div>
  </section>

</main>

.page-products{
  background: var(--paper-100);
  color: var(--ink-900);
}

.page-products img{
  display: block;
  max-width: 100%;
  height: auto;
}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family: var(--font-cond);
  margin: 0;
}

.page-products .eyebrow{
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--apricot-500);
}

.page-products h1{
  margin: .45rem 0 1rem;
  font-size: clamp(2.05rem, 6.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--paper-100);
}

.page-products .section-title{
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.page-products .lede{
  margin: 0;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--ink-700);
  max-width: 62ch;
}

.page-products .prod-hero .lede,
.page-products .prod-section--night .lede{
  color: rgba(244,235,221,.84);
}

.page-products .prod-hero{
  position: relative;
  overflow: hidden;
  padding: 28px 0 58px;
  background: var(--green-900);
  color: var(--paper-100);
}

.page-products .prod-hero::after{
  content: "";
  position: absolute;
  top: -30%;
  right: -22%;
  width: 70%;
  height: 180%;
  background: linear-gradient(160deg, rgba(242,138,46,.20), rgba(53,214,196,.06));
  transform: rotate(14deg);
  pointer-events: none;
}

.page-products .prod-hero-grid{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.page-products .prod-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .prod-stats{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-paper);
}

.page-products .prod-stat-num{
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--apricot-500);
}

.page-products .prod-stat-label{
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  line-height: 1.45;
  color: rgba(244,235,221,.7);
}

.page-products .prod-hero-visual{
  position: relative;
}

.page-products .prod-hero-img{
  margin: 0;
  border: 1px solid var(--line-paper);
}

.page-products .device{
  position: relative;
  width: min(320px, 100%);
  margin: -2.2rem auto 0;
  padding: 12px 12px 10px;
  background: var(--paper-100);
  border: 6px solid var(--green-900);
  box-shadow: 0 18px 40px rgba(14,31,26,.45);
  color: var(--ink-900);
}

.page-products .device-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--grey-green);
}

.page-products .device-dot{
  display: block;
  width: 7px;
  height: 7px;
  background: var(--cyan-400);
}

.page-products .device-list{
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.page-products .device-list li{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-ink-soft);
  font-size: .76rem;
}

.page-products .device-list li:last-child{
  border-bottom: 0;
}

.page-products .dev-time{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--red-600);
  white-space: nowrap;
}

.page-products .dev-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-products .device-foot{
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--grey-green);
}

.page-products .prod-section{
  position: relative;
  padding: 50px 0;
}

.page-products .prod-section--night{
  background: var(--green-900);
  color: var(--paper-100);
}

.page-products .prod-section--paper{
  background: var(--paper-200);
}

.page-products .prod-head{
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-ink);
}

.page-products .prod-section--night .prod-head{
  border-bottom-color: var(--line-paper);
}

.page-products .prod-text{
  margin: 0 0 16px;
  font-size: .94rem;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 58ch;
}

.page-products .prod-text--small{
  font-size: .84rem;
  color: var(--grey-green);
}

.page-products .prod-section--night .prod-text,
.page-products .prod-section--night .prod-text--small{
  color: rgba(244,235,221,.82);
}

.page-products .prod-text a{
  color: var(--apricot-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .prod-channel-grid{
  display: grid;
  gap: 1px;
  background: var(--line-paper);
  border: 1px solid var(--line-paper);
}

.page-products .prod-channel-item{
  background: var(--green-800);
  padding: 22px 18px;
}

.page-products .prod-ch-num{
  display: block;
  margin-bottom: 10px;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--gold-400);
}

.page-products .prod-channel-item h3{
  margin-bottom: 8px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--paper-100);
}

.page-products .prod-channel-item p{
  margin: 0;
  font-size: .85rem;
  line-height: 1.75;
  color: rgba(244,235,221,.78);
}

.page-products .prod-schedule{
  background: var(--paper-100);
}

.page-products .prod-schedule-grid{
  display: grid;
  gap: 30px;
}

.page-products .prod-schedule-img{
  margin: 0;
}

.page-products .prod-schedule-img img{
  width: 100%;
}

.page-products .prod-copy-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 14px 16px;
  background: var(--paper-200);
  border: 1px dashed var(--line-ink);
}

.page-products .prod-copy-code{
  min-width: 0;
  font-family: var(--font-mono);
  font-size: .8rem;
  overflow-wrap: anywhere;
  color: var(--ink-900);
}

.page-products .prod-copy-status{
  margin: 8px 0 18px;
  min-height: 1.1em;
  font-size: .75rem;
  color: var(--red-600);
}

.page-products .prod-refresh{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border-left: 2px solid var(--apricot-500);
}

.page-products .prod-refresh li{
  display: grid;
  grid-template-columns: 5.6rem minmax(0,1fr);
  gap: 12px;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--line-ink-soft);
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ink-700);
}

.page-products .prod-refresh li:last-child{
  border-bottom: 0;
}

.page-products .prod-refresh .mono{
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 700;
  color: var(--green-700);
}

.page-products .prod-lineup-grid{
  display: grid;
  gap: 16px;
}

.page-products .prod-round{
  background: var(--paper-100);
  border: 1px solid var(--line-ink);
}

.page-products .prod-round-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: var(--green-900);
  color: var(--paper-100);
  font-size: .82rem;
  font-weight: 700;
}

.page-products .prod-round-head .mono{
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  color: var(--cyan-400);
}

.page-products .prod-round-list{
  list-style: none;
  margin: 0;
  padding: 4px 14px 10px;
}

.page-products .prod-round-list li{
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-ink-soft);
  font-size: .84rem;
}

.page-products .prod-round-list li:last-child{
  border-bottom: 0;
}

.page-products .prod-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--red-600);
}

.page-products .prod-state{
  padding: 2px 6px;
  border: 1px solid var(--line-ink);
  font-size: .64rem;
  letter-spacing: .06em;
  color: var(--grey-green);
  white-space: nowrap;
}

.page-products .prod-state.is-start{
  border-color: var(--cyan-400);
  color: var(--green-700);
}

.page-products .prod-state.is-sub{
  border-color: var(--line-ink-soft);
  color: var(--grey-green);
}

.page-products .prod-state.is-out{
  border-color: var(--red-600);
  color: var(--red-600);
}

.page-products .prod-lineup-img{
  margin: 22px 0 0;
}

.page-products .prod-cache-grid{
  display: grid;
  gap: 30px;
}

.page-products .prod-cache-figure{
  position: relative;
  margin: 0;
}

.page-products .prod-cache-figure img{
  width: 100%;
  border: 1px solid var(--line-paper);
}

.page-products .prod-meter-card{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -22px 0 0 16px;
  padding: 14px 16px;
  background: var(--green-800);
  border: 1px solid var(--line-gold);
}

.page-products .prod-ring{
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
}

.page-products .prod-meter-body{
  flex: 1;
  min-width: 0;
}

.page-products .prod-meter-label{
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--paper-100);
}

.page-products .prod-meter-track{
  height: 6px;
  background: rgba(244,235,221,.16);
  overflow: hidden;
}

.page-products .prod-meter-fill{
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-400), var(--apricot-500));
}

.page-products .prod-meter-note{
  margin: 8px 0 0;
  font-size: .68rem;
  color: rgba(244,235,221,.65);
}

.page-products .prod-switch-wrap{
  position: relative;
  margin-top: 24px;
}

.page-products .prod-switch-input{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-products .prod-switch{
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(244,235,221,.9);
}

.page-products .prod-switch-track{
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 24px;
  background: var(--green-800);
  border: 1px solid var(--line-paper);
  transition: background var(--ease), border-color var(--ease);
}

.page-products .prod-switch-knob{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--grey-green);
  transition: transform var(--ease), background var(--ease);
}

.page-products .prod-switch-input:checked ~ .prod-switch .prod-switch-track{
  background: var(--apricot-500);
  border-color: var(--apricot-500);
}

.page-products .prod-switch-input:checked ~ .prod-switch .prod-switch-knob{
  background: var(--green-900);
  transform: translateX(22px);
}

.page-products .prod-switch-input:focus-visible ~ .prod-switch .prod-switch-track{
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}

.page-products .prod-switch-off{
  display: none;
}

.page-products .prod-switch-input:not(:checked) ~ .prod-switch .prod-switch-on{
  display: none;
}

.page-products .prod-switch-input:not(:checked) ~ .prod-switch .prod-switch-off{
  display: inline;
}

.page-products .prod-panel{
  padding: 50px 0;
  background: var(--paper-100);
}

.page-products .prod-panel-inner{
  display: grid;
  gap: 20px;
  padding: 26px 20px;
  background: var(--apricot-500);
  border-left: 8px solid var(--green-900);
  color: var(--ink-900);
}

.page-products .prod-panel-inner .eyebrow{
  color: var(--green-900);
}

.page-products .prod-panel-copy p{
  margin: 0;
  font-size: .87rem;
  line-height: 1.78;
  color: rgba(26,23,20,.86);
  max-width: 62ch;
}

.page-products .prod-panel-title{
  margin: 6px 0 10px;
  font-size: clamp(1.22rem, 2.7vw, 1.68rem);
  font-weight: 700;
  line-height: 1.26;
  color: var(--ink-900);
}

.page-products .prod-panel-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  background: var(--green-900);
  color: var(--paper-100);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease), transform var(--ease);
}

.page-products .prod-panel-link:hover{
  background: var(--green-800);
  transform: translateY(-2px);
}

.page-products .prod-audience{
  background: var(--paper-100);
}

.page-products .prod-aud-grid{
  display: grid;
  gap: 16px;
}

.page-products .prod-aud-card{
  padding: 22px 20px;
  background: var(--paper-100);
  border: 1px solid var(--line-ink);
  border-top: 3px solid var(--green-900);
}

.page-products .prod-aud-tag{
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--apricot-500);
}

.page-products .prod-aud-card h3{
  margin: 0 0 10px;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.42;
}

.page-products .prod-aud-card p{
  margin: 0;
  font-size: .87rem;
  line-height: 1.75;
  color: var(--ink-700);
}

.page-products .prod-aud-fig{
  margin: 0;
}

.page-products .prod-aud-fig img{
  width: 100%;
  min-height: 210px;
  object-fit: cover;
  border: 1px solid var(--line-ink);
}

.page-products .prod-inline-link{
  display: inline-block;
  margin-top: 12px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--red-600);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--ease);
}

.page-products .prod-inline-link:hover{
  color: var(--green-900);
}

.page-products .prod-steps-grid{
  display: grid;
  gap: 26px;
}

.page-products .prod-accordion{
  border-top: 1px solid var(--line-ink);
}

.page-products .prod-step{
  border-bottom: 1px solid var(--line-ink);
}

.page-products .prod-step summary{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: .97rem;
  font-weight: 700;
  color: var(--ink-900);
}

.page-products .prod-step summary::-webkit-details-marker{
  display: none;
}

.page-products .prod-step summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--apricot-500);
}

.page-products .prod-step[open] summary::after{
  content: "–";
}

.page-products .prod-step-num{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--green-700);
}

.page-products .prod-step p{
  margin: 0 0 18px;
  padding: 0 4px;
  font-size: .87rem;
  line-height: 1.78;
  color: var(--ink-700);
  max-width: 56ch;
}

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

  .page-products .prod-channel-item{
    padding: 26px 22px;
  }

  .page-products .prod-lineup-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .page-products .prod-stat-num{
    font-size: 1.35rem;
  }
}

@media (min-width: 900px){
  .page-products .prod-hero{
    padding: 40px 0 76px;
  }

  .page-products .prod-hero-grid{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    gap: 52px;
    align-items: start;
  }

  .page-products .device{
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 300px;
    margin: 0;
  }

  .page-products .prod-section{
    padding: 66px 0;
  }

  .page-products .prod-schedule-grid{
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
    gap: 54px;
    align-items: start;
  }

  .page-products .prod-cache-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,.92fr);
    gap: 54px;
    align-items: center;
  }

  .page-products .prod-panel-inner{
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 32px;
    padding: 32px 30px;
  }

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

  .page-products .prod-aud-a{
    grid-column: span 7;
  }

  .page-products .prod-aud-fig{
    grid-column: span 5;
  }

  .page-products .prod-aud-b{
    grid-column: span 5;
  }

  .page-products .prod-aud-c{
    grid-column: span 7;
  }

  .page-products .prod-steps-grid{
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    gap: 54px;
    align-items: start;
  }

  .page-products .prod-lineup-img{
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .prod-panel-link:hover{
    transform: none;
  }

  .page-products .prod-switch-track,
  .page-products .prod-switch-knob{
    transition: none;
  }
}