.page-products {
  --fn-line: rgba(233, 231, 226, .14);
  --fn-line-soft: rgba(233, 231, 226, .07);
}

.page-products ul[class^="fn-"],
.page-products ol[class^="fn-"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- 首屏 ---------- */

.page-products .fn-hero {
  padding-top: clamp(1.25rem, 3.5vw, 2.25rem);
}

.page-products .fn-hero-body {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: end;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

@media (min-width: 900px) {
  .page-products .fn-hero-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.page-products .fn-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.95rem, 5vw, 3.15rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.01em;
  margin: .55rem 0 1.1rem;
  max-width: 17em;
}

.page-products .fn-hero-lede {
  max-width: 30em;
  margin: 0;
  color: var(--text-2);
}

.page-products .fn-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--fn-line-soft);
  border-top: 1px solid var(--fn-line);
  border-bottom: 1px solid var(--fn-line);
}

.page-products .fn-hero-facts li {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.05rem .85rem 1.15rem;
  background: var(--obsidian);
}

.page-products .fn-hero-facts strong {
  font-family: var(--font-accent);
  font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.page-products .fn-hero-facts span {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text-2);
}

/* ---------- 通用小字说明 ---------- */

.page-products .fn-deck {
  margin: 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 32em;
}

/* ---------- 设备切换 ---------- */

.page-products .fn-track {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

.page-products .fn-track-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  border: 1px solid var(--fn-line);
  border-radius: 999px;
  font-family: var(--font-accent);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--text-2);
  text-decoration: none;
  transition: border-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}

.page-products .fn-track-chip span {
  color: var(--gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.page-products .fn-track-chip:hover,
.page-products .fn-track-chip:focus-visible {
  border-color: rgba(242, 204, 119, .55);
  color: var(--text-1);
  box-shadow: var(--glow-ring);
}

.page-products .fn-flow {
  display: grid;
  gap: 0;
}

.page-products .fn-flow-step {
  border-top: 1px solid var(--fn-line);
  padding: 1.5rem 0 1.6rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.page-products .fn-flow-step:last-child {
  padding-bottom: 1.7rem;
}

@media (min-width: 820px) {
  .page-products .fn-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .fn-flow-step {
    border-top: 0;
    border-right: 1px solid var(--fn-line);
    padding: 1.9rem 1.6rem;
  }
  .page-products .fn-flow-step:first-child {
    padding-left: 0;
  }
  .page-products .fn-flow-step:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

.page-products .fn-flow-step:target {
  background: linear-gradient(180deg, rgba(201, 162, 74, .1), rgba(201, 162, 74, 0) 72%);
}

.page-products .fn-flow-step:target .fn-flow-title {
  color: var(--gold-soft);
}

.page-products .fn-flow-num {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--gold);
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(201, 162, 74, .4);
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}

.page-products .fn-flow-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .7rem;
}

.page-products .fn-flow-text {
  margin: 0;
  font-size: .93rem;
  line-height: 1.78;
  color: var(--text-2);
}

.page-products .fn-flow-feedback,
.page-products .fn-flow-hint {
  margin: .8rem 0 0;
  padding-left: .85rem;
  border-left: 2px solid var(--fn-line);
  font-size: .83rem;
  line-height: 1.7;
  color: var(--text-2);
}

.page-products .fn-flow-feedback {
  border-left-color: rgba(18, 160, 138, .55);
}

.page-products .fn-flow-hint {
  border-left-color: rgba(224, 118, 58, .55);
}

.page-products .fn-flow-feedback b,
.page-products .fn-flow-hint b {
  display: block;
  font-family: var(--font-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-3);
  margin-bottom: .2rem;
}

/* ---------- 图片容器 ---------- */

.page-products .fn-figure,
.page-products .fn-records-visual,
.page-products .fn-modules-figure,
.page-products .fn-seasons-visual,
.page-products .fn-devices-figure {
  margin: clamp(1.85rem, 4vw, 2.9rem) 0 0;
}

.page-products .fn-seasons-visual,
.page-products .fn-modules-figure {
  margin-top: 0;
}

.page-products .fn-figure .media-frame,
.page-products .fn-devices-figure .media-frame {
  aspect-ratio: 16 / 9;
}

.page-products .fn-records-visual .media-frame {
  aspect-ratio: 3 / 4;
}

.page-products .fn-modules-figure .media-frame {
  aspect-ratio: 14 / 9;
}

.page-products .fn-seasons-visual .media-frame {
  aspect-ratio: 3 / 2;
}

.page-products .media-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-products .media-caption {
  display: block;
  margin-top: .7rem;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text-3);
}

/* ---------- 记录与明细 ---------- */

.page-products .fn-records-body {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

@media (min-width: 900px) {
  .page-products .fn-records-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
}

.page-products .fn-records-visual {
  margin-top: 0;
}

.page-products .fn-records-main .prose + .prose {
  margin-top: 1rem;
}

.page-products .fn-filters {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fn-line);
}

.page-products .fn-filter-group {
  display: grid;
  gap: .5rem;
}

.page-products .fn-filter-label {
  font-family: var(--font-accent);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--text-3);
}

.page-products .fn-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.page-products .fn-filter-tags .tag {
  font-size: .78rem;
  padding: .28rem .7rem;
  background: transparent;
}

.page-products .fn-filter-tags .tag--gold {
  border-color: rgba(201, 162, 74, .38);
  color: var(--gold-soft);
}

.page-products .fn-filter-tags .tag--peacock {
  border-color: rgba(18, 160, 138, .38);
  color: var(--peacock-soft);
}

.page-products .fn-filter-tags .tag--sunset {
  border-color: rgba(224, 118, 58, .38);
  color: var(--sunset-soft);
}

.page-products .fn-timeline {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--fn-line);
}

.page-products .fn-timeline-item {
  display: grid;
  gap: .3rem 1.25rem;
  padding: 1.1rem 0 1.15rem 1.1rem;
  border-bottom: 1px solid var(--fn-line-soft);
  border-left: 2px solid var(--fn-line);
  transition: background-color .16s var(--ease), border-left-color .16s var(--ease);
}

@media (min-width: 760px) {
  .page-products .fn-timeline-item {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.page-products .fn-timeline-item:hover {
  background: rgba(233, 231, 226, .028);
}

.page-products .fn-timeline-item--device {
  border-left-color: var(--gold);
}

.page-products .fn-timeline-item--collect {
  border-left-color: var(--peacock);
}

.page-products .fn-timeline-item--export {
  border-left-color: var(--sunset);
}

.page-products .fn-timeline-time {
  font-family: var(--font-accent);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.page-products .fn-timeline-title {
  margin: 0 0 .18rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--text-1);
}

.page-products .fn-timeline-desc {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* ---------- 会员栏目矩阵 ---------- */

.page-products .fn-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

@media (min-width: 1000px) {
  .page-products .fn-matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-products .fn-card--lead {
    grid-column: span 2;
  }
}

.page-products .fn-card {
  display: flex;
  flex-direction: column;
  padding: 1.35rem 1.2rem 1.4rem;
  border: 1px solid var(--fn-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(233, 231, 226, .028), rgba(233, 231, 226, 0));
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.page-products .fn-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 204, 119, .42);
  box-shadow: var(--glow-ring);
}

.page-products .fn-card--lead {
  border-color: rgba(201, 162, 74, .32);
  background: linear-gradient(150deg, rgba(201, 162, 74, .13), rgba(224, 118, 58, .055) 55%, rgba(233, 231, 226, 0) 100%);
}

.page-products .fn-card-title {
  margin: 0 0 .6rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-1);
}

.page-products .fn-card--lead .fn-card-title {
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  color: var(--gold-soft);
}

.page-products .fn-card-text {
  margin: 0;
  font-size: .89rem;
  line-height: 1.76;
  color: var(--text-2);
}

.page-products .fn-card-meta {
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--fn-line-soft);
  font-family: var(--font-accent);
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--text-3);
}

/* ---------- 活动节奏 ---------- */

.page-products .fn-seasons-inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--fn-line);
  border-radius: var(--radius);
  background:
    var(--pattern-contour),
    linear-gradient(120deg, rgba(18, 160, 138, .1), rgba(224, 118, 58, .07) 58%, rgba(11, 12, 14, 0) 100%),
    var(--ink);
}

@media (min-width: 900px) {
  .page-products .fn-seasons-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
}

.page-products .fn-seasons-copy .prose + .prose {
  margin-top: 1rem;
}

.page-products .fn-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

/* ---------- 设备支持表 ---------- */

.page-products .fn-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--fn-line);
  border-bottom: 1px solid var(--fn-line);
}

.page-products .fn-table {
  width: 100%;
  min-width: 33rem;
  border-collapse: collapse;
  font-size: .9rem;
}

.page-products .fn-table th,
.page-products .fn-table td {
  text-align: left;
  vertical-align: top;
  padding: .95rem 1rem;
  border-bottom: 1px solid var(--fn-line-soft);
}

.page-products .fn-table thead th {
  font-family: var(--font-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-3);
  border-bottom-color: var(--fn-line);
}

.page-products .fn-table tbody th {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-soft);
  white-space: nowrap;
}

.page-products .fn-table tbody td {
  color: var(--text-2);
  line-height: 1.7;
}

.page-products .fn-table tbody tr {
  transition: background-color .16s var(--ease);
}

.page-products .fn-table tbody tr:hover {
  background: rgba(242, 204, 119, .05);
}

/* ---------- 典型场景 ---------- */

.page-products .fn-scene-list {
  border-top: 1px solid var(--fn-line);
}

.page-products .fn-scene-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--fn-line-soft);
}

@media (min-width: 780px) {
  .page-products .fn-scene-item {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
  }
}

.page-products .fn-scene-index {
  font-family: var(--font-accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.page-products .fn-scene-title {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.4;
}

.page-products .fn-scene-path {
  margin: 0 0 .4rem;
  font-family: var(--font-accent);
  font-size: .9rem;
  letter-spacing: .01em;
  color: var(--text-1);
}

.page-products .fn-scene-label {
  display: inline-block;
  margin-right: .5rem;
  padding: .05rem .5rem;
  border: 1px solid var(--fn-line);
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--text-3);
  vertical-align: 1px;
}

.page-products .fn-scene-note {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--text-2);
}

.page-products .fn-scene-steps {
  justify-self: start;
  padding: .3rem .85rem;
  border: 1px solid rgba(242, 204, 119, .35);
  border-radius: 999px;
  font-family: var(--font-accent);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--gold-soft);
  white-space: nowrap;
}

@media (min-width: 780px) {
  .page-products .fn-scene-steps {
    justify-self: end;
  }
}

/* ---------- 收尾 ---------- */

.page-products .fn-tail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid var(--fn-line);
  border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(201, 162, 74, .11), rgba(11, 12, 14, 0) 72%);
}

.page-products .fn-tail-text {
  margin: 0;
  max-width: 42em;
  font-size: .97rem;
  line-height: 1.78;
  color: var(--text-2);
}

.page-products .fn-tail-inner .fn-cta-row {
  margin-top: 0;
}

/* ---------- 降级 ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-products .fn-card,
  .page-products .fn-track-chip,
  .page-products .fn-timeline-item,
  .page-products .fn-table tbody tr {
    transition: none;
  }
  .page-products .fn-card:hover {
    transform: none;
  }
}