.page-home {
  --home-line: rgba(35, 230, 208, .22);
  --home-line-soft: rgba(138, 151, 184, .18);
  --home-line-dark: rgba(26, 18, 8, .16);
  --home-safe: clamp(16px, 3.6vw, 36px);
}

.page-home #results {
  scroll-margin-top: 112px;
}

.page-home .hero-home {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(28px, 5vw, 64px) clamp(32px, 5.5vw, 76px);
}

.page-home .hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 14%, rgba(35, 230, 208, .14), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(255, 122, 47, .09), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.page-home .hero-home__wrap {
  position: relative;
  z-index: 1;
}

.page-home .hero-home__grid {
  row-gap: clamp(28px, 4vw, 44px);
}

.page-home .hero-home__intro {
  min-width: 0;
}

.page-home .hero-home__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--white);
  margin: 14px 0 18px;
  text-wrap: balance;
}

.page-home .hero-home__lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--mist);
  max-width: 47ch;
  margin: 0 0 24px;
}

.page-home .hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3.6vw, 36px);
}

.page-home .hero-home__stats {
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  margin: 0;
}

@media (min-width: 560px) {
  .page-home .hero-home__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .hero-home__stat {
  padding: 14px 16px;
  background: var(--ink-900);
  min-width: 0;
}

.page-home .hero-home__stat dt {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}

.page-home .hero-home__stat dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--white);
  line-height: 1.4;
}

.page-home .hero-home__stat .mono {
  font-size: 22px;
  color: var(--cyan);
  margin-right: 4px;
  font-weight: 600;
}

.page-home .hero-home__collage {
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border: 1px solid var(--home-line);
  min-width: 0;
}

@media (min-width: 720px) {
  .page-home .hero-home__collage {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "schedule schedule"
      "injuries cadence";
  }
  .page-home .hero-home__tile--schedule { grid-area: schedule; }
  .page-home .hero-home__tile--injuries { grid-area: injuries; }
  .page-home .hero-home__tile--cadence { grid-area: cadence; }
}

.page-home .hero-home__tile {
  background: var(--ink-800);
  padding: clamp(14px, 2.2vw, 22px);
  min-width: 0;
}

.page-home .hero-home__tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--home-line);
  font-size: 12px;
  color: var(--mist);
}

.page-home .hero-home__tile-head .mono {
  color: var(--cyan);
  letter-spacing: .08em;
}

.page-home .hero-home__tile-head h2 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
  min-width: 0;
}

.page-home .fixture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--home-line);
}

.page-home .fixture-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  background: var(--ink-800);
  font-size: 13.5px;
  color: var(--mist);
  transition: background var(--ease), color var(--ease);
}

.page-home .fixture-list__row:hover,
.page-home .fixture-list__row:focus-within {
  background: var(--ink-700);
  color: var(--white);
}

.page-home .fixture-list__time {
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.page-home .fixture-list__teams {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .fixture-list__teams em {
  font-style: normal;
  color: var(--mist);
  opacity: .75;
  margin: 0 5px;
}

.page-home .mini-injuries {
  display: grid;
  gap: 2px;
}

.page-home .mini-injuries__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--mist);
  border-bottom: 1px solid var(--home-line-soft);
}

.page-home .mini-injuries__row:last-child {
  border-bottom: 0;
}

.page-home .mini-injuries__team {
  min-width: 0;
}

.page-home .mini-injuries__num {
  font-size: 24px;
  line-height: 1;
  color: var(--white);
  font-weight: 600;
}

.page-home .mini-injuries__note {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
}

.page-home .signal-tile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.page-home .signal-tile__num {
  font-size: 40px;
  line-height: 1;
  color: var(--cyan);
  font-weight: 600;
}

.page-home .signal-tile__unit {
  font-size: 14px;
  color: var(--white);
}

.page-home .signal-tile__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

/* ---------- 02 近期战绩 ---------- */

.page-home .board-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .board-home__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .board-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--mist);
}

.page-home .board-home__tablewrap {
  border: 1px solid var(--home-line);
}

.page-home .board-home__table {
  min-width: 640px;
  width: 100%;
}

.page-home .board-home__table th,
.page-home .board-home__table td {
  padding: 13px 16px;
  vertical-align: middle;
  white-space: nowrap;
}

.page-home .board-home__table tbody tr {
  transition: background var(--ease);
}

.page-home .board-home__pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-home .board-home__team {
  color: var(--white);
  font-weight: 600;
}

.page-home .board-home__vs {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- 03 伤停对照 ---------- */

.page-home .injury-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .injury-home__head {
  max-width: 64ch;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .injury-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: #4A4029;
}

.page-home .injury-home__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #5E5340;
}

.page-home .injury-home__boards {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .page-home .injury-home__boards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--home-line-dark);
    border: 1px solid var(--home-line-dark);
  }
}

.page-home .injury-card {
  background: var(--white);
  border: 1px solid var(--home-line-dark);
  padding: clamp(16px, 2.4vw, 24px);
  min-width: 0;
}

@media (min-width: 760px) {
  .page-home .injury-card {
    border: 0;
  }
}

.page-home .injury-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--home-line-dark);
}

.page-home .injury-card__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brown);
}

.page-home .injury-card__count {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #7C3F0F;
  background: rgba(255, 122, 47, .14);
  border: 1px solid rgba(255, 122, 47, .4);
  padding: 4px 8px;
}

.page-home .injury-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .injury-card__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--home-line-dark);
  font-size: 14px;
  color: var(--brown);
  transition: background var(--ease);
}

.page-home .injury-card__row:last-child {
  border-bottom: 0;
}

.page-home .injury-card__row:hover {
  background: rgba(35, 230, 208, .12);
}

.page-home .injury-card__pos {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: #0E5E58;
  background: rgba(35, 230, 208, .18);
  padding: 3px 6px;
  text-align: center;
}

.page-home .injury-card__why {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .injury-card__back {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #5E5340;
  white-space: nowrap;
}

.page-home .injury-home__aside {
  margin-top: clamp(24px, 3.4vw, 36px);
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .page-home .injury-home__aside {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 28px;
  }
}

.page-home .injury-home__shot {
  overflow: hidden;
  border: 1px solid var(--home-line-dark);
  background: var(--brown);
}

.page-home .injury-home__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 1000 / 640;
  opacity: .9;
}

.page-home .injury-home__caption {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #4A4029;
}

/* ---------- 04 周末连看 ---------- */

.page-home .weekend-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .weekend-home__head {
  max-width: 60ch;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}

.page-home .weekend-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--mist);
}

.page-home .weekend-home__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border: 1px solid var(--home-line);
}

@media (min-width: 860px) {
  .page-home .weekend-home__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .weekend-home__step {
  background: var(--ink-900);
  padding: clamp(20px, 3vw, 30px);
  min-width: 0;
  transition: background var(--ease);
}

.page-home .weekend-home__step:hover {
  background: var(--ink-800);
}

.page-home .weekend-home__num {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: .04em;
  margin-bottom: 16px;
}

.page-home .weekend-home__step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
}

.page-home .weekend-home__step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .weekend-home__cta {
  margin-top: clamp(22px, 3vw, 34px);
}

/* ---------- 05 刷新节奏 ---------- */

.page-home .cadence-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .cadence-home__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

@media (min-width: 880px) {
  .page-home .cadence-home__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
  }
}

.page-home .cadence-home__copy {
  min-width: 0;
}

.page-home .cadence-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: #4A4029;
}

.page-home .cadence-home__facts {
  margin: clamp(22px, 3vw, 32px) 0 0;
  display: grid;
  gap: 1px;
  background: var(--home-line-dark);
  border-top: 1px solid var(--home-line-dark);
  border-bottom: 1px solid var(--home-line-dark);
}

.page-home .cadence-home__fact {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 6px;
  background: var(--cream);
  font-size: 14.5px;
  color: var(--brown);
}

.page-home .cadence-home__fact dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5E5340;
  padding-top: 3px;
}

.page-home .cadence-home__fact dd {
  margin: 0;
  line-height: 1.7;
}

.page-home .cadence-home__more {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #4A4029;
}

.page-home .cadence-home__more a {
  color: #0E5E58;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ease);
}

.page-home .cadence-home__more a:hover,
.page-home .cadence-home__more a:focus-visible {
  color: var(--orange);
}

.page-home .cadence-home__visual {
  min-width: 0;
  border: 1px solid var(--home-line-dark);
  background: var(--brown);
}

.page-home .cadence-home__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 900 / 600;
  object-fit: cover;
  opacity: .92;
}

.page-home .cadence-home__visual-cap {
  margin: 0;
  padding: 12px 16px;
  font-size: 12.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--cream);
  border-top: 1px solid rgba(243, 231, 208, .2);
}

/* ---------- 06 平板端专题 ---------- */

.page-home .tablet-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .tablet-home__head {
  max-width: 62ch;
  margin-bottom: clamp(26px, 3.6vw, 42px);
}

.page-home .tablet-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--mist);
}

.page-home .tablet-home__grid {
  display: grid;
  gap: clamp(24px, 3.6vw, 44px);
}

@media (min-width: 880px) {
  .page-home .tablet-home__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
}

.page-home .tablet-home__visual {
  overflow: hidden;
  border: 1px solid var(--home-line);
  min-width: 0;
}

.page-home .tablet-home__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1200 / 800;
  object-fit: cover;
  transition: transform var(--ease-slow);
}

.page-home .tablet-home__visual:hover img {
  transform: scale(1.02);
}

.page-home .tablet-home__copy {
  min-width: 0;
}

.page-home .tablet-home__facts {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border: 1px solid var(--home-line);
}

@media (min-width: 560px) and (max-width: 879px) {
  .page-home .tablet-home__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-home .tablet-home__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: var(--ink-900);
  font-size: 14.5px;
  color: var(--white);
}

.page-home .tablet-home__fact dt {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .tablet-home__fact dd {
  margin: 0;
  text-align: right;
}

.page-home .tablet-home__fact .mono {
  color: var(--cyan);
  font-size: 17px;
  font-weight: 600;
}

.page-home .tablet-home__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 30px);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .fixture-list__row,
  .page-home .injury-card__row,
  .page-home .weekend-home__step,
  .page-home .cadence-home__more a,
  .page-home .tablet-home__visual img {
    transition: none;
  }
  .page-home .tablet-home__visual:hover img {
    transform: none;
  }
}
<<<END>>>

等等，最后这个 `<<<END>>>` 标记是不允许的，标记必须只能是 `` 和 ``，各出现一次。

我需要移除这个标记。

实际上重读指令：“严格按照以下标记顺序输出，每个标记只能出现一次，标记必须是三个尖括号：”

然后列出了两个标记。所以只能有两个标记。我要把最后的 `<<<END>>>` 删掉。

我会把那个标记删掉，重新输出。等等，规则说不能 Markdown 代码围栏，不能有说明。但最后的 `<<<END>>>` 确实是个错误。

让我不带那个标记重新输出一次。不过我之前已经完整输出过一次了……直接删掉最后的标记就行。

其实重读一遍：“严格按照以下标记顺序输出，每个标记只能出现一次”。所以我应该只输出上面那两个标记。我会修正。

好，我现在重新输出。
<main id="main-content" class="page-home">

  <section class="hero-home band band--deep" data-section="赛程中心" data-section-idx="01">
    <div class="wrap hero-home__wrap">
      <div class="grid grid--12 hero-home__grid">

        <div class="col-5 hero-home__intro">
          <p class="eyebrow">01 / 首页 · 赛程中心</p>
          <h1 class="hero-home__title">最近战绩和伤停对照，首栏就能拿到</h1>
          <p class="hero-home__lede">易倍赛场把赛程中心放在首页最靠前的位置。进来点一下，近期战绩、伤停信息对照和周末排期入口都在同一屏，不用在多层菜单里来回翻找。</p>
          <div class="hero-home__actions">
            <a class="btn btn--accent" href="#results">看最近战绩</a>
            <a class="btn btn--ghost" href="/knowledge/">上手指南</a>
          </div>
          <dl class="hero-home__stats">
            <div class="hero-home__stat">
              <dt>覆盖范围</dt>
              <dd><span class="mono">38</span> 个联赛与杯赛</dd>
            </div>
            <div class="hero-home__stat">
              <dt>同步间隔</dt>
              <dd>每 <span class="mono">5</span> 分钟</dd>
            </div>
            <div class="hero-home__stat">
              <dt>对照字段</dt>
              <dd><span class="mono">26</span> 项</dd>
            </div>
          </dl>
        </div>

        <div class="col-7 hero-home__collage">

          <article class="hero-home__tile hero-home__tile--schedule">
            <header class="hero-home__tile-head">
              <span class="mono">01</span>
              <h2>赛程中心 · 即将开球</h2>
              <span class="tag tag--sync"><span class="pulse"></span>同步中</span>
            </header>
            <ul class="fixture-list">
              <li class="fixture-list__row">
                <span class="mono fixture-list__time">20:00</span>
                <span class="fixture-list__teams">主队 <em>vs</em> 客队</span>
                <span class="tag tag--time">未开赛</span>
              </li>
              <li class="fixture-list__row">
                <span class="mono fixture-list__time">22:30</span>
                <span class="fixture-list__teams">主队 <em>vs</em> 客队</span>
                <span class="tag tag--time">未开赛</span>
              </li>
              <li class="fixture-list__row">
                <span class="mono fixture-list__time">次日 02:00</span>
                <span class="fixture-list__teams">主队 <em>vs</em> 客队</span>
                <span class="tag tag--time">未开赛</span>
              </li>
            </ul>
          </article>

          <article class="hero-home__tile hero-home__tile--injuries">
            <header class="hero-home__tile-head">
              <span class="mono">02</span>
              <h2>伤停对照</h2>
            </header>
            <div class="mini-injuries">
              <div class="mini-injuries__row">
                <span class="mini-injuries__team">主队</span>
                <span class="mono mini-injuries__num">3</span>
              </div>
              <div class="mini-injuries__row">
                <span class="mini-injuries__team">客队</span>
                <span class="mono mini-injuries__num">2</span>
              </div>
            </div>
            <p class="mini-injuries__note">缺阵人数 · 每条同步后刷新</p>
          </article>

          <article class="hero-home__tile hero-home__tile--cadence">
            <header class="hero-home__tile-head">
              <span class="mono">03</span>
              <h2>发布前复核</h2>
            </header>
            <p class="signal-tile">
              <span class="mono signal-tile__num">2</span>
              <span class="signal-tile__unit">人交叉确认</span>
            </p>
            <p class="signal-tile__note">每条状态标签发布前都要走这一道</p>
          </article>

        </div>
      </div>
    </div>
  </section>

  <section id="results" class="board-home band band--panel" data-section="近期战绩" data-section-idx="02">
    <div class="wrap">
      <header class="board-home__head">
        <p class="eyebrow">02 / 近期战绩</p>
        <h2 class="display-2">最近几轮踢完什么结果，一屏扫完</h2>
        <p class="board-home__lede">轮次从上往下排，比分、半场和终场状态并排放在一张表里，哪场焦灼哪场轻松，扫一眼就分得出来。</p>
      </header>

      <div class="table-wrap board-home__tablewrap">
        <table class="table table--cream board-home__table">
          <caption class="visually-hidden">近期比赛战绩对照</caption>
          <thead>
            <tr>
              <th scope="col">轮次</th>
              <th scope="col">赛区</th>
              <th scope="col">对阵</th>
              <th scope="col" class="num">全场</th>
              <th scope="col" class="num">半场</th>
              <th scope="col">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="mono">第 14 轮</td>
              <td>欧洲</td>
              <td class="board-home__pair"><span class="board-home__team">主队</span> <span class="board-home__vs">vs</span> <span class="board-home__team">客队</span></td>
              <td class="num mono">2 : 1</td>
              <td class="num mono">1 : 0</td>
              <td><span class="tag tag--live">终场</span></td>
            </tr>
            <tr>
              <td class="mono">第 14 轮</td>
              <td>南美</td>
              <td class="board-home__pair"><span class="board-home__team">主队</span> <span class="board-home__vs">vs</span> <span class="board-home__team">客队</span></td>
              <td class="num mono">0 : 0</td>
              <td class="num mono">0 : 0</td>
              <td><span class="tag tag--live">终场</span></td>
            </tr>
            <tr>
              <td class="mono">第 13 轮</td>
              <td>亚洲</td>
              <td class="board-home__pair"><span class="board-home__team">主队</span> <span class="board-home__vs">vs</span> <span class="board-home__team">客队</span></td>
              <td class="num mono">3 : 2</td>
              <td class="num mono">1 : 1</td>
              <td><span class="tag tag--live">终场</span></td>
            </tr>
            <tr>
              <td class="mono">第 13 轮</td>
              <td>欧洲</td>
              <td class="board-home__pair"><span class="board-home__team">主队</span> <span class="board-home__vs">vs</span> <span class="board-home__team">客队</span></td>
              <td class="num mono">1 : 3</td>
              <td class="num mono">0 : 2</td>
              <td><span class="tag tag--live">终场</span></td>
            </tr>
            <tr>
              <td class="mono">第 13 轮</td>
              <td>亚洲</td>
              <td class="board-home__pair"><span class="board-home__team">主队</span> <span class="board-home__vs">vs</span> <span class="board-home__team">客队</span></td>
              <td class="num mono">2 : 2</td>
              <td class="num mono">2 : 1</td>
              <td><span class="tag tag--live">终场</span></td>
            </tr>
            <tr>
              <td class="mono">第 12 轮</td>
              <td>南美</td>
              <td class="board-home__pair"><span class="board-home__team">主队</span> <span class="board-home__vs">vs</span> <span class="board-home__team">客队</span></td>
              <td class="num mono">1 : 0</td>
              <td class="num mono">0 : 0</td>
              <td><span class="tag tag--live">终场</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <section class="injury-home band band--cream" data-section="伤停对照" data-section-idx="03">
    <div class="wrap injury-home__wrap">

      <header class="injury-home__head">
        <p class="eyebrow">03 / 伤停对照</p>
        <h2 class="display-2">两队缺谁、缺到哪轮，左右摆在一起看</h2>
        <p class="injury-home__lede">一张表覆盖球员位置、停赛原因和预计回归轮次共 26 项字段。左右两列并排，哪边阵容吃紧一目了然。</p>
        <p class="injury-home__context">
          <span class="mono">第 14 轮 · 赛前 6 小时</span>
          <span class="tag tag--time">最近一次同步已完成</span>
        </p>
      </header>

      <div class="injury-home__boards">
        <article class="injury-card">
          <header class="injury-card__head">
            <h3>主队</h3>
            <span class="mono injury-card__count">3 人缺阵</span>
          </header>
          <ul class="injury-card__list">
            <li class="injury-card__row">
              <span class="injury-card__pos">后卫</span>
              <span class="injury-card__why">累积黄牌停赛</span>
              <span class="mono injury-card__back">第 15 轮</span>
            </li>
            <li class="injury-card__row">
              <span class="injury-card__pos">中场</span>
              <span class="injury-card__why">肌肉拉伤</span>
              <span class="mono injury-card__back">第 16 轮</span>
            </li>
            <li class="injury-card__row">
              <span class="injury-card__pos">门将</span>
              <span class="injury-card__why">红牌停赛</span>
              <span class="mono injury-card__back">第 15 轮</span>
            </li>
          </ul>
        </article>

        <article class="injury-card">
          <header class="injury-card__head">
            <h3>客队</h3>
            <span class="mono injury-card__count">2 人缺阵</span>
          </header>
          <ul class="injury-card__list">
            <li class="injury-card__row">
              <span class="injury-card__pos">前锋</span>
              <span class="injury-card__why">脚踝伤势</span>
              <span class="mono injury-card__back">第 16 轮</span>
            </li>
            <li class="injury-card__row">
              <span class="injury-card__pos">后卫</span>
              <span class="injury-card__why">累积黄牌停赛</span>
              <span class="mono injury-card__back">第 15 轮</span>
            </li>
          </ul>
        </article>
      </div>

      <aside class="injury-home__aside">
        <div class="injury-home__shot">
          <img src="{zhanqunpic:h:640w:1000}" width="1000" height="640" alt="战术板样式的伤停信息对照表格线条示意，行列以细线分隔" loading="lazy" decoding="async">
        </div>
        <p class="injury-home__caption">对照表按位置、停赛原因、预计回归轮次三列展开，两队并排阅读不需要来回切页。</p>
      </aside>

    </div>
  </section>

  <section class="weekend-home band band--deep" data-section="连看排期" data-section-idx="04">
    <div class="wrap">
      <header class="weekend-home__head">
        <p class="eyebrow">04 / 周末连看</p>
        <h2 class="display-2">两场连看，先走完这三步</h2>
        <p class="weekend-home__lede">新用户最快上手的方式：把相邻开球的两场串成一条线，赛前查一次伤停，赛后对一次数据。</p>
      </header>

      <ol class="weekend-home__steps">
        <li class="weekend-home__step">
          <span class="mono weekend-home__num">01</span>
          <h3>先框住两场</h3>
          <p>在赛程中心按开球时间筛出间隔 90 分钟以内的两场，顺手把当天的状态标签展开扫一遍，确认哪场需要重点盯伤停。</p>
        </li>
        <li class="weekend-home__step">
          <span class="mono weekend-home__num">02</span>
          <h3>切换时别丢上下文</h3>
          <p>两场之间用伤停对照表查阵容变化，不用退出去重新搜。点行会高亮同一支队，左列右列跟着同步。</p>
        </li>
        <li class="weekend-home__step">
          <span class="mono weekend-home__num">03</span>
          <h3>赛后回看对比</h3>
          <p>终场数据推上来之后，回到战绩对照翻一眼赛前预估。周末连看时间轴把两场的结果串在同一条阅读线上。</p>
        </li>
      </ol>

      <div class="weekend-home__cta">
        <a class="btn btn--accent" href="/knowledge/">看完整的上手步骤</a>
      </div>
    </div>
  </section>

  <section class="cadence-home band band--cream" data-section="刷新节奏" data-section-idx="05">
    <div class="wrap cadence-home__grid">

      <div class="cadence-home__copy">
        <p class="eyebrow">05 / 刷新节奏</p>
        <h2 class="display-2">多久更新一次，怎么保证对得上</h2>
        <p class="cadence-home__lede">赛程、战绩和伤停数据每 5 分钟同步一轮。重点场次的状态标签更新更密集，比赛日里每个时段都有人在盯着进度。</p>
        <dl class="cadence-home__facts">
          <div class="cadence-home__fact">
            <dt>同步间隔</dt>
            <dd>5 分钟一次，重点场次更密集</dd>
          </div>
          <div class="cadence-home__fact">
            <dt>数据合作方</dt>
            <dd>12 家，覆盖欧洲、南美与亚洲</dd>
          </div>
          <div class="cadence-home__fact">
            <dt>发布机制</dt>
            <dd>双人复核，每个比赛日全量校验 3 次</dd>
          </div>
        </dl>
        <p class="cadence-home__more">想了解复核体系怎么一步步搭起来，可以翻<a href="/history/">品牌历程</a>；具体问题直接走<a href="/contact/">联系我们</a>。</p>
      </div>

      <div class="cadence-home__visual">
        <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="计时器残影与青色脉冲点组成的数据同步示意图形" loading="lazy" decoding="async">
        <p class="cadence-home__visual-cap">每条状态标签背后都有一次同步与一次复核</p>
      </div>

    </div>
  </section>

  <section class="tablet-home band band--deep" data-section="平板端专题" data-section-idx="06">
    <div class="wrap">
      <header class="tablet-home__head">
        <p class="eyebrow">06 / 平板端专题</p>
        <h2 class="display-2">横屏打开，联赛专题每周三更新</h2>
        <p class="tablet-home__lede">平板端联赛专题固定五个栏目：赛程前瞻、伤停速览、战术板、球队状态和复盘对照。横屏一页读完当期，竖屏也不用缩放，通勤或沙发上都能顺着往下看。</p>
      </header>

      <div class="tablet-home__grid">
        <div class="tablet-home__visual">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="平板设备横屏显示联赛专题栏目与赛程列表的局部画面" loading="lazy" decoding="async">
        </div>

        <div class="tablet-home__copy">
          <dl class="tablet-home__facts">
            <div class="tablet-home__fact">
              <dt>已发布</dt>
              <dd><span class="mono">140</span> 余期</dd>
            </div>
            <div class="tablet-home__fact">
              <dt>更新日</dt>
              <dd>每周三</dd>
            </div>
            <div class="tablet-home__fact">
              <dt>单期完成率</dt>
              <dd><span class="mono">71</span> %</dd>
            </div>
            <div class="tablet-home__fact">
              <dt>平均停留</dt>
              <dd><span class="mono">6</span> 分 <span class="mono">40</span> 秒</dd>
            </div>
          </dl>
          <div class="tablet-home__cta">
            <a class="btn btn--accent" href="/journal/">查看往期专题</a>
            <a class="btn btn--ghost" href="/app-download/">下载客户端 v4.2</a>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-line: rgba(35, 230, 208, .22);
  --home-line-soft: rgba(138, 151, 184, .18);
  --home-line-dark: rgba(26, 18, 8, .16);
}

.page-home #results {
  scroll-margin-top: 112px;
}

.page-home .hero-home {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: clamp(28px, 5vw, 64px) clamp(32px, 5.5vw, 76px);
}

.page-home .hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 14%, rgba(35, 230, 208, .14), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(255, 122, 47, .09), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.page-home .hero-home__wrap {
  position: relative;
  z-index: 1;
}

.page-home .hero-home__grid {
  row-gap: clamp(28px, 4vw, 44px);
}

.page-home .hero-home__intro {
  min-width: 0;
}

.page-home .hero-home__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--white);
  margin: 14px 0 18px;
  text-wrap: balance;
}

.page-home .hero-home__lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--mist);
  max-width: 47ch;
  margin: 0 0 24px;
}

.page-home .hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3.6vw, 36px);
}

.page-home .hero-home__stats {
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border-top: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
  margin: 0;
}

@media (min-width: 560px) {
  .page-home .hero-home__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .hero-home__stat {
  padding: 14px 16px;
  background: var(--ink-900);
  min-width: 0;
}

.page-home .hero-home__stat dt {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}

.page-home .hero-home__stat dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--white);
  line-height: 1.4;
}

.page-home .hero-home__stat .mono {
  font-size: 22px;
  color: var(--cyan);
  margin-right: 4px;
  font-weight: 600;
}

.page-home .hero-home__collage {
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border: 1px solid var(--home-line);
  min-width: 0;
}

@media (min-width: 720px) {
  .page-home .hero-home__collage {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "schedule schedule"
      "injuries cadence";
  }
  .page-home .hero-home__tile--schedule { grid-area: schedule; }
  .page-home .hero-home__tile--injuries { grid-area: injuries; }
  .page-home .hero-home__tile--cadence { grid-area: cadence; }
}

.page-home .hero-home__tile {
  background: var(--ink-800);
  padding: clamp(14px, 2.2vw, 22px);
  min-width: 0;
}

.page-home .hero-home__tile-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--home-line);
  font-size: 12px;
  color: var(--mist);
}

.page-home .hero-home__tile-head .mono {
  color: var(--cyan);
  letter-spacing: .08em;
}

.page-home .hero-home__tile-head h2 {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
  min-width: 0;
}

.page-home .fixture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--home-line);
}

.page-home .fixture-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  background: var(--ink-800);
  font-size: 13.5px;
  color: var(--mist);
  transition: background var(--ease), color var(--ease);
}

.page-home .fixture-list__row:hover,
.page-home .fixture-list__row:focus-within {
  background: var(--ink-700);
  color: var(--white);
}

.page-home .fixture-list__time {
  color: var(--cyan);
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.page-home .fixture-list__teams {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .fixture-list__teams em {
  font-style: normal;
  color: var(--mist);
  opacity: .75;
  margin: 0 5px;
}

.page-home .mini-injuries {
  display: grid;
  gap: 2px;
}

.page-home .mini-injuries__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--mist);
  border-bottom: 1px solid var(--home-line-soft);
}

.page-home .mini-injuries__row:last-child {
  border-bottom: 0;
}

.page-home .mini-injuries__num {
  font-size: 24px;
  line-height: 1;
  color: var(--white);
  font-weight: 600;
}

.page-home .mini-injuries__note {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--mist);
}

.page-home .signal-tile {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.page-home .signal-tile__num {
  font-size: 40px;
  line-height: 1;
  color: var(--cyan);
  font-weight: 600;
}

.page-home .signal-tile__unit {
  font-size: 14px;
  color: var(--white);
}

.page-home .signal-tile__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mist);
}

.page-home .board-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .board-home__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .board-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--mist);
}

.page-home .board-home__tablewrap {
  border: 1px solid var(--home-line);
}

.page-home .board-home__table {
  min-width: 640px;
  width: 100%;
}

.page-home .board-home__table th,
.page-home .board-home__table td {
  padding: 13px 16px;
  vertical-align: middle;
  white-space: nowrap;
}

.page-home .board-home__table tbody tr {
  transition: background var(--ease);
}

.page-home .board-home__pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-home .board-home__team {
  color: var(--white);
  font-weight: 600;
}

.page-home .board-home__vs {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-home .injury-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .injury-home__head {
  max-width: 64ch;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.page-home .injury-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: #4A4029;
}

.page-home .injury-home__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #5E5340;
}

.page-home .injury-home__boards {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .page-home .injury-home__boards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--home-line-dark);
    border: 1px solid var(--home-line-dark);
  }
}

.page-home .injury-card {
  background: var(--white);
  border: 1px solid var(--home-line-dark);
  padding: clamp(16px, 2.4vw, 24px);
  min-width: 0;
}

@media (min-width: 760px) {
  .page-home .injury-card {
    border: 0;
  }
}

.page-home .injury-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--home-line-dark);
}

.page-home .injury-card__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brown);
}

.page-home .injury-card__count {
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #7C3F0F;
  background: rgba(255, 122, 47, .14);
  border: 1px solid rgba(255, 122, 47, .4);
  padding: 4px 8px;
  white-space: nowrap;
}

.page-home .injury-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-home .injury-card__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--home-line-dark);
  font-size: 14px;
  color: var(--brown);
  transition: background var(--ease);
}

.page-home .injury-card__row:last-child {
  border-bottom: 0;
}

.page-home .injury-card__row:hover {
  background: rgba(35, 230, 208, .12);
}

.page-home .injury-card__pos {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: #0E5E58;
  background: rgba(35, 230, 208, .18);
  padding: 3px 6px;
  text-align: center;
}

.page-home .injury-card__why {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-home .injury-card__back {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #5E5340;
  white-space: nowrap;
}

.page-home .injury-home__aside {
  margin-top: clamp(24px, 3.4vw, 36px);
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .page-home .injury-home__aside {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 28px;
  }
}

.page-home .injury-home__shot {
  overflow: hidden;
  border: 1px solid var(--home-line-dark);
  background: var(--brown);
}

.page-home .injury-home__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1000 / 640;
  object-fit: cover;
  opacity: .9;
}

.page-home .injury-home__caption {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #4A4029;
}

.page-home .weekend-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .weekend-home__head {
  max-width: 60ch;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}

.page-home .weekend-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--mist);
}

.page-home .weekend-home__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border: 1px solid var(--home-line);
}

@media (min-width: 860px) {
  .page-home .weekend-home__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-home .weekend-home__step {
  background: var(--ink-900);
  padding: clamp(20px, 3vw, 30px);
  min-width: 0;
  transition: background var(--ease);
}

.page-home .weekend-home__step:hover {
  background: var(--ink-800);
}

.page-home .weekend-home__num {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--orange);
  letter-spacing: .04em;
  margin-bottom: 16px;
}

.page-home .weekend-home__step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--white);
}

.page-home .weekend-home__step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-home .weekend-home__cta {
  margin-top: clamp(22px, 3vw, 34px);
}

.page-home .cadence-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .cadence-home__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

@media (min-width: 880px) {
  .page-home .cadence-home__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: center;
  }
}

.page-home .cadence-home__copy {
  min-width: 0;
}

.page-home .cadence-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: #4A4029;
}

.page-home .cadence-home__facts {
  margin: clamp(22px, 3vw, 32px) 0 0;
  display: grid;
  gap: 1px;
  background: var(--home-line-dark);
  border-top: 1px solid var(--home-line-dark);
  border-bottom: 1px solid var(--home-line-dark);
}

.page-home .cadence-home__fact {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 6px;
  background: var(--cream);
  font-size: 14.5px;
  color: var(--brown);
}

.page-home .cadence-home__fact dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5E5340;
  padding-top: 3px;
}

.page-home .cadence-home__fact dd {
  margin: 0;
  line-height: 1.7;
}

.page-home .cadence-home__more {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #4A4029;
}

.page-home .cadence-home__more a {
  color: #0E5E58;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--ease);
}

.page-home .cadence-home__more a:hover,
.page-home .cadence-home__more a:focus-visible {
  color: var(--orange);
}

.page-home .cadence-home__visual {
  min-width: 0;
  border: 1px solid var(--home-line-dark);
  background: var(--brown);
}

.page-home .cadence-home__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 900 / 600;
  object-fit: cover;
  opacity: .92;
}

.page-home .cadence-home__visual-cap {
  margin: 0;
  padding: 12px 16px;
  font-size: 12.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--cream);
  border-top: 1px solid rgba(243, 231, 208, .2);
}

.page-home .tablet-home {
  padding-block: clamp(40px, 6vw, 84px);
}

.page-home .tablet-home__head {
  max-width: 62ch;
  margin-bottom: clamp(26px, 3.6vw, 42px);
}

.page-home .tablet-home__lede {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.8;
  color: var(--mist);
}

.page-home .tablet-home__grid {
  display: grid;
  gap: clamp(24px, 3.6vw, 44px);
}

@media (min-width: 880px) {
  .page-home .tablet-home__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
}

.page-home .tablet-home__visual {
  overflow: hidden;
  border: 1px solid var(--home-line);
  min-width: 0;
}

.page-home .tablet-home__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1200 / 800;
  object-fit: cover;
  transition: transform var(--ease-slow);
}

.page-home .tablet-home__visual:hover img {
  transform: scale(1.02);
}

.page-home .tablet-home__copy {
  min-width: 0;
}

.page-home .tablet-home__facts {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--home-line);
  border: 1px solid var(--home-line);
}

@media (min-width: 560px) and (max-width: 879px) {
  .page-home .tablet-home__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-home .tablet-home__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: var(--ink-900);
  font-size: 14.5px;
  color: var(--white);
}

.page-home .tablet-home__fact dt {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mist);
}

.page-home .tablet-home__fact dd {
  margin: 0;
  text-align: right;
}

.page-home .tablet-home__fact .mono {
  color: var(--cyan);
  font-size: 17px;
  font-weight: 600;
}

.page-home .tablet-home__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 30px);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .fixture-list__row,
  .page-home .injury-card__row,
  .page-home .weekend-home__step,
  .page-home .cadence-home__more a,
  .page-home .tablet-home__visual img {
    transition: none;
  }
  .page-home .tablet-home__visual:hover img {
    transform: none;
  }
}