.page-home {
  --home-line: rgba(8, 42, 74, .14);
  --home-line-soft: rgba(247, 241, 230, .22);
  --home-body: #3a5670;
  --home-muted: #4a6478;
  background: var(--hq-cream);
  color: var(--hq-ink);
  font-family: var(--hq-font-sans);
  font-size: 17px;
  line-height: 1.8;
  overflow-x: hidden;
}

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

.page-home a {
  color: inherit;
}

/* ============ 首屏 ============ */
.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--hq-header-h) + 32px) 0 clamp(60px, 9vw, 100px);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(15, 61, 99, .95), rgba(8, 42, 74, 1) 58%),
    var(--hq-deep);
  color: var(--hq-cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
}

.page-home .home-hero__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(112deg, rgba(217, 154, 43, .12) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 72%);
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
}

.page-home .home-hero__crumb {
  margin-bottom: 22px;
  font-family: var(--hq-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .82;
}

.page-home .home-hero .hq-eyebrow {
  color: var(--hq-sand);
}

.page-home .home-hero__title {
  margin: 12px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(32px, 6.4vw, 60px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 16em;
}

.page-home .home-hero__lede {
  margin-top: 20px;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.88;
  color: rgba(247, 241, 230, .86);
}

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

.page-home .home-hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--home-line-soft);
}

.page-home .home-hero__strip .hq-note {
  margin: 0;
  font-family: var(--hq-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(240, 217, 166, .92);
}

.page-home .home-shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--hq-deep-2);
  border: 1px solid rgba(247, 241, 230, .18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.page-home .home-shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-home .home-hero__shot {
  box-shadow: var(--hq-shadow);
}

.page-home .home-hero__chapters {
  margin-top: 6px;
}

.page-home .home-hero__chapters-label {
  margin: 0 0 12px;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: rgba(127, 155, 179, .95);
}

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

.page-home .home-chapters li {
  background: rgba(8, 42, 74, .5);
}

.page-home .home-chapters a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--hq-cream);
  transition: background .25s var(--hq-ease), color .25s var(--hq-ease);
}

.page-home .home-chapters a:hover,
.page-home .home-chapters a:focus-visible {
  background: rgba(217, 154, 43, .18);
  color: #fff;
}

.page-home .home-chapters__num {
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--hq-gold);
}

.page-home .home-chapters__arrow {
  margin-left: auto;
  color: var(--hq-mist);
}

/* ============ 区块通用 ============ */
.page-home .home-section {
  padding: clamp(52px, 8vw, 100px) 0;
}

.page-home .home-head {
  max-width: 740px;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-home .home-head .hq-h2 {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.3;
  color: var(--hq-deep);
}

.page-home .home-head .hq-eyebrow {
  color: #8a6a1f;
}

.page-home .home-head .hq-lede {
  margin-top: 16px;
  color: var(--home-body);
  max-width: 60ch;
}

/* ============ 入口磁贴 ============ */
.page-home .home-entries {
  background: var(--hq-cream);
}

.page-home .home-entries__body {
  display: grid;
  gap: clamp(24px, 3.5vw, 42px);
}

.page-home .home-entries__figure {
  margin: 0;
  align-self: start;
}

.page-home .home-entries__figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--home-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  background: var(--hq-ash);
}

.page-home .home-entries__caption {
  margin-top: 10px;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--hq-mist);
}

.page-home .home-tile__grid {
  display: grid;
  gap: 14px;
}

.page-home .home-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 168px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--home-line);
  color: var(--hq-ink);
  text-decoration: none;
  transition: transform .3s var(--hq-ease), box-shadow .3s var(--hq-ease), border-color .3s var(--hq-ease);
}

.page-home .home-tile:hover,
.page-home .home-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--hq-shadow);
  border-color: rgba(217, 154, 43, .6);
}

.page-home .home-tile .hq-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home .home-tile .hq-tile__head .hq-note {
  font-family: var(--hq-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--hq-mist);
}

.page-home .home-tile .hq-tile__title {
  font-family: var(--hq-font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--hq-deep);
}

.page-home .home-tile .hq-tile__desc {
  font-size: 13.8px;
  line-height: 1.72;
  color: var(--home-muted);
}

.page-home .home-tile .hq-tile__more {
  margin-top: auto;
  align-self: flex-start;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hq-deep);
  border-bottom: 1px solid rgba(217, 154, 43, .7);
}

/* ============ 帮助分类 ============ */
.page-home .home-help {
  background: var(--hq-ash);
}

.page-home .home-help__grid {
  display: grid;
  gap: 14px;
}

.page-home .home-help__card {
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid rgba(8, 42, 74, .1);
  border-top: 3px solid var(--hq-gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-home .home-help__card h3 {
  margin: 0 0 12px;
  font-family: var(--hq-font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--hq-deep);
}

.page-home .home-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--home-muted);
}

.page-home .home-help__list li {
  position: relative;
  padding-left: 15px;
}

.page-home .home-help__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--hq-gold);
}

.page-home .home-help__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(8, 42, 74, .12);
}

.page-home .home-help__foot .hq-note {
  margin: 0;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #4f6a80;
}

/* ============ 版本时间轴 ============ */
.page-home .home-versions {
  position: relative;
  background: var(--hq-deep);
  color: var(--hq-cream);
  overflow: hidden;
}

.page-home .home-versions__head {
  display: grid;
  gap: 18px;
}

.page-home .home-versions .hq-h2 {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.3;
  color: #fff;
}

.page-home .home-versions .hq-eyebrow {
  color: var(--hq-sand);
}

.page-home .home-versions .hq-lede {
  margin-top: 16px;
  max-width: 58ch;
  color: rgba(247, 241, 230, .8);
}

.page-home .home-versions__stamp {
  justify-self: start;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--hq-sand);
  border-color: rgba(240, 217, 166, .5);
  white-space: nowrap;
}

.page-home .home-versions__band {
  margin: 32px 0 0;
}

.page-home .home-versions__band img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  opacity: .8;
  border: 1px solid rgba(247, 241, 230, .14);
}

.page-home .home-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-top: 1px solid var(--home-line-soft);
  -webkit-overflow-scrolling: touch;
}

.page-home .home-tl li {
  position: relative;
  flex: 0 0 min(80%, 280px);
  scroll-snap-align: start;
  padding: 26px 22px 14px 0;
}

.page-home .home-tl li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--hq-gold);
  box-shadow: 0 0 0 4px rgba(217, 154, 43, .2);
}

.page-home .home-tl li:first-child::before {
  background: var(--hq-coral);
  box-shadow: 0 0 0 4px rgba(242, 107, 78, .24);
}

.page-home .home-tl__date {
  margin: 0;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--hq-sand);
}

.page-home .home-tl__title {
  margin: 8px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.page-home .home-tl__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(247, 241, 230, .72);
}

.page-home .home-versions__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 26px;
}

.page-home .home-versions__link {
  font-size: 13.5px;
  color: var(--hq-sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 217, 166, .45);
  padding-bottom: 2px;
}

.page-home .home-versions__link:hover {
  color: #fff;
}

/* ============ 订阅与回访 ============ */
.page-home .home-renewal {
  background: var(--hq-cream);
}

.page-home .home-renewal__inner {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-home .home-renewal .hq-eyebrow {
  color: #8a6a1f;
}

.page-home .home-renewal .hq-h2 {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.3;
  color: var(--hq-deep);
}

.page-home .home-renewal__text {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--home-body);
  max-width: 56ch;
}

.page-home .home-renewal__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--home-line);
}

.page-home .home-stat__num {
  display: block;
  font-family: var(--hq-font-display);
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.15;
  color: var(--hq-deep);
}

.page-home .home-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--home-muted);
}

.page-home .home-steps {
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--home-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-home .home-steps__title {
  margin: 0 0 18px;
  font-family: var(--hq-font-sans);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--hq-deep);
  letter-spacing: .02em;
}

.page-home .home-steps__list {
  list-style: none;
  counter-reset: hstep;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.page-home .home-steps__list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  font-size: 14.2px;
  line-height: 1.72;
  color: var(--home-body);
}

.page-home .home-steps__list li::before {
  counter-increment: hstep;
  content: counter(hstep, decimal-leading-zero);
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--hq-gold);
  padding-top: 4px;
}

.page-home .home-steps__note {
  margin: 20px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--home-line);
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--hq-mist);
}

/* ============ 底部联系 ============ */
.page-home .home-closing {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(40px, 6vw, 64px);
  background: var(--hq-deep);
  color: var(--hq-cream);
}

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

.page-home .home-closing__mount img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  opacity: .34;
}

.page-home .home-closing__mount::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 42, 74, .25), var(--hq-deep) 94%);
}

.page-home .home-closing__inner {
  display: grid;
  gap: 30px;
  padding-top: clamp(26px, 4vw, 44px);
}

.page-home .home-closing .hq-eyebrow {
  color: var(--hq-sand);
}

.page-home .home-closing__title {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.3;
  color: #fff;
}

.page-home .home-closing__text {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 14.8px;
  line-height: 1.85;
  color: rgba(247, 241, 230, .78);
}

.page-home .home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
}

.page-home .home-links a {
  font-size: 13.5px;
  color: var(--hq-sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 217, 166, .4);
  padding-bottom: 2px;
}

.page-home .home-links a:hover,
.page-home .home-links a:focus-visible {
  color: #fff;
  border-color: var(--hq-gold);
}

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

.page-home .home-contact__item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 241, 230, .14);
}

.page-home .home-contact__key {
  font-family: var(--hq-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--hq-sand);
  padding-top: 4px;
}

.page-home .home-contact__value {
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  word-break: break-word;
}

.page-home .home-contact__sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(247, 241, 230, .6);
  word-break: break-word;
}

.page-home .home-closing__legal {
  margin: 18px 0 0;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(247, 241, 230, .55);
}

/* ============ 响应式 ============ */
@media (min-width: 640px) {
  .page-home .home-tile__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

@media (min-width: 900px) {
  .page-home .home-hero {
    padding-bottom: clamp(80px, 8vw, 110px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
  }

  .page-home .home-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }

  .page-home .home-hero__chapters {
    grid-column: 1 / -1;
    margin-top: 18px;
  }

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

  .page-home .home-versions__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .page-home .home-versions__stamp {
    justify-self: end;
  }

  .page-home .home-tl li {
    flex: 0 0 25%;
    padding-right: 26px;
  }

  .page-home .home-renewal__inner {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-home .home-closing__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-home .home-entries__body {
    grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
    align-items: start;
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-home .home-tile,
  .page-home .home-chapters a {
    transition: none;
  }

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


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

  <section class="home-hero hq-on-dark" id="start" data-section>
    <div class="home-hero__texture" aria-hidden="true"></div>
    <div class="hq-container home-hero__inner">

      <div class="home-hero__copy">
        <nav class="hq-breadcrumb hq-breadcrumb--on-dark home-hero__crumb" aria-label="面包屑">
          <span>环球主页</span>
          <span class="hq-breadcrumb__sep">/</span>
          <span aria-current="page">首页</span>
        </nav>
        <p class="hq-eyebrow">站点总入口 · 收藏手册</p>
        <h1 class="hq-h1 home-hero__title">从环球主页出发，下一步该点哪里一目了然</h1>
        <p class="hq-lede home-hero__lede">登录入口、帮助分类、版本说明与订阅通道全部摆在首屏可见的位置。习惯在电脑前处理事情的访客，收藏顶部入口之后回访更快——桌面端登录环球站点，关键入口 2 秒内出现，整体加载速度较上一版提升约 35%。</p>
        <div class="home-hero__actions">
          <a class="hq-btn hq-btn--gold" href="/offerings/">查看入口目录</a>
          <a class="hq-btn hq-btn--ghost" href="/faqs/">进入帮助中心</a>
        </div>
        <div class="home-hero__strip">
          <p class="hq-note">自 2018 年持续运营</p>
          <p class="hq-note">服务覆盖内地 26 个省份</p>
          <p class="hq-note">最近一次版本说明 3 月 12 日</p>
        </div>
      </div>

      <div class="home-hero__side">
        <figure class="home-shot home-hero__shot">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="桌面端界面局部，登录入口与金色收藏星标并列排布">
        </figure>
      </div>

      <div class="home-hero__chapters">
        <p class="hq-note home-hero__chapters-label">往下翻，四个章节依次展开</p>
        <ol class="home-chapters">
          <li><a href="#entries"><span class="home-chapters__num">01</span>五类常用入口<span class="home-chapters__arrow" aria-hidden="true">↓</span></a></li>
          <li><a href="#help"><span class="home-chapters__num">02</span>帮助分类速览<span class="home-chapters__arrow" aria-hidden="true">↓</span></a></li>
          <li><a href="#versions"><span class="home-chapters__num">03</span>版本更新记录<span class="home-chapters__arrow" aria-hidden="true">↓</span></a></li>
          <li><a href="#renewal"><span class="home-chapters__num">04</span>订阅与回访<span class="home-chapters__arrow" aria-hidden="true">↓</span></a></li>
        </ol>
      </div>

    </div>
  </section>

  <section class="home-section home-entries" id="entries" data-section>
    <div class="hq-container">
      <header class="home-head">
        <p class="hq-eyebrow">入口磁贴</p>
        <h2 class="hq-h2">五张磁贴，把回访的几步并成一步</h2>
        <p class="hq-lede">环球电脑端常用人群收藏了首页顶部入口，之后每次回来直接落到自己常用的那一格，不必重新认路。登录、帮助、版本、订阅与联系各占一格，鼠标移上去就知道它替您省下哪一步。</p>
      </header>

      <div class="home-entries__body">
        <figure class="home-entries__figure">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="悬浮磁贴与星标收藏的抽象几何组合" loading="lazy" decoding="async">
          <figcaption class="hq-note home-entries__caption">入口按使用频率排序，登录与收藏排在最前</figcaption>
        </figure>

        <div class="home-tile__grid">
          <a class="hq-tile home-tile" href="/offerings/" data-reveal>
            <span class="hq-tile__head"><span class="hq-tag hq-tag--gold">01</span><span class="hq-note">桌面端</span></span>
            <span class="hq-tile__title">登录入口</span>
            <span class="hq-tile__desc">常用电脑的朋友打开页面就能看到，不用先找菜单。</span>
            <span class="hq-tile__more">打开入口</span>
          </a>

          <a class="hq-tile home-tile" href="/offerings/" data-reveal>
            <span class="hq-tile__head"><span class="hq-tag">02</span><span class="hq-note">收藏</span></span>
            <span class="hq-tile__title">顶部收藏</span>
            <span class="hq-tile__desc">收藏一次，登录、帮助中心与版本说明随点随到。</span>
            <span class="hq-tile__more">看收藏方式</span>
          </a>

          <a class="hq-tile home-tile" href="/faqs/" data-reveal>
            <span class="hq-tile__head"><span class="hq-tag">03</span><span class="hq-note">帮助</span></span>
            <span class="hq-tile__title">帮助中心</span>
            <span class="hq-tile__desc">6 大栏目、42 条常见问题，进门就能找到对应分类。</span>
            <span class="hq-tile__more">去问问题</span>
          </a>

          <a class="hq-tile home-tile" href="/topics/" data-reveal>
            <span class="hq-tile__head"><span class="hq-tag">04</span><span class="hq-note">版本</span></span>
            <span class="hq-tile__title">版本说明</span>
            <span class="hq-tile__desc">每次焕新都留了记录，3 月 12 日的摘要就在里面。</span>
            <span class="hq-tile__more">查更新</span>
          </a>

          <a class="hq-tile home-tile" href="/reach-us/" data-reveal>
            <span class="hq-tile__head"><span class="hq-tag">05</span><span class="hq-note">人工</span></span>
            <span class="hq-tile__title">联系入口</span>
            <span class="hq-tile__desc">邮箱与电话摆在明面上，工作日白天有人值守。</span>
            <span class="hq-tile__more">找人帮忙</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <section class="home-section home-help" id="help" data-section>
    <div class="hq-container">
      <header class="home-head">
        <p class="hq-eyebrow">帮助分类</p>
        <h2 class="hq-h2">问题对号入座，比翻半天更快</h2>
        <p class="hq-lede">第一次来的人多半卡在“从哪开始”，天天用的人更关心“这次为什么慢了一点点”。四组问题分开摆放，点开就有答案。</p>
      </header>

      <div class="home-help__grid">
        <article class="home-help__card">
          <h3>第一次来</h3>
          <ul class="home-help__list">
            <li>从首页导航建立自己的收藏路径</li>
            <li>电脑与手机看到的入口差别</li>
            <li>哪些说明适合先读一遍</li>
          </ul>
        </article>

        <article class="home-help__card">
          <h3>登录与加载</h3>
          <ul class="home-help__list">
            <li>登录入口在页面中的位置</li>
            <li>换一台电脑后收藏如何找回</li>
            <li>页面打开偏慢时的排查顺序</li>
          </ul>
        </article>

        <article class="home-help__card">
          <h3>订阅与版本</h3>
          <ul class="home-help__list">
            <li>焕新版按什么节奏发布</li>
            <li>版本标签分别代表哪类改动</li>
            <li>怎样只看自己关心的更新</li>
          </ul>
        </article>

        <article class="home-help__card">
          <h3>联系与反馈</h3>
          <ul class="home-help__list">
            <li>邮件里写清哪些信息更快解决</li>
            <li>电话热线的获取方式</li>
            <li>反馈桌面端问题时该说明什么</li>
          </ul>
        </article>
      </div>

      <div class="home-help__foot">
        <p class="hq-note">帮助中心设 6 大栏目，条目按主题归位</p>
        <a class="hq-btn hq-btn--deep" href="/faqs/">浏览全部帮助条目</a>
      </div>
    </div>
  </section>

  <section class="home-section home-versions hq-on-dark" id="versions" data-section>
    <div class="hq-container">
      <header class="home-versions__head">
        <div>
          <p class="hq-eyebrow">版本记录</p>
          <h2 class="hq-h2">每月一版，改动都留了底</h2>
          <p class="hq-lede">焕新版按月推进，入口优化、帮助分类、订阅焕新与收藏体验四类标签分开归档，累计记录 36 次更新。想确认某一处是什么时候变的，沿着这条线往回找就行。</p>
        </div>
        <p class="hq-tag hq-tag--line home-versions__stamp">最近一次 3 月 12 日</p>
      </header>

      <figure class="home-versions__band">
        <img src="{zhanqunpic:h:700w:1400}" width="1400" height="700" alt="横向时间轴与档案标签组成的抽象图形" loading="lazy" decoding="async">
      </figure>

      <ol class="home-tl">
        <li data-reveal>
          <p class="home-tl__date">3 月 12 日 · 入口优化</p>
          <p class="home-tl__title">桌面端首屏更快</p>
          <p class="home-tl__text">关键入口 2 秒内可见，整体加载较上一版提升约 35%。</p>
        </li>
        <li data-reveal>
          <p class="home-tl__date">上一轮 · 帮助分类</p>
          <p class="home-tl__title">栏目重排到 6 个</p>
          <p class="home-tl__text">42 条常见问题按入门、登录、订阅、版本、收藏与联系归位。</p>
        </li>
        <li data-reveal>
          <p class="home-tl__date">更早 · 收藏体验</p>
          <p class="home-tl__title">顶部入口一键定位</p>
          <p class="home-tl__text">收藏后可直接跳到登录、帮助中心与版本说明，不必逐层点开。</p>
        </li>
        <li data-reveal>
          <p class="home-tl__date">持续 · 订阅焕新</p>
          <p class="home-tl__title">按月发布说明</p>
          <p class="home-tl__text">内地老用户订阅后，每次更新都能在版本页看到完整摘要。</p>
        </li>
      </ol>

      <div class="home-versions__foot">
        <a class="hq-btn hq-btn--gold" href="/topics/">查看版本说明</a>
        <a class="home-versions__link" href="/values/">了解我们怎么长期维护这些入口</a>
      </div>
    </div>
  </section>

  <section class="home-section home-renewal" id="renewal" data-section>
    <div class="hq-container home-renewal__inner">
      <div class="home-renewal__copy">
        <p class="hq-eyebrow">订阅与回访</p>
        <h2 class="hq-h2">订阅焕新版，更新一到就知道</h2>
        <p class="home-renewal__text">内地老用户订阅焕新版之后，每次版本说明发布都会在版本页留下记录。想知道这一版动了哪里，按标签筛一遍就能落到入口优化、帮助分类、订阅焕新或收藏体验，不必从头读到尾。</p>
        <p class="home-renewal__text">日常用得频繁的，建议把首页顶部入口放进收藏夹：电脑端回访时打开就是熟悉的界面，登录、帮助与版本各归各位。</p>
        <div class="home-renewal__stats">
          <div class="home-stat">
            <span class="home-stat__num">30 万+</span>
            <span class="home-stat__label">累计服务访客</span>
          </div>
          <div class="home-stat">
            <span class="home-stat__num">5.6 万</span>
            <span class="home-stat__label">桌面端高频回访用户</span>
          </div>
          <div class="home-stat">
            <span class="home-stat__num">18 人</span>
            <span class="home-stat__label">编辑、客服与校对团队</span>
          </div>
        </div>
      </div>

      <div class="home-steps">
        <h3 class="home-steps__title">订阅之后，四步看到变化</h3>
        <ol class="home-steps__list">
          <li>在首页顶部入口确认订阅状态，避免重复提交。</li>
          <li>打开版本说明页，按标签筛出这次关心的那类改动。</li>
          <li>读摘要确认影响范围，再决定是否需要调整收藏。</li>
          <li>发现描述与实际不符，记下版本日期后联系客服。</li>
        </ol>
        <p class="hq-note home-steps__note">工作日 9:00-18:00 安排客服轮值，邮件当天回复居多。</p>
        <a class="hq-btn hq-btn--outline" href="/reach-us/">联系客服确认</a>
      </div>
    </div>
  </section>

  <section class="home-closing hq-on-dark" id="contact">
    <figure class="home-closing__mount">
      <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深海蓝与暖米白低对比的广西山水轮廓线稿" loading="lazy" decoding="async">
    </figure>

    <div class="hq-container home-closing__inner">
      <div>
        <p class="hq-eyebrow">联系与备案</p>
        <h2 class="hq-h2 home-closing__title">需要人工帮忙的时候</h2>
        <p class="home-closing__text">入口能不能用、版本改成什么样、订阅有没有生效，这三类问题都可以直接找人。已有 9 家内容服务伙伴与我们共建界面指引与版本校对内容，反馈通常能落到具体条目上。</p>
        <div class="home-links">
          <a href="/reach-us/">联系入口</a>
          <a href="/faqs/">帮助中心</a>
          <a href="/privacy/">隐私政策</a>
          <a href="/usage/">使用说明</a>
        </div>
      </div>

      <div class="home-contact">
        <div class="home-contact__item">
          <span class="home-contact__key">客服邮箱</span>
          <span class="home-contact__value">kefu@hq-global.com.cn<span class="home-contact__sub">工作日 9:00-18:00 有专人回复</span></span>
        </div>
        <div class="home-contact__item">
          <span class="home-contact__key">服务电话</span>
          <span class="home-contact__value">400-9378-6986<span class="home-contact__sub">如需电话联系，请通过帮助中心「联系我们」栏目获取最新热线</span></span>
        </div>
        <div class="home-contact__item">
          <span class="home-contact__key">地址</span>
          <span class="home-contact__value">广西省南宁市青秀区民族大道136号</span>
        </div>
        <p class="home-closing__legal">桂ICP备92661944号-4 · 环球主页 · <span data-year>2025</span></p>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-line: rgba(8, 42, 74, .14);
  --home-line-soft: rgba(247, 241, 230, .22);
  --home-body: #3a5670;
  --home-muted: #4a6478;
  background: var(--hq-cream);
  color: var(--hq-ink);
  font-family: var(--hq-font-sans);
  font-size: 17px;
  line-height: 1.8;
  overflow-x: hidden;
}

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

.page-home a {
  color: inherit;
}

.page-home .home-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--hq-header-h) + 32px) 0 clamp(60px, 9vw, 100px);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(15, 61, 99, .95), rgba(8, 42, 74, 1) 58%),
    var(--hq-deep);
  color: var(--hq-cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%);
}

.page-home .home-hero__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(112deg, rgba(217, 154, 43, .12) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 72%);
}

.page-home .home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
}

.page-home .home-hero__crumb {
  margin-bottom: 22px;
  font-family: var(--hq-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  opacity: .82;
}

.page-home .home-hero .hq-eyebrow {
  color: var(--hq-sand);
}

.page-home .home-hero__title {
  margin: 12px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(32px, 6.4vw, 58px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 17em;
}

.page-home .home-hero__lede {
  margin-top: 20px;
  max-width: 54ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.88;
  color: rgba(247, 241, 230, .86);
}

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

.page-home .home-hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--home-line-soft);
}

.page-home .home-hero__strip .hq-note {
  margin: 0;
  font-family: var(--hq-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(240, 217, 166, .92);
}

.page-home .home-shot {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--hq-deep-2);
  border: 1px solid rgba(247, 241, 230, .18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.page-home .home-shot img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-home .home-hero__shot {
  box-shadow: var(--hq-shadow);
}

.page-home .home-hero__chapters {
  margin-top: 6px;
}

.page-home .home-hero__chapters-label {
  margin: 0 0 12px;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: rgba(127, 155, 179, .95);
}

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

.page-home .home-chapters li {
  background: rgba(8, 42, 74, .5);
}

.page-home .home-chapters a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--hq-cream);
  transition: background .25s var(--hq-ease), color .25s var(--hq-ease);
}

.page-home .home-chapters a:hover,
.page-home .home-chapters a:focus-visible {
  background: rgba(217, 154, 43, .18);
  color: #fff;
}

.page-home .home-chapters__num {
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--hq-gold);
}

.page-home .home-chapters__arrow {
  margin-left: auto;
  color: var(--hq-mist);
}

.page-home .home-section {
  padding: clamp(52px, 8vw, 100px) 0;
}

.page-home .home-head {
  max-width: 740px;
  margin-bottom: clamp(26px, 4vw, 46px);
}

.page-home .home-head .hq-h2 {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.3;
  color: var(--hq-deep);
}

.page-home .home-head .hq-eyebrow {
  color: #8a6a1f;
}

.page-home .home-head .hq-lede {
  margin-top: 16px;
  color: var(--home-body);
  max-width: 60ch;
}

.page-home .home-entries {
  background: var(--hq-cream);
}

.page-home .home-entries__body {
  display: grid;
  gap: clamp(24px, 3.5vw, 42px);
}

.page-home .home-entries__figure {
  margin: 0;
  align-self: start;
}

.page-home .home-entries__figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--home-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  background: var(--hq-ash);
}

.page-home .home-entries__caption {
  margin-top: 10px;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--hq-mist);
}

.page-home .home-tile__grid {
  display: grid;
  gap: 14px;
}

.page-home .home-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 168px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--home-line);
  color: var(--hq-ink);
  text-decoration: none;
  transition: transform .3s var(--hq-ease), box-shadow .3s var(--hq-ease), border-color .3s var(--hq-ease);
}

.page-home .home-tile:hover,
.page-home .home-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--hq-shadow);
  border-color: rgba(217, 154, 43, .6);
}

.page-home .home-tile .hq-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.page-home .home-tile .hq-tile__head .hq-note {
  font-family: var(--hq-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--hq-mist);
}

.page-home .home-tile .hq-tile__title {
  font-family: var(--hq-font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--hq-deep);
}

.page-home .home-tile .hq-tile__desc {
  font-size: 13.8px;
  line-height: 1.72;
  color: var(--home-muted);
}

.page-home .home-tile .hq-tile__more {
  margin-top: auto;
  align-self: flex-start;
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hq-deep);
  border-bottom: 1px solid rgba(217, 154, 43, .7);
}

.page-home .home-help {
  background: var(--hq-ash);
}

.page-home .home-help__grid {
  display: grid;
  gap: 14px;
}

.page-home .home-help__card {
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid rgba(8, 42, 74, .1);
  border-top: 3px solid var(--hq-gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-home .home-help__card h3 {
  margin: 0 0 12px;
  font-family: var(--hq-font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--hq-deep);
}

.page-home .home-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--home-muted);
}

.page-home .home-help__list li {
  position: relative;
  padding-left: 15px;
}

.page-home .home-help__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--hq-gold);
}

.page-home .home-help__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(8, 42, 74, .12);
}

.page-home .home-help__foot .hq-note {
  margin: 0;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #4f6a80;
}

.page-home .home-versions {
  position: relative;
  background: var(--hq-deep);
  color: var(--hq-cream);
  overflow: hidden;
}

.page-home .home-versions__head {
  display: grid;
  gap: 18px;
}

.page-home .home-versions .hq-h2 {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.3;
  color: #fff;
}

.page-home .home-versions .hq-eyebrow {
  color: var(--hq-sand);
}

.page-home .home-versions .hq-lede {
  margin-top: 16px;
  max-width: 58ch;
  color: rgba(247, 241, 230, .8);
}

.page-home .home-versions__stamp {
  justify-self: start;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--hq-sand);
  border-color: rgba(240, 217, 166, .5);
  white-space: nowrap;
}

.page-home .home-versions__band {
  margin: 32px 0 0;
}

.page-home .home-versions__band img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  opacity: .8;
  border: 1px solid rgba(247, 241, 230, .14);
}

.page-home .home-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-top: 1px solid var(--home-line-soft);
}

.page-home .home-tl li {
  position: relative;
  flex: 0 0 min(80%, 280px);
  scroll-snap-align: start;
  padding: 26px 22px 14px 0;
}

.page-home .home-tl li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--hq-gold);
  box-shadow: 0 0 0 4px rgba(217, 154, 43, .2);
}

.page-home .home-tl li:first-child::before {
  background: var(--hq-coral);
  box-shadow: 0 0 0 4px rgba(242, 107, 78, .24);
}

.page-home .home-tl__date {
  margin: 0;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--hq-sand);
}

.page-home .home-tl__title {
  margin: 8px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.page-home .home-tl__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(247, 241, 230, .72);
}

.page-home .home-versions__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 26px;
}

.page-home .home-versions__link {
  font-size: 13.5px;
  color: var(--hq-sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 217, 166, .45);
  padding-bottom: 2px;
}

.page-home .home-versions__link:hover {
  color: #fff;
}

.page-home .home-renewal {
  background: var(--hq-cream);
}

.page-home .home-renewal__inner {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.page-home .home-renewal .hq-eyebrow {
  color: #8a6a1f;
}

.page-home .home-renewal .hq-h2 {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1.3;
  color: var(--hq-deep);
}

.page-home .home-renewal__text {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--home-body);
  max-width: 56ch;
}

.page-home .home-renewal__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--home-line);
}

.page-home .home-stat__num {
  display: block;
  font-family: var(--hq-font-display);
  font-size: clamp(21px, 3vw, 29px);
  line-height: 1.15;
  color: var(--hq-deep);
}

.page-home .home-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--home-muted);
}

.page-home .home-steps {
  padding: clamp(20px, 3vw, 32px);
  background: #fff;
  border: 1px solid var(--home-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-home .home-steps__title {
  margin: 0 0 18px;
  font-family: var(--hq-font-sans);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--hq-deep);
  letter-spacing: .02em;
}

.page-home .home-steps__list {
  list-style: none;
  counter-reset: hstep;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.page-home .home-steps__list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  font-size: 14.2px;
  line-height: 1.72;
  color: var(--home-body);
}

.page-home .home-steps__list li::before {
  counter-increment: hstep;
  content: counter(hstep, decimal-leading-zero);
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--hq-gold);
  padding-top: 4px;
}

.page-home .home-steps__note {
  margin: 20px 0 18px;
  padding-top: 16px;
  border-top: 1px solid var(--home-line);
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--hq-mist);
}

.page-home .home-closing {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(40px, 6vw, 64px);
  background: var(--hq-deep);
  color: var(--hq-cream);
}

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

.page-home .home-closing__mount img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  opacity: .34;
}

.page-home .home-closing__mount::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 42, 74, .25), var(--hq-deep) 94%);
}

.page-home .home-closing__inner {
  display: grid;
  gap: 30px;
  padding-top: clamp(26px, 4vw, 44px);
}

.page-home .home-closing .hq-eyebrow {
  color: var(--hq-sand);
}

.page-home .home-closing__title {
  margin: 8px 0 0;
  font-family: var(--hq-font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.3;
  color: #fff;
}

.page-home .home-closing__text {
  margin-top: 14px;
  max-width: 52ch;
  font-size: 14.8px;
  line-height: 1.85;
  color: rgba(247, 241, 230, .78);
}

.page-home .home-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
}

.page-home .home-links a {
  font-size: 13.5px;
  color: var(--hq-sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 217, 166, .4);
  padding-bottom: 2px;
}

.page-home .home-links a:hover,
.page-home .home-links a:focus-visible {
  color: #fff;
  border-color: var(--hq-gold);
}

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

.page-home .home-contact__item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 241, 230, .14);
}

.page-home .home-contact__key {
  font-family: var(--hq-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--hq-sand);
  padding-top: 4px;
}

.page-home .home-contact__value {
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  word-break: break-word;
}

.page-home .home-contact__sub {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(247, 241, 230, .6);
  word-break: break-word;
}

.page-home .home-closing__legal {
  margin: 18px 0 0;
  font-family: var(--hq-font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(247, 241, 230, .55);
}

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

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

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

@media (min-width: 900px) {
  .page-home .home-hero {
    padding-bottom: clamp(80px, 8vw, 110px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
  }

  .page-home .home-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }

  .page-home .home-hero__chapters {
    grid-column: 1 / -1;
    margin-top: 18px;
  }

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

  .page-home .home-versions__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .page-home .home-versions__stamp {
    justify-self: end;
  }

  .page-home .home-tl li {
    flex: 0 0 25%;
    padding-right: 26px;
  }

  .page-home .home-renewal__inner {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    align-items: start;
  }

  .page-home .home-closing__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .page-home .home-entries__body {
    grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
    align-items: start;
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .page-home .home-tile,
  .page-home .home-chapters a {
    transition: none;
  }

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