.page-products{
  background: var(--c-night);
  color: var(--c-ice);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0;
}

.page-products p{ margin: 0; line-height: 1.75; }
.page-products a{ color: var(--c-teal); text-decoration: none; }
.page-products a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.page-products ul,
.page-products ol{ list-style: none; margin: 0; padding: 0; }

.page-products .mono{ font-family: var(--font-mono); }

.page-products .pg-hero{
  position: relative;
  padding-block: clamp(22px, 4vw, 44px) clamp(34px, 5vw, 64px);
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  background:
    linear-gradient(158deg, rgba(43, 35, 80, 0.92) 0%, rgba(10, 26, 47, 0.2) 52%),
    linear-gradient(0deg, rgba(24, 195, 177, 0.06), rgba(24, 195, 177, 0));
  border-bottom: 1px solid var(--c-line);
}

.page-products .pg-hero::before,
.page-products .pg-hero::after{
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-teal);
  opacity: 0.7;
  pointer-events: none;
}
.page-products .pg-hero::before{
  top: 14px;
  left: max(10px, calc((100% - var(--shell)) / 2 - 24px));
  border-right: 0;
  border-bottom: 0;
}
.page-products .pg-hero::after{
  bottom: 14px;
  right: max(10px, calc((100% - var(--shell)) / 2 - 24px));
  border-left: 0;
  border-top: 0;
}

.page-products .breadcrumbs__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--step--1);
  color: var(--c-mist);
  letter-spacing: 0.04em;
}
.page-products .breadcrumbs__list li + li::before{
  content: "/";
  margin-right: 8px;
  color: var(--c-line-strong);
}
.page-products .breadcrumbs__list a{ color: var(--c-mist); }
.page-products .breadcrumbs__list a:hover{ color: var(--c-teal); }

.page-products .pg-hero__grid{
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 42px);
}

.page-products .pg-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-line);
  padding: 6px 12px;
}
.page-products .pg-kicker .mono{
  color: var(--c-teal);
  letter-spacing: 0.08em;
}

.page-products .pg-hero h1{
  margin-top: 18px;
  font-size: clamp(2rem, 7.4vw, 4.25rem);
  letter-spacing: -0.02em;
  color: var(--c-ice);
}

.page-products .pg-hero__p{
  margin-top: 18px;
  max-width: 46ch;
  font-size: var(--step-1);
  color: rgba(245, 248, 252, 0.84);
}

.page-products .pg-hero__acts{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pg-hero__media{
  margin: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 26, 47, 0.6);
}
.page-products .pg-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .frame-media__cap{
  display: block;
  padding: 10px 14px;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--c-mist);
  border-top: 1px solid var(--c-line-soft);
}

.page-products .pg-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
}
.page-products .pg-stats__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: rgba(10, 26, 47, 0.92);
}
.page-products .pg-stats__num{
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 700;
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-products .pg-stats__num em{
  font-style: normal;
  font-size: 0.55em;
  color: var(--c-teal);
  margin-left: 2px;
}
.page-products .pg-stats__label{
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--c-mist);
}

.page-products .pg-body{
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  padding-bottom: clamp(40px, 6vw, 88px);
}

.page-products .pg-rail{
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
  margin-bottom: 8px;
}
.page-products .pg-rail__title{
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--c-mist);
  margin-bottom: 12px;
}
.page-products .pg-rail .rail{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.page-products .pg-rail .rail__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  color: var(--c-mist);
  white-space: nowrap;
}
.page-products .pg-rail .rail__link:hover,
.page-products .pg-rail .rail__link:focus-visible{
  color: var(--c-ice);
  border-color: var(--c-teal);
  text-decoration: none;
}
.page-products .pg-rail .rail__no{
  font-family: var(--font-mono);
  color: var(--c-teal);
  font-size: var(--step--1);
}

.page-products .pg-sec{
  padding-block: clamp(32px, 5vw, 58px);
  border-bottom: 1px solid var(--c-line-soft);
}
.page-products .pg-sec--indigo{
  background: linear-gradient(180deg, rgba(43, 35, 80, 0.55), rgba(43, 35, 80, 0.15));
  border-inline: 1px solid var(--c-line-soft);
  padding-inline: clamp(14px, 3vw, 30px);
}
.page-products .pg-sec--wine{
  background: linear-gradient(150deg, rgba(110, 31, 59, 0.5), rgba(110, 31, 59, 0.1));
  padding-inline: clamp(14px, 3vw, 30px);
}

.page-products .pg-sec__head{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(20px, 3.4vw, 34px);
  max-width: 62ch;
}
.page-products .pg-sec__no{
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--c-teal);
}
.page-products .pg-sec h2{
  font-size: clamp(1.4rem, 4.6vw, 2.35rem);
  color: var(--c-ice);
}
.page-products .pg-sec__lead{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.78);
}

.page-products .pg-sec h3{
  font-size: var(--step-1);
  color: var(--c-ice);
  margin-bottom: 8px;
}

.page-products .pg-cap{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.page-products .cap-card{
  position: relative;
  padding: 20px 18px 22px;
  background: linear-gradient(152deg, rgba(43, 35, 80, 0.9), rgba(10, 26, 47, 0.94));
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.page-products .cap-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--c-teal);
}
.page-products .cap-card--wine{
  background: linear-gradient(152deg, rgba(110, 31, 59, 0.85), rgba(10, 26, 47, 0.94));
}
.page-products .cap-card--wine::before{ background: var(--c-gold); }
.page-products .cap-card--indigo{
  background: linear-gradient(152deg, rgba(43, 35, 80, 0.95), rgba(16, 28, 43, 0.96));
}
.page-products .cap-card--indigo::before{ background: var(--c-coral); }
.page-products .cap-card:hover{
  border-color: var(--c-teal);
  transform: translateY(-2px);
}
.page-products .cap-card__idx{
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.page-products .cap-card p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.8);
}

.page-products .pg-split{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-products .pg-split__text p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
}
.page-products .pg-split__text p + p{ margin-top: 14px; }

.page-products .pg-steps{
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.page-products .pg-steps li{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.86);
}
.page-products .pg-steps li .mono{
  color: var(--c-teal);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}
.page-products .pg-steps--coral li .mono{ color: var(--c-coral); }

.page-products .pg-note-list{
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-products .pg-note-list li{
  padding: 16px 16px 18px;
  border-left: 2px solid var(--c-teal);
  background: rgba(10, 26, 47, 0.5);
}
.page-products .pg-note-list .label{
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--c-gold);
  display: block;
  margin-bottom: 8px;
}
.page-products .pg-note-list p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
}

.page-products .pg-follow{
  display: grid;
  gap: clamp(20px, 3.4vw, 38px);
}
.page-products .pg-follow__visual img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--c-line);
}
.page-products .pg-pins{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.page-products .pg-pins__item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--c-mist);
  background: rgba(10, 26, 47, 0.7);
}
.page-products .pg-pins__item .mono{
  color: var(--c-mist);
  font-size: var(--step--1);
}
.page-products .pg-pins__item--pin{
  border-color: var(--c-teal);
  color: var(--c-ice);
  background: linear-gradient(160deg, rgba(24, 195, 177, 0.22), rgba(10, 26, 47, 0.8));
}
.page-products .pg-pins__item--pin .mono{ color: var(--c-teal); }

.page-products .pg-follow__text h3 + p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
  margin-bottom: 20px;
}

.page-products .pg-speed{
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}
.page-products .pg-speed__meter .label{
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--c-gold);
  margin-bottom: 12px;
}
.page-products .pg-load{
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-products .pg-load__bar{
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  background: rgba(10, 26, 47, 0.85);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.page-products .pg-load__fill{
  display: block;
  height: 100%;
  width: 92%;
  background: linear-gradient(90deg, var(--c-teal), var(--c-gold));
  animation: pg-fill 1.2s ease-out both;
}
.page-products .pg-load__num{
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 700;
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.page-products .pg-load__num em{
  font-style: normal;
  font-size: 0.5em;
  color: var(--c-teal);
  margin-left: 2px;
}
.page-products .pg-speed__cap{
  margin-top: 12px;
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.78);
}
.page-products .pg-speed__media{
  margin: 0;
  border: 1px solid var(--c-line);
}
.page-products .pg-speed__media img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .pg-speed__notes{
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}
.page-products .pg-speed__notes li{
  padding: 16px 16px 18px;
  border: 1px solid var(--c-line-soft);
  border-top: 2px solid var(--c-gold);
  background: rgba(10, 26, 47, 0.4);
}
.page-products .pg-speed__notes h3{
  font-size: var(--step-0);
  color: var(--c-ice);
  letter-spacing: 0.02em;
}
.page-products .pg-speed__notes p{
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.76);
}

.page-products .pg-form{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-products .pg-form__chart{
  margin: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 26, 47, 0.6);
}
.page-products .pg-form__chart img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.page-products .pg-form__panel{
  border: 1px solid var(--c-line);
  padding: 18px 16px 20px;
  background: rgba(10, 26, 47, 0.7);
}
.page-products .pg-form__panel .label{
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--c-mist);
  margin-bottom: 12px;
}
.page-products .pg-chart{
  display: block;
  width: 100%;
  height: auto;
}
.page-products .pg-chart__grid line{
  stroke: var(--c-line-soft);
  stroke-width: 1;
}
.page-products .pg-chart__goal rect{ fill: var(--c-teal); opacity: 0.85; }
.page-products .pg-chart__loss rect{ fill: var(--c-gold); opacity: 0.8; }
.page-products .pg-chart__trend{
  fill: none;
  stroke: var(--c-ice);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.page-products .pg-form__note{
  margin-top: 14px;
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.76);
}
.page-products .pg-form__ticks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.page-products .pg-form__ticks li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  color: var(--c-mist);
}
.page-products .pg-form__ticks .mono{
  color: var(--c-gold);
  letter-spacing: 0.1em;
}

.page-products .pg-index{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-products .pg-index__media{
  margin: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 26, 47, 0.55);
  max-height: 460px;
  overflow: hidden;
}
.page-products .pg-index__media img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: top center;
}
.page-products .pg-index__text p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
}
.page-products .pg-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.page-products .pg-tags li{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--c-ice);
  background: rgba(10, 26, 47, 0.6);
}
.page-products .pg-tags .mono{
  color: var(--c-teal);
  font-size: var(--step--1);
}
.page-products .pg-index__hint{
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.76);
  border-left: 2px solid var(--c-gold);
  padding-left: 14px;
}

.page-products .pg-devices{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.page-products .pg-device{
  padding: 18px 16px 20px;
  border: 1px solid var(--c-line);
  background: linear-gradient(160deg, rgba(43, 35, 80, 0.7), rgba(10, 26, 47, 0.85));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.page-products .pg-device__glyph{
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--c-night);
  background: var(--c-teal);
  padding: 3px 9px;
  margin-bottom: 12px;
}
.page-products .pg-device h3{
  font-size: var(--step-1);
  color: var(--c-ice);
}
.page-products .pg-device p{
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.78);
}

.page-products .pg-channel{
  margin-top: clamp(18px, 3vw, 30px);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--c-line);
  background:
    linear-gradient(200deg, rgba(110, 31, 59, 0.24), rgba(10, 26, 47, 0.9));
}
.page-products .pg-channel__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 14px;
}
.page-products .pg-channel .status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--c-ice);
}
.page-products .pg-channel .status-pill__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 0 4px rgba(115, 226, 194, 0.16);
  animation: pg-pulse 2.6s ease-in-out infinite;
}
.page-products .pg-channel .status-pill[data-channel-status="alert"] .status-pill__dot{
  background: var(--c-coral);
  box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.18);
}
.page-products .pg-channel__meta{
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--c-gold);
}
.page-products .pg-channel__lead{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.84);
  max-width: 64ch;
}
.page-products .pg-channel__foot{
  margin-top: 16px;
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.74);
}

@keyframes pg-fill{
  from{ width: 0; }
  to{ width: 92%; }
}
@keyframes pg-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.45; }
}

@media (min-width: 640px){
  .page-products .pg-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-products .pg-cap{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-products .pg-devices{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .pg-speed__notes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .pg-pins{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 900px){
  .page-products .pg-hero__grid{
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }
  .page-products .pg-split{ grid-template-columns: 1.25fr 0.75fr; }
  .page-products .pg-follow{ grid-template-columns: 1fr 1fr; align-items: start; }
  .page-products .pg-speed{ grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  .page-products .pg-form{ grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .page-products .pg-index{ grid-template-columns: 0.62fr 1fr; align-items: start; }
  .page-products .pg-index__media{ max-height: 520px; }
  .page-products .pg-cap{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  .page-products .pg-body{
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  .page-products .pg-rail{
    position: sticky;
    top: calc(var(--header-height) + 22px);
    margin-bottom: 0;
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
  }
  .page-products .pg-rail .rail{
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-products .pg-rail .rail__link{
    width: 100%;
    border: 0;
    border-left: 2px solid var(--c-line);
    padding: 9px 0 9px 12px;
    background: none;
    white-space: normal;
  }
  .page-products .pg-rail .rail__link:hover,
  .page-products .pg-rail .rail__link:focus-visible{
    border-left-color: var(--c-teal);
    background: rgba(24, 195, 177, 0.08);
  }
  .page-products .pg-sections > .pg-sec:first-child{ border-top: 1px solid var(--c-line); }
}

@media (prefers-reduced-motion: reduce){
  .page-products .pg-load__fill{ animation: none; }
  .page-products .pg-channel .status-pill__dot{ animation: none; }
  .page-products .cap-card{ transition: none; }
  .page-products .cap-card:hover{ transform: none; }
}
<<<END>>>

<main id="main-content" class="page-products">
  <section class="pg-hero" aria-labelledby="pg-hero-title">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol class="breadcrumbs__list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">平台服务</li>
      </ol>
    </nav>

    <div class="pg-hero__grid">
      <div class="pg-hero__lead">
        <p class="pg-kicker"><span class="mono">P—01</span> 产品赛道 / 多联赛一轨直达</p>
        <h1 id="pg-hero-title">主队先到手，几条联赛一屏看清</h1>
        <p class="pg-hero__p">
          华体育赛场把球队关注、联赛入口、战报和数据收进同一条浏览路径。你打开页面，先看到自己的主队在顶端，
          再决定今天要看哪一场，不必在几个列表之间来回切换。
        </p>
        <div class="pg-hero__acts">
          <a class="btn" href="#capability">看能力清单</a>
          <a class="btn btn--ghost" href="/answers/">通道出问题怎么办</a>
        </div>
      </div>

      <figure class="frame-media frame-media--slant pg-hero__media">
        <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000"
             alt="左侧纵向索引轨道与右侧球队置顶条、比分条组成的产品界面抽象示意，不含真实品牌标识">
        <figcaption class="frame-media__cap">焕新版产品线主页 · 一屏定位主队与联赛</figcaption>
      </figure>
    </div>

    <ul class="pg-stats">
      <li class="pg-stats__item">
        <span class="pg-stats__num mono">6</span>
        <span class="pg-stats__label">类常用看赛场景</span>
      </li>
      <li class="pg-stats__item">
        <span class="pg-stats__num mono">8</span>
        <span class="pg-stats__label">支球队同时关注</span>
      </li>
      <li class="pg-stats__item">
        <span class="pg-stats__num mono">2.0<em>s</em></span>
        <span class="pg-stats__label">常见移动网络首屏战报</span>
      </li>
      <li class="pg-stats__item">
        <span class="pg-stats__num mono">7/42</span>
        <span class="pg-stats__label">一级分类 / 内容标签</span>
      </li>
    </ul>
  </section>

  <div class="pg-body">
    <aside class="pg-rail" aria-label="平台能力索引">
      <p class="label pg-rail__title">能力索引</p>
      <nav class="rail">
        <a class="rail__link" href="#capability" data-track-link><span class="rail__no">01</span>常用场景</a>
        <a class="rail__link" href="#homepage" data-track-link><span class="rail__no">02</span>主页结构</a>
        <a class="rail__link" href="#follow" data-track-link><span class="rail__no">03</span>球队关注</a>
        <a class="rail__link" href="#speed" data-track-link><span class="rail__no">04</span>加载体验</a>
        <a class="rail__link" href="#form" data-track-link><span class="rail__no">05</span>五场区间</a>
        <a class="rail__link" href="#index" data-track-link><span class="rail__no">06</span>索引定位</a>
        <a class="rail__link" href="#devices" data-track-link><span class="rail__no">07</span>跨端与通道</a>
      </nav>
    </aside>

    <div class="pg-sections">

      <section class="pg-sec" id="capability" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">01</span>
          <h2>你在看台上最常做的六件事</h2>
          <p class="pg-sec__lead">
            从盯主队到赛后复盘，每一步都有对应的入口。找到你习惯的那一个，剩下的交给页面自己排好顺序。
          </p>
        </header>

        <ul class="pg-cap">
          <li class="cap-card">
            <span class="cap-card__idx mono">A1</span>
            <h3>球队关注</h3>
            <p>把主队固定在最前面，最多同时放 8 支。换手机、换大屏，关注列表都跟着走。</p>
          </li>
          <li class="cap-card">
            <span class="cap-card__idx mono">A2</span>
            <h3>联赛筛选</h3>
            <p>足球、篮球、排球、田径、冰雪、校园联赛，用标签切一切，列表只剩你要看的那一类。</p>
          </li>
          <li class="cap-card cap-card--wine">
            <span class="cap-card__idx mono">A3</span>
            <h3>比分提醒</h3>
            <p>比分变化第一时间出现在页面上，反超、追平这种关键节点不会因为刷新慢而错过。</p>
          </li>
          <li class="cap-card">
            <span class="cap-card__idx mono">A4</span>
            <h3>战报回看</h3>
            <p>比赛结束后直接翻关键节点和图文复盘，主队的战报排在最靠前的位置。</p>
          </li>
          <li class="cap-card">
            <span class="cap-card__idx mono">A5</span>
            <h3>数据区间</h3>
            <p>最近五场的进失球分布滚动更新，攻防是往上走还是往下掉，一眼看出趋势。</p>
          </li>
          <li class="cap-card cap-card--indigo">
            <span class="cap-card__idx mono">A6</span>
            <h3>通道帮助</h3>
            <p>页面打不开时有明确的重进路径，看状态灯、走右侧导航、带截图反馈，三步走完。</p>
          </li>
        </ul>
      </section>

      <section class="pg-sec pg-sec--indigo" id="homepage" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">02</span>
          <h2>打开首页，先看主队，再看全场</h2>
        </header>

        <div class="pg-split">
          <div class="pg-split__text">
            <p>
              2024 年推出的焕新版产品线主页，把原先分散的入口重新排成上中下三层：顶端是你的关注球队和正在进行的比分，
              中间是各联赛的赛程与入口，往下是战报和数据模块。
            </p>
            <p>
              从左到右读一屏就够：左轨告诉你现在站在哪一节，右侧窗口给出这一节的具体内容。
              你不用先想“我要去哪个页面”，页面已经按照你看赛的顺序排好了。
            </p>
            <ol class="pg-steps">
              <li><span class="mono">01</span>顶端关注条：主队比分与开赛时间</li>
              <li><span class="mono">02</span>中部联赛带：六类赛事的入口与筛选</li>
              <li><span class="mono">03</span>下部内容区：战报、数据与专题</li>
            </ol>
          </div>
          <ul class="pg-note-list">
            <li>
              <span class="label">适合</span>
              <p>每天固定看两三支球队，又不想漏掉其他联赛大比分的球迷。</p>
            </li>
            <li>
              <span class="label">适合</span>
              <p>校园联赛与青少年赛事组织者，需要在同一段时间里跟进多块场地。</p>
            </li>
            <li>
              <span class="label">继续看</span>
              <p>版本怎么一步步走到今天，可以翻<a href="/overview/">品牌总览</a>里的历程部分。</p>
            </li>
          </ul>
        </div>
      </section>

      <section class="pg-sec" id="follow" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">03</span>
          <h2>八支球队，一条置顶带</h2>
          <p class="pg-sec__lead">
            关注的球队越多，越需要一条不会被打乱的顺序。置顶带把最关心的几支留在最上面，其余按你排的次序往下走。
          </p>
        </header>

        <div class="pg-follow">
          <div class="pg-follow__visual">
            <img src="{zhanqunpic:h:700w:900}" width="900" height="700" loading="lazy" decoding="async"
                 alt="多支球队关注卡片在置顶带中斜切排列、青绿高亮的交互示意，不含真实队徽">
            <ul class="pg-pins" aria-label="球队关注位置示意">
              <li class="pg-pins__item pg-pins__item--pin"><span class="mono">01</span>置顶</li>
              <li class="pg-pins__item pg-pins__item--pin"><span class="mono">02</span>置顶</li>
              <li class="pg-pins__item pg-pins__item--pin"><span class="mono">03</span>置顶</li>
              <li class="pg-pins__item"><span class="mono">04</span>关注</li>
              <li class="pg-pins__item"><span class="mono">05</span>关注</li>
              <li class="pg-pins__item"><span class="mono">06</span>关注</li>
              <li class="pg-pins__item"><span class="mono">07</span>关注</li>
              <li class="pg-pins__item"><span class="mono">08</span>关注</li>
            </ul>
          </div>

          <div class="pg-follow__text">
            <h3>怎么排，由你定</h3>
            <p>
              在关注区把常看的队伍往上挪，新的次序会立刻成为首页的默认顺序。同城的对手、青训梯队的比赛、
              或者一场临时想追的杯赛，都可以先放进来，看完再撤下来。
            </p>
            <h3>两端同步，不用重新设置</h3>
            <p>
              手机和桌面大屏共用一套账号关注体系。你在通勤路上用手机加的球队，回家打开大屏就在同一位置，
              不用再找一遍。目前平台累计创建的关注关系已有 21 万条。
            </p>
          </div>
        </div>
      </section>

      <section class="pg-sec pg-sec--wine" id="speed" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">04</span>
          <h2>点开就能读，不用盯着转圈</h2>
          <p class="pg-sec__lead">
            过去不少球迷反映过华体育大屏看战报加载慢，刷新两三次才等到内容。焕新版把首屏战报的加载路径压缩到了 2 秒左右。
          </p>
        </header>

        <div class="pg-speed">
          <div class="pg-speed__meter">
            <p class="label">常见移动网络 · 首屏战报</p>
            <div class="pg-load">
              <div class="pg-load__bar"><span class="pg-load__fill"></span></div>
              <span class="pg-load__num mono">2.0<em>s</em></span>
            </div>
            <p class="pg-speed__cap">进页面先出比分和关键节点，图文细节随后补齐，等待感被压到最低。</p>
          </div>

          <figure class="pg-speed__media">
            <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" loading="lazy" decoding="async"
                 alt="手机界面与加载进度条并排，等宽数字突出首屏战报快速呈现">
            <figcaption class="frame-media__cap">手机端战报首屏 · 数字使用等宽显示</figcaption>
          </figure>
        </div>

        <ul class="pg-speed__notes">
          <li>
            <h3>大屏为什么需要单独优化</h3>
            <p>大屏分辨率高、一次渲染的内容多，早年版本在这类设备上容易卡顿。2021 年的比分条改造先把这块理顺，2024 年再把整页加载压下来。</p>
          </li>
          <li>
            <h3>弱网下的表现</h3>
            <p>信号不稳定时，页面会优先给出比分与赛程结构，图片和长文在连上网络后继续加载，不影响你看比分。</p>
          </li>
          <li>
            <h3>每天什么时候更新</h3>
            <p>赛况内容在每日 6:30 至 23:30 之间滚动更新，重点比赛日还会追加夜间复盘条目。</p>
          </li>
        </ul>
      </section>

      <section class="pg-sec" id="form" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">05</span>
          <h2>最近五场，攻防往哪走</h2>
          <p class="pg-sec__lead">
            只看一场比分说明不了问题，把最近五场的进球和失球放在一起，趋势就出来了。每周一更新一轮回顾。
          </p>
        </header>

        <div class="pg-form">
          <figure class="pg-form__chart">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async"
                 alt="进球与失球色块、折线和横向比分条组合的数据分布图，不含真实队徽">
            <figcaption class="frame-media__cap">五场区间进失球分布 · 青绿为进球，金黄为失球</figcaption>
          </figure>

          <div class="pg-form__panel">
            <p class="label">区间示意 / 最近五场</p>
            <svg class="pg-chart" viewBox="0 0 360 200" role="img" aria-label="最近五场进球与失球分布示意">
              <g class="pg-chart__grid">
                <line x1="10" y1="170" x2="350" y2="170"></line>
                <line x1="10" y1="120" x2="350" y2="120"></line>
                <line x1="10" y1="70" x2="350" y2="70"></line>
                <line x1="10" y1="20" x2="350" y2="20"></line>
              </g>
              <g class="pg-chart__goal">
                <rect x="22" y="110" width="16" height="60"></rect>
                <rect x="82" y="80" width="16" height="90"></rect>
                <rect x="142" y="125" width="16" height="45"></rect>
                <rect x="202" y="60" width="16" height="110"></rect>
                <rect x="262" y="95" width="16" height="75"></rect>
              </g>
              <g class="pg-chart__loss">
                <rect x="42" y="130" width="16" height="40"></rect>
                <rect x="102" y="115" width="16" height="55"></rect>
                <rect x="162" y="100" width="16" height="70"></rect>
                <rect x="222" y="135" width="16" height="35"></rect>
                <rect x="282" y="120" width="16" height="50"></rect>
              </g>
              <polyline class="pg-chart__trend" points="30,110 90,80 150,125 210,60 270,95"></polyline>
            </svg>
            <p class="pg-form__note">
              斜线标出进球走势，柱体并排看攻守差。悬停比分条即可展开该场的关键节点。
            </p>
            <ul class="pg-form__ticks">
              <li><span class="mono">G</span>进球</li>
              <li><span class="mono">L</span>失球</li>
              <li><span class="mono">5</span>场滚动区间</li>
            </ul>
          </div>
        </div>
      </section>

      <section class="pg-sec pg-sec--indigo" id="index" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">06</span>
          <h2>找不到入口，就看左边那条轨道</h2>
          <p class="pg-sec__lead">
            站内索引找不到入口的情况，多半是绕了太多层。左侧轨道把七类一级分类直接摊开，点一下就落到对应列表。
          </p>
        </header>

        <div class="pg-index">
          <figure class="pg-index__media">
            <img src="{zhanqunpic:h:1200w:800}" width="800" height="1200" loading="lazy" decoding="async"
                 alt="纵向标签轨道配坐标编号与索引入口连线的示意，展示分类层级">
          </figure>

          <div class="pg-index__text">
            <p>
              七类一级分类覆盖联赛、球队、赛程、战报、数据、专题和通道帮助，往下再分出 42 个内容标签。
              轨道上的编号就是你当前位置的坐标，滚动时自动高亮，不用记路径。
            </p>
            <ul class="pg-tags">
              <li><span class="mono">01</span>联赛</li>
              <li><span class="mono">02</span>球队</li>
              <li><span class="mono">03</span>赛程</li>
              <li><span class="mono">04</span>战报</li>
              <li><span class="mono">05</span>数据</li>
              <li><span class="mono">06</span>专题</li>
              <li><span class="mono">07</span>通道帮助</li>
            </ul>
            <p class="pg-index__hint">
              想验证某支球队的历史资料，从“球队”分类进去最快；想看某轮联赛的全部场次，直接走“赛程”。
              分类说明和折叠步骤整理在<a href="/answers/">答疑中心</a>，遇到卡住的地方可以对着走一遍。
            </p>
          </div>
        </div>
      </section>

      <section class="pg-sec" id="devices" data-track-item>
        <header class="pg-sec__head">
          <span class="pg-sec__no mono">07</span>
          <h2>手机、平板、大屏，接着往下看</h2>
          <p class="pg-sec__lead">
            同一份内容在三种屏幕上重新排布：手机看比分，平板看战报，大屏看数据对比。切换设备不用重新找位置。
          </p>
        </header>

        <div class="pg-devices">
          <article class="pg-device">
            <span class="pg-device__glyph mono">M</span>
            <h3>手机</h3>
            <p>竖屏优先展示关注条与比分，上下滑动切换联赛，适合通勤和现场边看边刷。</p>
          </article>
          <article class="pg-device">
            <span class="pg-device__glyph mono">T</span>
            <h3>平板</h3>
            <p>横向空间展开为索引加内容两栏，战报正文和图文节点的阅读更舒展。</p>
          </article>
          <article class="pg-device">
            <span class="pg-device__glyph mono">D</span>
            <h3>桌面大屏</h3>
            <p>比分条与五场区间并排铺开，多场比赛同时开着也不挤，适合家里或场馆大屏。</p>
          </article>
        </div>

        <div class="pg-channel">
          <div class="pg-channel__head">
            <span class="status-pill" data-channel-status="normal">
              <span class="status-pill__dot"></span>
              <span class="status-pill__text">通道运行正常</span>
            </span>
            <p class="pg-channel__meta mono">近 30 天可用率 99.6%</p>
          </div>
          <p class="pg-channel__lead">
            偶尔遇到页面打不开，先看右上角的状态灯：薄荷绿表示通道在跑，珊瑚红表示正在处理。
            接着从主页右侧导航重新进入对应联赛，多数情况一步就能回到原来的位置。
          </p>
          <ol class="pg-steps pg-steps--coral">
            <li><span class="mono">01</span>确认状态灯颜色，判断是个别页面还是整条通道</li>
            <li><span class="mono">02</span>回到主页，从右侧导航重新进入对应联赛通道</li>
            <li><span class="mono">03</span>仍然打不开，记下设备型号、截图和发生时间，发给客服</li>
          </ol>
          <p class="pg-channel__foot">
            客服工作时段为每日 9:00 至 21:00，带上截图与设备型号后通常 2 小时内回复。
            提交入口在<a href="/connect/">联系通道</a>，赛事现场的图文记录则收在<a href="/journal/">品牌日志</a>。
          </p>
        </div>
      </section>

    </div>
  </div>
</main>

.page-products{
  background: var(--c-night);
  color: var(--c-ice);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
  margin: 0;
}

.page-products p{ margin: 0; line-height: 1.75; }
.page-products a{ color: var(--c-teal); text-decoration: none; }
.page-products a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.page-products ul,
.page-products ol{ list-style: none; margin: 0; padding: 0; }

.page-products .mono{ font-family: var(--font-mono); }

.page-products .pg-hero{
  position: relative;
  padding-block: clamp(22px, 4vw, 44px) clamp(34px, 5vw, 64px);
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  background:
    linear-gradient(158deg, rgba(43, 35, 80, 0.92) 0%, rgba(10, 26, 47, 0.2) 52%),
    linear-gradient(0deg, rgba(24, 195, 177, 0.06), rgba(24, 195, 177, 0));
  border-bottom: 1px solid var(--c-line);
}

.page-products .pg-hero::before,
.page-products .pg-hero::after{
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-teal);
  opacity: 0.7;
  pointer-events: none;
}
.page-products .pg-hero::before{
  top: 14px;
  left: max(10px, calc((100% - var(--shell)) / 2 - 24px));
  border-right: 0;
  border-bottom: 0;
}
.page-products .pg-hero::after{
  bottom: 14px;
  right: max(10px, calc((100% - var(--shell)) / 2 - 24px));
  border-left: 0;
  border-top: 0;
}

.page-products .breadcrumbs__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--step--1);
  color: var(--c-mist);
  letter-spacing: 0.04em;
}
.page-products .breadcrumbs__list li + li::before{
  content: "/";
  margin-right: 8px;
  color: var(--c-line-strong);
}
.page-products .breadcrumbs__list a{ color: var(--c-mist); }
.page-products .breadcrumbs__list a:hover{ color: var(--c-teal); }

.page-products .pg-hero__grid{
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(24px, 4vw, 42px);
}

.page-products .pg-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  border: 1px solid var(--c-line);
  padding: 6px 12px;
}
.page-products .pg-kicker .mono{
  color: var(--c-teal);
  letter-spacing: 0.08em;
}

.page-products .pg-hero h1{
  margin-top: 18px;
  font-size: clamp(2rem, 7.4vw, 4.25rem);
  letter-spacing: -0.02em;
  color: var(--c-ice);
}

.page-products .pg-hero__p{
  margin-top: 18px;
  max-width: 46ch;
  font-size: var(--step-1);
  color: rgba(245, 248, 252, 0.84);
}

.page-products .pg-hero__acts{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .pg-hero__media{
  margin: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 26, 47, 0.6);
}
.page-products .pg-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .frame-media__cap{
  display: block;
  padding: 10px 14px;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--c-mist);
  border-top: 1px solid var(--c-line-soft);
}

.page-products .pg-stats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 44px);
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
}
.page-products .pg-stats__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: rgba(10, 26, 47, 0.92);
}
.page-products .pg-stats__num{
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 700;
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-products .pg-stats__num em{
  font-style: normal;
  font-size: 0.55em;
  color: var(--c-teal);
  margin-left: 2px;
}
.page-products .pg-stats__label{
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--c-mist);
}

.page-products .pg-body{
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  padding-bottom: clamp(40px, 6vw, 88px);
}

.page-products .pg-rail{
  border-top: 1px solid var(--c-line);
  padding-top: 18px;
  margin-bottom: 8px;
}
.page-products .pg-rail__title{
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  color: var(--c-mist);
  margin-bottom: 12px;
}
.page-products .pg-rail .rail{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.page-products .pg-rail .rail__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  color: var(--c-mist);
  white-space: nowrap;
}
.page-products .pg-rail .rail__link:hover,
.page-products .pg-rail .rail__link:focus-visible{
  color: var(--c-ice);
  border-color: var(--c-teal);
  text-decoration: none;
}
.page-products .pg-rail .rail__no{
  font-family: var(--font-mono);
  color: var(--c-teal);
  font-size: var(--step--1);
}

.page-products .pg-sec{
  padding-block: clamp(32px, 5vw, 58px);
  border-bottom: 1px solid var(--c-line-soft);
}
.page-products .pg-sec--indigo{
  background: linear-gradient(180deg, rgba(43, 35, 80, 0.55), rgba(43, 35, 80, 0.15));
  border-inline: 1px solid var(--c-line-soft);
  padding-inline: clamp(14px, 3vw, 30px);
}
.page-products .pg-sec--wine{
  background: linear-gradient(150deg, rgba(110, 31, 59, 0.5), rgba(110, 31, 59, 0.1));
  padding-inline: clamp(14px, 3vw, 30px);
}

.page-products .pg-sec__head{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(20px, 3.4vw, 34px);
  max-width: 62ch;
}
.page-products .pg-sec__no{
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--c-teal);
}
.page-products .pg-sec h2{
  font-size: clamp(1.4rem, 4.6vw, 2.35rem);
  color: var(--c-ice);
}
.page-products .pg-sec__lead{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.78);
}

.page-products .pg-sec h3{
  font-size: var(--step-1);
  color: var(--c-ice);
  margin-bottom: 8px;
}

.page-products .pg-cap{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.page-products .cap-card{
  position: relative;
  padding: 20px 18px 22px;
  background: linear-gradient(152deg, rgba(43, 35, 80, 0.9), rgba(10, 26, 47, 0.94));
  border: 1px solid var(--c-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.page-products .cap-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--c-teal);
}
.page-products .cap-card--wine{
  background: linear-gradient(152deg, rgba(110, 31, 59, 0.85), rgba(10, 26, 47, 0.94));
}
.page-products .cap-card--wine::before{ background: var(--c-gold); }
.page-products .cap-card--indigo{
  background: linear-gradient(152deg, rgba(43, 35, 80, 0.95), rgba(16, 28, 43, 0.96));
}
.page-products .cap-card--indigo::before{ background: var(--c-coral); }
.page-products .cap-card:hover{
  border-color: var(--c-teal);
  transform: translateY(-2px);
}
.page-products .cap-card__idx{
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.page-products .cap-card p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.8);
}

.page-products .pg-split{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-products .pg-split__text p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
}
.page-products .pg-split__text p + p{ margin-top: 14px; }

.page-products .pg-steps{
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.page-products .pg-steps li{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.86);
}
.page-products .pg-steps li .mono{
  color: var(--c-teal);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}
.page-products .pg-steps--coral li .mono{ color: var(--c-coral); }

.page-products .pg-note-list{
  display: grid;
  gap: 14px;
  align-content: start;
}
.page-products .pg-note-list li{
  padding: 16px 16px 18px;
  border-left: 2px solid var(--c-teal);
  background: rgba(10, 26, 47, 0.5);
}
.page-products .pg-note-list .label{
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--c-gold);
  display: block;
  margin-bottom: 8px;
}
.page-products .pg-note-list p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
}

.page-products .pg-follow{
  display: grid;
  gap: clamp(20px, 3.4vw, 38px);
}
.page-products .pg-follow__visual img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 1px solid var(--c-line);
}
.page-products .pg-pins{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.page-products .pg-pins__item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--c-mist);
  background: rgba(10, 26, 47, 0.7);
}
.page-products .pg-pins__item .mono{
  color: var(--c-mist);
  font-size: var(--step--1);
}
.page-products .pg-pins__item--pin{
  border-color: var(--c-teal);
  color: var(--c-ice);
  background: linear-gradient(160deg, rgba(24, 195, 177, 0.22), rgba(10, 26, 47, 0.8));
}
.page-products .pg-pins__item--pin .mono{ color: var(--c-teal); }

.page-products .pg-follow__text h3 + p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
  margin-bottom: 20px;
}

.page-products .pg-speed{
  display: grid;
  gap: clamp(18px, 3vw, 30px);
}
.page-products .pg-speed__meter .label{
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--c-gold);
  margin-bottom: 12px;
}
.page-products .pg-load{
  display: flex;
  align-items: center;
  gap: 14px;
}
.page-products .pg-load__bar{
  position: relative;
  flex: 1 1 auto;
  height: 12px;
  background: rgba(10, 26, 47, 0.85);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.page-products .pg-load__fill{
  display: block;
  height: 100%;
  width: 92%;
  background: linear-gradient(90deg, var(--c-teal), var(--c-gold));
  animation: pg-fill 1.2s ease-out both;
}
.page-products .pg-load__num{
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 700;
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.page-products .pg-load__num em{
  font-style: normal;
  font-size: 0.5em;
  color: var(--c-teal);
  margin-left: 2px;
}
.page-products .pg-speed__cap{
  margin-top: 12px;
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.78);
}
.page-products .pg-speed__media{
  margin: 0;
  border: 1px solid var(--c-line);
}
.page-products .pg-speed__media img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .pg-speed__notes{
  display: grid;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}
.page-products .pg-speed__notes li{
  padding: 16px 16px 18px;
  border: 1px solid var(--c-line-soft);
  border-top: 2px solid var(--c-gold);
  background: rgba(10, 26, 47, 0.4);
}
.page-products .pg-speed__notes h3{
  font-size: var(--step-0);
  color: var(--c-ice);
  letter-spacing: 0.02em;
}
.page-products .pg-speed__notes p{
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.76);
}

.page-products .pg-form{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-products .pg-form__chart{
  margin: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 26, 47, 0.6);
}
.page-products .pg-form__chart img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}
.page-products .pg-form__panel{
  border: 1px solid var(--c-line);
  padding: 18px 16px 20px;
  background: rgba(10, 26, 47, 0.7);
}
.page-products .pg-form__panel .label{
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  color: var(--c-mist);
  margin-bottom: 12px;
}
.page-products .pg-chart{
  display: block;
  width: 100%;
  height: auto;
}
.page-products .pg-chart__grid line{
  stroke: var(--c-line-soft);
  stroke-width: 1;
}
.page-products .pg-chart__goal rect{ fill: var(--c-teal); opacity: 0.85; }
.page-products .pg-chart__loss rect{ fill: var(--c-gold); opacity: 0.8; }
.page-products .pg-chart__trend{
  fill: none;
  stroke: var(--c-ice);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.page-products .pg-form__note{
  margin-top: 14px;
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.76);
}
.page-products .pg-form__ticks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.page-products .pg-form__ticks li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  color: var(--c-mist);
}
.page-products .pg-form__ticks .mono{
  color: var(--c-gold);
  letter-spacing: 0.1em;
}

.page-products .pg-index{
  display: grid;
  gap: clamp(18px, 3vw, 32px);
}
.page-products .pg-index__media{
  margin: 0;
  border: 1px solid var(--c-line);
  background: rgba(10, 26, 47, 0.55);
  max-height: 460px;
  overflow: hidden;
}
.page-products .pg-index__media img{
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: top center;
}
.page-products .pg-index__text p{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.82);
}
.page-products .pg-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.page-products .pg-tags li{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--c-ice);
  background: rgba(10, 26, 47, 0.6);
}
.page-products .pg-tags .mono{
  color: var(--c-teal);
  font-size: var(--step--1);
}
.page-products .pg-index__hint{
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.76);
  border-left: 2px solid var(--c-gold);
  padding-left: 14px;
}

.page-products .pg-devices{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.page-products .pg-device{
  padding: 18px 16px 20px;
  border: 1px solid var(--c-line);
  background: linear-gradient(160deg, rgba(43, 35, 80, 0.7), rgba(10, 26, 47, 0.85));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.page-products .pg-device__glyph{
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--c-night);
  background: var(--c-teal);
  padding: 3px 9px;
  margin-bottom: 12px;
}
.page-products .pg-device h3{
  font-size: var(--step-1);
  color: var(--c-ice);
}
.page-products .pg-device p{
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.78);
}

.page-products .pg-channel{
  margin-top: clamp(18px, 3vw, 30px);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--c-line);
  background:
    linear-gradient(200deg, rgba(110, 31, 59, 0.24), rgba(10, 26, 47, 0.9));
}
.page-products .pg-channel__head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 14px;
}
.page-products .pg-channel .status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--c-ice);
}
.page-products .pg-channel .status-pill__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 0 4px rgba(115, 226, 194, 0.16);
  animation: pg-pulse 2.6s ease-in-out infinite;
}
.page-products .pg-channel .status-pill[data-channel-status="alert"] .status-pill__dot{
  background: var(--c-coral);
  box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.18);
}
.page-products .pg-channel__meta{
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--c-gold);
}
.page-products .pg-channel__lead{
  font-size: var(--step-0);
  color: rgba(245, 248, 252, 0.84);
  max-width: 64ch;
}
.page-products .pg-channel__foot{
  margin-top: 16px;
  font-size: var(--step--1);
  color: rgba(245, 248, 252, 0.74);
}

@keyframes pg-fill{
  from{ width: 0; }
  to{ width: 92%; }
}
@keyframes pg-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.45; }
}

@media (min-width: 640px){
  .page-products .pg-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-products .pg-cap{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-products .pg-devices{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .pg-speed__notes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-products .pg-pins{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 900px){
  .page-products .pg-hero__grid{
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }
  .page-products .pg-split{ grid-template-columns: 1.25fr 0.75fr; }
  .page-products .pg-follow{ grid-template-columns: 1fr 1fr; align-items: start; }
  .page-products .pg-speed{ grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  .page-products .pg-form{ grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .page-products .pg-index{ grid-template-columns: 0.62fr 1fr; align-items: start; }
  .page-products .pg-index__media{ max-height: 520px; }
  .page-products .pg-cap{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px){
  .page-products .pg-body{
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  .page-products .pg-rail{
    position: sticky;
    top: calc(var(--header-height) + 22px);
    margin-bottom: 0;
    padding-top: 22px;
    border-top: 1px solid var(--c-line);
  }
  .page-products .pg-rail .rail{
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }
  .page-products .pg-rail .rail__link{
    width: 100%;
    border: 0;
    border-left: 2px solid var(--c-line);
    padding: 9px 0 9px 12px;
    background: none;
    white-space: normal;
  }
  .page-products .pg-rail .rail__link:hover,
  .page-products .pg-rail .rail__link:focus-visible{
    border-left-color: var(--c-teal);
    background: rgba(24, 195, 177, 0.08);
  }
  .page-products .pg-sections > .pg-sec:first-child{ border-top: 1px solid var(--c-line); }
}

@media (prefers-reduced-motion: reduce){
  .page-products .pg-load__fill{ animation: none; }
  .page-products .pg-channel .status-pill__dot{ animation: none; }
  .page-products .cap-card{ transition: none; }
  .page-products .cap-card:hover{ transform: none; }
}