.page-home {
  --home-card: #FFFDF6;
  --home-card-line: rgba(185, 174, 203, .46);
  --home-mint-line: rgba(143, 203, 63, .55);
}

.page-home .gp-container {
  position: relative;
  z-index: 1;
}

/* ---------------- Hero ---------------- */

.page-home .hero {
  position: relative;
  padding: clamp(22px, 4vw, 44px) 0 clamp(38px, 6vw, 76px);
  background: var(--gp-paper);
  overflow: hidden;
}

.page-home .hero::before {
  content: "";
  position: absolute;
  top: -28%;
  right: -18%;
  width: min(620px, 82vw);
  height: min(620px, 82vw);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 42%, rgba(143, 203, 63, .26), rgba(106, 63, 168, .18) 46%, rgba(106, 63, 168, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.page-home .hero__ctx {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(18px, 3vw, 30px);
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gp-grape);
  text-transform: uppercase;
}

.page-home .hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
}

.page-home .hero__title {
  margin: 0 0 16px;
  font-family: var(--gp-font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.6vw, 54px);
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--gp-ink);
  text-shadow: 0 0 22px rgba(106, 63, 168, .14);
}

.page-home .hero__text {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.85;
  color: var(--gp-ink-72);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .hero__visual {
  margin: 0;
  position: relative;
}

.page-home .hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--gp-r-lg);
  box-shadow: var(--gp-shadow-2);
}

.page-home .hero__cap {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gp-ink-50);
}

.page-home .hero__cards {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px, 5vw, 54px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
}

.page-home .pathcard {
  display: block;
  position: relative;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--gp-r-md);
  background: var(--home-card);
  border: 1px solid var(--home-card-line);
  box-shadow: var(--gp-shadow-1);
  color: inherit;
  text-decoration: none;
  transition: transform .35s var(--gp-ease), box-shadow .35s var(--gp-ease), border-color .35s var(--gp-ease);
}

.page-home .pathcard:hover,
.page-home .pathcard:focus-visible {
  transform: translate(6px, -6px);
  border-color: var(--gp-mint);
  box-shadow: var(--gp-shadow-2);
}

.page-home .pathcard:focus-visible {
  outline: 2px solid var(--gp-grape);
  outline-offset: 3px;
}

.page-home .pathcard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--gp-grape);
  color: #fff;
  font-family: var(--gp-font-mono);
  font-size: 14px;
  font-weight: 600;
}

.page-home .pathcard__title {
  margin: 0 0 8px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--gp-ink);
}

.page-home .pathcard__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gp-ink-72);
}

.page-home .pathcard__go {
  display: inline-block;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gp-mint);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--home-mint-line);
}

/* ---------------- Chapter base ---------------- */

.page-home .chapter {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0;
}

.page-home .chapter--paper {
  background: var(--gp-paper);
}

.page-home .chapter--night {
  background:
    radial-gradient(120% 96% at 88% 0%, rgba(106, 63, 168, .5), rgba(106, 63, 168, 0) 62%),
    linear-gradient(158deg, var(--gp-vine) 0%, var(--gp-ink) 74%);
  color: var(--gp-mint-soft);
}

.page-home .chapter--felt {
  background:
    radial-gradient(96% 84% at 10% 8%, rgba(143, 203, 63, .18), rgba(143, 203, 63, 0) 64%),
    linear-gradient(180deg, var(--gp-felt), #16211B 100%);
  color: var(--gp-mint-soft);
}

.page-home .chapter--notice {
  background: linear-gradient(180deg, var(--gp-paper), #F1EADB);
}

.page-home .chapter__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gp-grape);
}

.page-home .chapter__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .85;
}

.page-home .chapter--night .chapter__eyebrow,
.page-home .chapter--felt .chapter__eyebrow {
  color: var(--gp-mint);
}

.page-home .chapter__title {
  margin: 0 0 16px;
  font-family: var(--gp-font-display);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--gp-ink);
}

.page-home .chapter--night .chapter__title,
.page-home .chapter--felt .chapter__title {
  color: var(--gp-mint-soft);
}

.page-home .chapter__lead {
  margin: 0 0 26px;
  max-width: 38em;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--gp-ink-72);
}

.page-home .chapter--night .chapter__lead,
.page-home .chapter--felt .chapter__lead {
  color: rgba(234, 247, 236, .84);
}

.page-home .chapter__foot {
  margin: 28px 0 0;
}

.page-home .chapter__link {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--gp-grape);
  text-decoration: none;
  border-bottom: 2px solid var(--home-mint-line);
  padding-bottom: 2px;
  transition: color .3s var(--gp-ease), border-color .3s var(--gp-ease);
}

.page-home .chapter__link:hover,
.page-home .chapter__link:focus-visible {
  color: var(--gp-vine);
  border-color: var(--gp-grape);
}

.page-home .chapter__link:focus-visible {
  outline: 2px solid var(--gp-grape);
  outline-offset: 3px;
}

.page-home .chapter--night .chapter__link,
.page-home .chapter--felt .chapter__link {
  color: var(--gp-mint);
  border-color: rgba(143, 203, 63, .5);
}

.page-home .chapter--night .chapter__link:focus-visible,
.page-home .chapter--felt .chapter__link:focus-visible {
  outline-color: var(--gp-mint);
}

/* ---------------- Season ---------------- */

.page-home .season {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-home .season__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.page-home .season__facts li {
  padding: 14px 12px;
  border-radius: var(--gp-r-sm);
  background: rgba(234, 247, 236, .08);
  border: 1px solid rgba(143, 203, 63, .26);
}

.page-home .season__facts b {
  display: block;
  font-family: var(--gp-font-mono);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  color: var(--gp-gold);
  margin-bottom: 4px;
}

.page-home .season__facts span {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(234, 247, 236, .78);
}

.page-home .season__note {
  margin: 0 0 26px;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(234, 247, 236, .86);
}

.page-home .season__visual {
  margin: 0;
}

.page-home .season__visual img,
.page-home .start__visual img,
.page-home .notice__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--gp-r-lg);
}

.page-home .season__visual img {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

/* ---------------- Version table ---------------- */

.page-home .version-table {
  background: var(--home-card);
}

.page-home .version-table__cap {
  caption-side: top;
  text-align: left;
  padding: 0 0 12px;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gp-grape);
}

.page-home .version-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--gp-vine);
}

/* ---------------- Steps ---------------- */

.page-home .start__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-home .start__visual {
  margin: 0;
}

.page-home .start__visual img {
  border-radius: var(--gp-r-lg);
  box-shadow: var(--gp-shadow-2);
}

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

.page-home .step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--home-card-line);
}

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

.page-home .step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gp-r-sm);
  background: linear-gradient(140deg, var(--gp-grape), var(--gp-vine));
  color: var(--gp-mint-soft);
  font-family: var(--gp-font-mono);
  font-size: 15px;
  font-weight: 600;
}

.page-home .step__title {
  margin: 0 0 4px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gp-ink);
}

.page-home .step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gp-ink-72);
}

/* ---------------- Notices ---------------- */

.page-home .notice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.page-home .notice__visual {
  margin: 0;
}

.page-home .notice__visual img {
  border-radius: var(--gp-r-lg);
  box-shadow: var(--gp-shadow-1);
}

.page-home .notice__list {
  display: grid;
  gap: 12px;
}

.page-home .notice {
  border-radius: var(--gp-r-md);
  border: 1px solid var(--home-card-line);
  border-left: 5px solid var(--gp-haze);
  background: var(--home-card);
  box-shadow: var(--gp-shadow-1);
  overflow: hidden;
  transition: border-color .3s var(--gp-ease), transform .3s var(--gp-ease);
}

.page-home .notice:hover {
  transform: translateX(4px);
}

.page-home .notice--season {
  border-left-color: var(--gp-mint);
}

.page-home .notice--version {
  border-left-color: var(--gp-grape);
}

.page-home .notice--service {
  border-left-color: var(--gp-gold);
}

.page-home .notice__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  line-height: 1.6;
}

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

.page-home .notice__summary:focus-visible {
  outline: 2px solid var(--gp-grape);
  outline-offset: -3px;
}

.page-home .notice__title {
  flex: 1 1 200px;
  min-width: 0;
  font-weight: 500;
  color: var(--gp-ink);
}

.page-home .notice__when {
  flex: 0 0 auto;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gp-ink-50);
}

.page-home .notice__body {
  margin: 0;
  padding: 0 18px 18px;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gp-ink-72);
}

/* ---------------- Catalog index ---------------- */

.page-home .indexgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}

.page-home .indexcol {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--gp-r-md);
  background: var(--home-card);
  border: 1px solid var(--home-card-line);
  box-shadow: var(--gp-shadow-1);
}

.page-home .indexcol__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--gp-ink);
}

.page-home .indexcol__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gp-grape);
  margin-left: auto;
}

.page-home .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.page-home .dot--mint {
  background: var(--gp-mint);
}

.page-home .dot--grape {
  background: var(--gp-grape);
}

.page-home .dot--gold {
  background: var(--gp-gold);
}

.page-home .indexcol__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.page-home .indexcol__list li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gp-ink-72);
}

.page-home .indexcol__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gp-haze);
}

.page-home .indexcol__list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------------- Trust / stats ---------------- */

.page-home .statlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  margin-bottom: clamp(30px, 4vw, 46px);
}

.page-home .stat b {
  display: block;
  font-family: var(--gp-font-mono);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--gp-gold);
  padding-bottom: 8px;
  border-bottom: 3px solid rgba(143, 203, 63, .5);
  margin-bottom: 8px;
}

.page-home .stat span {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(234, 247, 236, .8);
}

.page-home .team {
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--gp-r-md);
  background: rgba(234, 247, 236, .07);
  border: 1px solid rgba(143, 203, 63, .24);
}

.page-home .team__title {
  margin: 0 0 16px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--gp-mint-soft);
}

.page-home .team__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.page-home .team__list li {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(234, 247, 236, .82);
}

.page-home .team__list b {
  display: block;
  font-family: var(--gp-font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--gp-mint);
  margin-bottom: 2px;
}

.page-home .team__note {
  margin: 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(234, 247, 236, .78);
}

/* ---------------- Quick row ---------------- */

.page-home .quickrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------- Breakpoints ---------------- */

@media (min-width: 700px) {
  .page-home .hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .indexgrid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 5fr);
  }
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
    align-items: center;
  }

  .page-home .season {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-home .start__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .notice__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .statlist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .team__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .page-home .hero__cards {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    row-gap: clamp(16px, 2vw, 26px);
  }

  .page-home .hero__cards > .pathcard:nth-child(1) {
    grid-column: 1 / span 5;
  }

  .page-home .hero__cards > .pathcard:nth-child(2) {
    grid-column: 7 / span 6;
    margin-top: 44px;
  }

  .page-home .hero__cards > .pathcard:nth-child(3) {
    grid-column: 2 / span 5;
    margin-top: -14px;
  }

  .page-home .hero__cards > .pathcard:nth-child(4) {
    grid-column: 8 / span 4;
    margin-top: -30px;
  }
}

@media (max-width: 560px) {
  .page-home .season__facts {
    grid-template-columns: 1fr;
  }

  .page-home .indexcol__list--two {
    grid-template-columns: 1fr;
  }

  .page-home .notice__when {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .pathcard,
  .page-home .notice,
  .page-home .chapter__link {
    transition: none;
  }

  .page-home .pathcard:hover,
  .page-home .pathcard:focus-visible,
  .page-home .notice:hover {
    transform: none;
  }
}
<<<END>>>

等等——我需要去掉那个末尾的 <<<END>>> 标记，因为指令里说的是只输出两个标记： 和 。

让我修正一下——最后不应该有多出来的内容。

再核对一遍要求……

要求 8：“联系信息只可使用 site.contact”——我只在页脚里引用了咨询服务。首页上（除了页脚里）没有任何电话或邮箱。这符合要求。

要求 19：品牌名必须自然地出现在正文里——是的，“新葡萄棋牌已经连续运营九年”。

检查页面上的关键词：“新葡萄娱乐最新版棋牌模式”——在 h1 里用了一次。“赛季活动入口”——在 01 卡片标题里用了。

检查一下数字：
- 9 年 ✓
- 8 周、6 个赛季、3 个工作日 ✓
- 19 个玩法条目，其中棋类 4、牌类 9、电玩 6 ✓
- 每两周一次小版本、每季度一次大版本 ✓
- 2 小时同步 ✓
- 3 天复核 ✓
- 860 万注册、42 万日活、31 个省级行政区 ✓
- 96% 满意度 ✓
- 68 人团队：26 研发、22 玩法运营、11 内容与公告、9 客服 ✓
- 480 余条公告、36 期玩法专题 ✓
- 4GB 内存、Android 8.0 或 iOS 13 ✓

图片：4 张（符合 image_target 的 4 张），不超过最大值 15 张。

现在输出。其实关于 <<<END>>>——不要。只输出两个标记块。

让我重新检查一下玩法索引里的列表——那个 `<ul class="indexcol__list indexcol__list--two">` 用在牌类上。

另外，`hero__cards` 里的 `nth-child(3)` 用 `grid-column: 2 / span 5`——这样没问题。

再确认一下 `gp-breadcrumb` 没用到——我用了 `hero__ctx`。好。

现在，关于 `.gp-num` 类——它是共享类，我用在了 `indexcol__count` 上。这没问题。

页面的 CSS 作用域全部限定在 `.page-home` 下。好。

继续输出。
<main id="main-content" class="page-home">

  <section class="hero" aria-labelledby="hero-title">
    <div class="gp-container">
      <p class="hero__ctx">新葡萄棋牌官方品牌站 · 首页</p>

      <div class="hero__grid">
        <div class="hero__lede">
          <h1 id="hero-title" class="hero__title">新葡萄娱乐最新版棋牌模式，从这里开始下一局</h1>
          <p class="hero__text">
            赛季活动、双版本玩法、新手教程和公告栏，四个入口都排在下面了。新葡萄棋牌已经连续运营九年，
            每两周一次小版本、每季度一次大版本，赛季按 8 周一程往前走，你想看的都在一条路上。
          </p>
          <div class="hero__actions">
            <a class="gp-btn gp-btn--primary" href="/download/">进入玩法与下载</a>
            <a class="gp-btn gp-btn--ghost" href="/journal/">看本赛季活动</a>
          </div>
        </div>

        <figure class="hero__visual">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜色葡萄藤与绒面牌桌交叠的微距画面，紫色光晕沿藤蔓延伸">
          <figcaption class="hero__cap">果园落在夜里，牌桌亮起来。</figcaption>
        </figure>
      </div>

      <div class="hero__cards">
        <a class="pathcard" href="/journal/">
          <span class="pathcard__num">01</span>
          <h2 class="pathcard__title">赛季活动入口</h2>
          <p class="pathcard__text">本赛季主题、进行到第几周、结算什么时候来，一页看完。</p>
          <span class="pathcard__go">品牌日志</span>
        </a>

        <a class="pathcard" href="/download/">
          <span class="pathcard__num">02</span>
          <h2 class="pathcard__title">玩法中心双版本对照</h2>
          <p class="pathcard__text">经典版求稳，赛季版尝新，三十秒决定装哪一个。</p>
          <span class="pathcard__go">玩法与下载</span>
        </a>

        <a class="pathcard" href="/troubleshooting/">
          <span class="pathcard__num">03</span>
          <h2 class="pathcard__title">新手四步上手</h2>
          <p class="pathcard__text">下载、校验安装、登录、选玩法，整程大约三分钟。</p>
          <span class="pathcard__go">问题排查</span>
        </a>

        <a class="pathcard" href="#notices">
          <span class="pathcard__num">04</span>
          <h2 class="pathcard__title">公告栏</h2>
          <p class="pathcard__text">临时查信息先来这里，赛季、版本、服务三类随手筛。</p>
          <span class="pathcard__go">往下看</span>
        </a>
      </div>
    </div>
  </section>

  <section id="season" class="chapter chapter--night">
    <div class="gp-container">
      <div class="season">
        <div class="season__body">
          <p class="chapter__eyebrow">01 · 本赛季活动</p>
          <h2 class="chapter__title">活动入口挪到了最显眼的地方</h2>
          <p class="chapter__lead">
            本赛季更新后，赛季活动入口直接放在首页第一屏能看到的位置，不用再翻菜单找。
            每个赛季围绕一个主题展开，8 周走完一程，全年推进 6 个赛季。
          </p>

          <ul class="season__facts">
            <li><b>8 周</b><span>一个赛季的长度</span></li>
            <li><b>6 个</b><span>全年赛季数量</span></li>
            <li><b>3 个工作日</b><span>赛季结束后出结算</span></li>
          </ul>

          <p class="season__note">
            参与方式很直接：登录客户端，从赛季入口进入本期赛程，选好自己惯用的玩法就可以开始。
            每个赛季开始前 3 天，赛季条目会完成一次复核；赛季结束后 3 个工作日内发布结算说明。
          </p>

          <a class="gp-btn gp-btn--mint" href="/journal/">查看本赛季详情</a>
        </div>

        <figure class="season__visual">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯拍牌桌上的筹码与紫色霓虹光晕，暖金色赛季徽标浮在画面上方" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section id="modes" class="chapter chapter--paper">
    <div class="gp-container">
      <p class="chapter__eyebrow">02 · 玩法中心</p>
      <h2 class="chapter__title">经典版和赛季版，到底装哪个</h2>
      <p class="chapter__lead">
        两个版本共用同一套账号和玩法数据，切换不需要重新开始。差别只在你更看重什么——
        对局稳一点，还是新玩法先玩到。玩法中心里有一张完整的对照表，每季度随大版本更新一次。
      </p>

      <div class="gp-table-wrap">
        <table class="gp-table version-table">
          <caption class="version-table__cap">经典版与赛季版差异速览</caption>
          <thead>
            <tr>
              <th scope="col">对比项</th>
              <th scope="col">经典版</th>
              <th scope="col">赛季版</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">对局节奏</th>
              <td>以稳定对局为先，界面和规则变化少</td>
              <td>优先体验赛季新玩法，节奏更新更快</td>
            </tr>
            <tr>
              <th scope="row">内容更新</th>
              <td>跟随每季度的大版本一起更新</td>
              <td>赛季开始就上新主题玩法</td>
            </tr>
            <tr>
              <th scope="row">账号与数据</th>
              <td>共用同一账号体系</td>
              <td>共用同一账号体系</td>
            </tr>
            <tr>
              <th scope="row">适合谁</th>
              <td>长期只玩一种玩法、想要熟悉手感的人</td>
              <td>愿意每 8 周换一次新鲜感的人</td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="chapter__foot">
        <a class="chapter__link" href="/download/">去玩法中心看完整对照表</a>
      </p>
    </div>
  </section>

  <section id="start" class="chapter chapter--paper start">
    <div class="gp-container">
      <div class="start__grid">
        <figure class="start__visual">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="俯拍的一只手在键盘与鼠标之间操作，桌边放着薄荷色步骤卡" loading="lazy" decoding="async">
        </figure>

        <div class="start__body">
          <p class="chapter__eyebrow">03 · 第一次上手</p>
          <h2 class="chapter__title">四步，大约三分钟</h2>
          <p class="chapter__lead">
            第一次接触棋牌电玩，最怕的是不知道该点哪里。客户端新手教程把整个过程压成了四步，
            一步一步照着做就行，中间不需要做任何额外设置。
          </p>

          <ol class="steps">
            <li class="step">
              <span class="step__num">01</span>
              <div>
                <h3 class="step__title">下载客户端</h3>
                <p class="step__text">从品牌站或官方渠道取安装包，桌面端和移动端都可以。</p>
              </div>
            </li>
            <li class="step">
              <span class="step__num">02</span>
              <div>
                <h3 class="step__title">校验后安装</h3>
                <p class="step__text">每个安装包都附有校验值，对一下再装，装上就是完整版。</p>
              </div>
            </li>
            <li class="step">
              <span class="step__num">03</span>
              <div>
                <h3 class="step__title">登录账号</h3>
                <p class="step__text">第一次登录后会收到一份入门指引卡，四步路径和玩法分类都在上面。</p>
              </div>
            </li>
            <li class="step">
              <span class="step__num">04</span>
              <div>
                <h3 class="step__title">选一个玩法</h3>
                <p class="step__text">按棋类、牌类、电玩挑一类，先玩熟一个，再考虑要不要换。</p>
              </div>
            </li>
          </ol>

          <a class="gp-btn gp-btn--primary" href="/download/">打开客户端新手教程</a>
        </div>
      </div>
    </div>
  </section>

  <section id="notices" class="chapter chapter--notice">
    <div class="gp-container">
      <div class="notice__grid">
        <div class="notice__intro">
          <p class="chapter__eyebrow">04 · 公告栏</p>
          <h2 class="chapter__title">临时查信息，先来这里</h2>
          <p class="chapter__lead">
            赛季、版本、服务三类公告一直挂在公告栏里，重要消息发布后 2 小时内会同步到公告栏和客户端提示。
            支持按分类筛选，也能用关键词直接搜。点开每一条可以看到摘要。
          </p>
          <figure class="notice__visual">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="暖纸色信笺与青提绿标签纸叠放在牌桌绒面上" loading="lazy" decoding="async">
          </figure>
        </div>

        <div class="notice__list">
          <details class="notice notice--season">
            <summary class="notice__summary">
              <span class="gp-tag gp-tag--mint">赛季</span>
              <span class="notice__title">本赛季第 3 周主题任务已开放</span>
              <span class="notice__when">本赛季第 3 周</span>
            </summary>
            <p class="notice__body">
              本期主题任务按周推进，进入赛季页就能看到当周内容。赛季结算在结束后 3 个工作日内发布，
              结算说明会同步贴到公告栏。
            </p>
          </details>

          <details class="notice notice--version">
            <summary class="notice__summary">
              <span class="gp-tag gp-tag--grape">版本</span>
              <span class="notice__title">两周一次的例行小版本已推送</span>
              <span class="notice__when">例行迭代</span>
            </summary>
            <p class="notice__body">
              本次小版本以稳定性和体验细节为主，桌面端建议 4GB 以上内存，移动端建议 Android 8.0
              或 iOS 13 以上系统。安装包校验值随版本一同更新。
            </p>
          </details>

          <details class="notice notice--service">
            <summary class="notice__summary">
              <span class="gp-tag gp-tag--gold">服务</span>
              <span class="notice__title">玩法建议征集本月开放</span>
              <span class="notice__when">每月一次</span>
            </summary>
            <p class="notice__body">
              每月开放一次玩法建议征集，用户提交的分类建议会进入玩法中心的复核清单，
              由玩法运营团队在版本排期时统一评估。
            </p>
          </details>

          <details class="notice notice--season">
            <summary class="notice__summary">
              <span class="gp-tag gp-tag--mint">赛季</span>
              <span class="notice__title">上赛季结算说明已归档</span>
              <span class="notice__when">上赛季结束后</span>
            </summary>
            <p class="notice__body">
              结算说明包括本期主题玩法的数据总览与下赛季方向提示。历史赛季说明可在公告栏按「赛季」
              分类翻到。
            </p>
          </details>

          <details class="notice notice--version">
            <summary class="notice__summary">
              <span class="gp-tag gp-tag--grape">版本</span>
              <span class="notice__title">双版本对照表随大版本同步刷新</span>
              <span class="notice__when">每季度</span>
            </summary>
            <p class="notice__body">
              对照表随每季度大版本更新一次，赛季条目在赛季开始前 3 天完成复核。想确认自己那一版有什么变化，
              看这张表最快。
            </p>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section id="catalog" class="chapter chapter--paper">
    <div class="gp-container">
      <p class="chapter__eyebrow">05 · 玩法分类索引</p>
      <h2 class="chapter__title">只玩一种的人，直接找自己那一类</h2>
      <p class="chapter__lead">
        玩法中心按棋类、牌类、电玩三大类维护 19 个玩法条目。老用户不用一页页翻，按分类点进去就是自己的那一类；
        第一次玩的人也可以先看条目名字，挑一个顺眼的开始。
      </p>

      <div class="indexgrid">
        <div class="indexcol">
          <h3 class="indexcol__head">
            <span class="dot dot--mint" aria-hidden="true"></span>
            棋类 <span class="indexcol__count gp-num">4 个条目</span>
          </h3>
          <ul class="indexcol__list">
            <li>快棋对局</li>
            <li>经典长局</li>
            <li>残局研习</li>
            <li>观战与复盘</li>
          </ul>
        </div>

        <div class="indexcol">
          <h3 class="indexcol__head">
            <span class="dot dot--grape" aria-hidden="true"></span>
            牌类 <span class="indexcol__count gp-num">9 个条目</span>
          </h3>
          <ul class="indexcol__list indexcol__list--two">
            <li>竞技场</li>
            <li>组队局</li>
            <li>轮转赛</li>
            <li>积分赛</li>
            <li>休闲快局</li>
            <li>好友房</li>
            <li>定级场</li>
            <li>训练场</li>
            <li>赛季锦标赛</li>
          </ul>
        </div>

        <div class="indexcol">
          <h3 class="indexcol__head">
            <span class="dot dot--gold" aria-hidden="true"></span>
            电玩 <span class="indexcol__count gp-num">6 个条目</span>
          </h3>
          <ul class="indexcol__list">
            <li>闯关模式</li>
            <li>连击挑战</li>
            <li>道具乱斗</li>
            <li>限时玩法</li>
            <li>组队挑战</li>
            <li>自由练习</li>
          </ul>
        </div>
      </div>

      <p class="chapter__foot">
        <a class="chapter__link" href="/download/">在玩法中心按分类筛选</a>
      </p>
    </div>
  </section>

  <section id="trust" class="chapter chapter--felt">
    <div class="gp-container">
      <p class="chapter__eyebrow">06 · 平台底子</p>
      <h2 class="chapter__title">九年，一条一直有人在走的路</h2>
      <p class="chapter__lead">
        从第一个棋牌模式上线到现在，平台没有中断过运营，中间完成过客户端重构、玩法中心上线和赛季制引入三次关键升级。
        现在的节奏是每两周一次小版本、每季度一次大版本，赛事与服务都按固定节拍走。
      </p>

      <div class="statlist">
        <div class="stat">
          <b>9 年</b>
          <span>持续运营至今</span>
        </div>
        <div class="stat">
          <b>860 万</b>
          <span>注册账号</span>
        </div>
        <div class="stat">
          <b>42 万</b>
          <span>日均活跃</span>
        </div>
        <div class="stat">
          <b>31 个</b>
          <span>服务覆盖省级行政区</span>
        </div>
      </div>

      <div class="team">
        <h3 class="team__title">68 人的运营团队，分工写在明面上</h3>
        <ul class="team__list">
          <li><b>26 人</b>客户端研发</li>
          <li><b>22 人</b>玩法运营</li>
          <li><b>11 人</b>内容与公告</li>
          <li><b>9 人</b>客服</li>
        </ul>
        <p class="team__note">
          最近一次用户回访问卷的整体满意度为 96%，其中「按分类找到玩法」一项好评率最高。
          公告栏累计发布公告 480 余条，玩法专题在品牌日志连载了 36 期。
        </p>
      </div>
    </div>
  </section>

  <section id="quick" class="chapter chapter--paper quick">
    <div class="gp-container">
      <p class="chapter__eyebrow">07 · 快捷入口</p>
      <h2 class="chapter__title">下一步去哪儿，挑一个就行</h2>
      <p class="chapter__lead">
        需要人工帮忙，去咨询服务页把设备、版本、玩法分类和出现阶段写清楚，客服在工作日 9:00-18:00 优先回复邮件，
        非工作时段提交的问题会在下一个工作时段处理。
      </p>

      <div class="quickrow">
        <a class="gp-btn gp-btn--primary" href="/download/">下载客户端</a>
        <a class="gp-btn gp-btn--ghost" href="/journal/">看最新公告</a>
        <a class="gp-btn gp-btn--ghost" href="/troubleshooting/">查常见问题</a>
        <a class="gp-btn gp-btn--ghost" href="/culture/">了解品牌文化</a>
        <a class="gp-btn gp-btn--ghost" href="/consult/">联系咨询服务</a>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-card: #FFFDF6;
  --home-card-line: rgba(185, 174, 203, .46);
  --home-mint-line: rgba(143, 203, 63, .55);
}

.page-home .gp-container {
  position: relative;
  z-index: 1;
}

/* ---------------- Hero ---------------- */

.page-home .hero {
  position: relative;
  padding: clamp(22px, 4vw, 44px) 0 clamp(38px, 6vw, 76px);
  background: var(--gp-paper);
  overflow: hidden;
}

.page-home .hero::before {
  content: "";
  position: absolute;
  top: -28%;
  right: -18%;
  width: min(620px, 82vw);
  height: min(620px, 82vw);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 42%, rgba(143, 203, 63, .26), rgba(106, 63, 168, .18) 46%, rgba(106, 63, 168, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.page-home .hero__ctx {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(18px, 3vw, 30px);
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--gp-grape);
  text-transform: uppercase;
}

.page-home .hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 40px);
  align-items: center;
}

.page-home .hero__title {
  margin: 0 0 16px;
  font-family: var(--gp-font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.6vw, 54px);
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--gp-ink);
  text-shadow: 0 0 22px rgba(106, 63, 168, .14);
}

.page-home .hero__text {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.85;
  color: var(--gp-ink-72);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .hero__visual {
  margin: 0;
  position: relative;
}

.page-home .hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--gp-r-lg);
  box-shadow: var(--gp-shadow-2);
}

.page-home .hero__cap {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gp-ink-50);
}

.page-home .hero__cards {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px, 5vw, 54px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 20px);
}

.page-home .pathcard {
  display: block;
  position: relative;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--gp-r-md);
  background: var(--home-card);
  border: 1px solid var(--home-card-line);
  box-shadow: var(--gp-shadow-1);
  color: inherit;
  text-decoration: none;
  transition: transform .35s var(--gp-ease), box-shadow .35s var(--gp-ease), border-color .35s var(--gp-ease);
}

.page-home .pathcard:hover,
.page-home .pathcard:focus-visible {
  transform: translate(6px, -6px);
  border-color: var(--gp-mint);
  box-shadow: var(--gp-shadow-2);
}

.page-home .pathcard:focus-visible {
  outline: 2px solid var(--gp-grape);
  outline-offset: 3px;
}

.page-home .pathcard__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--gp-grape);
  color: #fff;
  font-family: var(--gp-font-mono);
  font-size: 14px;
  font-weight: 600;
}

.page-home .pathcard__title {
  margin: 0 0 8px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--gp-ink);
}

.page-home .pathcard__text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gp-ink-72);
}

.page-home .pathcard__go {
  display: inline-block;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gp-mint);
  padding-bottom: 2px;
  border-bottom: 2px solid var(--home-mint-line);
}

/* ---------------- Chapter base ---------------- */

.page-home .chapter {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0;
}

.page-home .chapter--paper {
  background: var(--gp-paper);
}

.page-home .chapter--night {
  background:
    radial-gradient(120% 96% at 88% 0%, rgba(106, 63, 168, .5), rgba(106, 63, 168, 0) 62%),
    linear-gradient(158deg, var(--gp-vine) 0%, var(--gp-ink) 74%);
  color: var(--gp-mint-soft);
}

.page-home .chapter--felt {
  background:
    radial-gradient(96% 84% at 10% 8%, rgba(143, 203, 63, .18), rgba(143, 203, 63, 0) 64%),
    linear-gradient(180deg, var(--gp-felt), #16211B 100%);
  color: var(--gp-mint-soft);
}

.page-home .chapter--notice {
  background: linear-gradient(180deg, var(--gp-paper), #F1EADB);
}

.page-home .chapter__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gp-grape);
}

.page-home .chapter__eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .85;
}

.page-home .chapter--night .chapter__eyebrow,
.page-home .chapter--felt .chapter__eyebrow {
  color: var(--gp-mint);
}

.page-home .chapter__title {
  margin: 0 0 16px;
  font-family: var(--gp-font-display);
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--gp-ink);
}

.page-home .chapter--night .chapter__title,
.page-home .chapter--felt .chapter__title {
  color: var(--gp-mint-soft);
}

.page-home .chapter__lead {
  margin: 0 0 26px;
  max-width: 38em;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.85;
  color: var(--gp-ink-72);
}

.page-home .chapter--night .chapter__lead,
.page-home .chapter--felt .chapter__lead {
  color: rgba(234, 247, 236, .84);
}

.page-home .chapter__foot {
  margin: 28px 0 0;
}

.page-home .chapter__link {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--gp-grape);
  text-decoration: none;
  border-bottom: 2px solid var(--home-mint-line);
  padding-bottom: 2px;
  transition: color .3s var(--gp-ease), border-color .3s var(--gp-ease);
}

.page-home .chapter__link:hover,
.page-home .chapter__link:focus-visible {
  color: var(--gp-vine);
  border-color: var(--gp-grape);
}

.page-home .chapter__link:focus-visible {
  outline: 2px solid var(--gp-grape);
  outline-offset: 3px;
}

.page-home .chapter--night .chapter__link,
.page-home .chapter--felt .chapter__link {
  color: var(--gp-mint);
  border-color: rgba(143, 203, 63, .5);
}

.page-home .chapter--night .chapter__link:focus-visible,
.page-home .chapter--felt .chapter__link:focus-visible {
  outline-color: var(--gp-mint);
}

/* ---------------- Season ---------------- */

.page-home .season {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-home .season__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.page-home .season__facts li {
  padding: 14px 12px;
  border-radius: var(--gp-r-sm);
  background: rgba(234, 247, 236, .08);
  border: 1px solid rgba(143, 203, 63, .26);
}

.page-home .season__facts b {
  display: block;
  font-family: var(--gp-font-mono);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  color: var(--gp-gold);
  margin-bottom: 4px;
}

.page-home .season__facts span {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(234, 247, 236, .78);
}

.page-home .season__note {
  margin: 0 0 26px;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(234, 247, 236, .86);
}

.page-home .season__visual {
  margin: 0;
}

.page-home .season__visual img,
.page-home .start__visual img,
.page-home .notice__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--gp-r-lg);
}

.page-home .season__visual img {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

/* ---------------- Version table ---------------- */

.page-home .version-table {
  background: var(--home-card);
}

.page-home .version-table__cap {
  caption-side: top;
  text-align: left;
  padding: 0 0 12px;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gp-grape);
}

.page-home .version-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--gp-vine);
}

/* ---------------- Steps ---------------- */

.page-home .start__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.page-home .start__visual {
  margin: 0;
}

.page-home .start__visual img {
  border-radius: var(--gp-r-lg);
  box-shadow: var(--gp-shadow-2);
}

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

.page-home .step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--home-card-line);
}

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

.page-home .step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--gp-r-sm);
  background: linear-gradient(140deg, var(--gp-grape), var(--gp-vine));
  color: var(--gp-mint-soft);
  font-family: var(--gp-font-mono);
  font-size: 15px;
  font-weight: 600;
}

.page-home .step__title {
  margin: 0 0 4px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gp-ink);
}

.page-home .step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gp-ink-72);
}

/* ---------------- Notices ---------------- */

.page-home .notice__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.page-home .notice__visual {
  margin: 0;
}

.page-home .notice__visual img {
  border-radius: var(--gp-r-lg);
  box-shadow: var(--gp-shadow-1);
}

.page-home .notice__list {
  display: grid;
  gap: 12px;
}

.page-home .notice {
  border-radius: var(--gp-r-md);
  border: 1px solid var(--home-card-line);
  border-left: 5px solid var(--gp-haze);
  background: var(--home-card);
  box-shadow: var(--gp-shadow-1);
  overflow: hidden;
  transition: border-color .3s var(--gp-ease), transform .3s var(--gp-ease);
}

.page-home .notice:hover {
  transform: translateX(4px);
}

.page-home .notice--season {
  border-left-color: var(--gp-mint);
}

.page-home .notice--version {
  border-left-color: var(--gp-grape);
}

.page-home .notice--service {
  border-left-color: var(--gp-gold);
}

.page-home .notice__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  line-height: 1.6;
}

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

.page-home .notice__summary:focus-visible {
  outline: 2px solid var(--gp-grape);
  outline-offset: -3px;
}

.page-home .notice__title {
  flex: 1 1 200px;
  min-width: 0;
  font-weight: 500;
  color: var(--gp-ink);
}

.page-home .notice__when {
  flex: 0 0 auto;
  font-family: var(--gp-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gp-ink-50);
}

.page-home .notice__body {
  margin: 0;
  padding: 0 18px 18px;
  max-width: 42em;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gp-ink-72);
}

/* ---------------- Catalog index ---------------- */

.page-home .indexgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 24px);
}

.page-home .indexcol {
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--gp-r-md);
  background: var(--home-card);
  border: 1px solid var(--home-card-line);
  box-shadow: var(--gp-shadow-1);
}

.page-home .indexcol__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--gp-ink);
}

.page-home .indexcol__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gp-grape);
  margin-left: auto;
}

.page-home .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.page-home .dot--mint {
  background: var(--gp-mint);
}

.page-home .dot--grape {
  background: var(--gp-grape);
}

.page-home .dot--gold {
  background: var(--gp-gold);
}

.page-home .indexcol__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.page-home .indexcol__list li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gp-ink-72);
}

.page-home .indexcol__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gp-haze);
}

.page-home .indexcol__list--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------------- Trust / stats ---------------- */

.page-home .statlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 30px);
  margin-bottom: clamp(30px, 4vw, 46px);
}

.page-home .stat b {
  display: block;
  font-family: var(--gp-font-mono);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--gp-gold);
  padding-bottom: 8px;
  border-bottom: 3px solid rgba(143, 203, 63, .5);
  margin-bottom: 8px;
}

.page-home .stat span {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(234, 247, 236, .8);
}

.page-home .team {
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--gp-r-md);
  background: rgba(234, 247, 236, .07);
  border: 1px solid rgba(143, 203, 63, .24);
}

.page-home .team__title {
  margin: 0 0 16px;
  font-family: var(--gp-font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--gp-mint-soft);
}

.page-home .team__list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.page-home .team__list li {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(234, 247, 236, .82);
}

.page-home .team__list b {
  display: block;
  font-family: var(--gp-font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--gp-mint);
  margin-bottom: 2px;
}

.page-home .team__note {
  margin: 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(234, 247, 236, .78);
}

/* ---------------- Quick row ---------------- */

.page-home .quickrow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------- Breakpoints ---------------- */

@media (min-width: 700px) {
  .page-home .hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .indexgrid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 5fr);
  }
}

@media (min-width: 900px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr);
    align-items: center;
  }

  .page-home .season {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-home .start__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .notice__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .page-home .statlist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-home .team__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .page-home .hero__cards {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    row-gap: clamp(16px, 2vw, 26px);
  }

  .page-home .hero__cards > .pathcard:nth-child(1) {
    grid-column: 1 / span 5;
  }

  .page-home .hero__cards > .pathcard:nth-child(2) {
    grid-column: 7 / span 6;
    margin-top: 44px;
  }

  .page-home .hero__cards > .pathcard:nth-child(3) {
    grid-column: 2 / span 5;
    margin-top: -14px;
  }

  .page-home .hero__cards > .pathcard:nth-child(4) {
    grid-column: 8 / span 4;
    margin-top: -30px;
  }
}

@media (max-width: 560px) {
  .page-home .season__facts {
    grid-template-columns: 1fr;
  }

  .page-home .indexcol__list--two {
    grid-template-columns: 1fr;
  }

  .page-home .notice__when {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .pathcard,
  .page-home .notice,
  .page-home .chapter__link {
    transition: none;
  }

  .page-home .pathcard:hover,
  .page-home .pathcard:focus-visible,
  .page-home .notice:hover {
    transform: none;
  }
}