.page-products {
  --pp-line: rgba(168, 176, 204, 0.18);
  --pp-line-soft: rgba(168, 176, 204, 0.09);
  --pp-card: linear-gradient(158deg, rgba(44, 58, 107, 0.55), rgba(59, 46, 95, 0.40));
  --pp-card-gold: linear-gradient(158deg, rgba(232, 180, 90, 0.16), rgba(44, 58, 107, 0.42));
  --pp-card-cyan: linear-gradient(158deg, rgba(85, 230, 232, 0.13), rgba(59, 46, 95, 0.44));
  color: var(--text);
  font-family: var(--font-sans);
  padding: 26px 0 76px;
  background:
    radial-gradient(115% 72% at 90% -8%, rgba(85, 230, 232, 0.10), transparent 62%),
    radial-gradient(95% 62% at -12% 24%, rgba(232, 180, 90, 0.08), transparent 62%);
}

.page-products .wrap {
  width: min(1140px, 100% - 32px);
  margin-inline: auto;
}

.page-products .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mist);
  margin-bottom: 22px;
}

.page-products .breadcrumb__item {
  color: var(--mist);
  text-decoration: none;
}

.page-products .breadcrumb__item[aria-current="page"] {
  color: var(--cyan);
}

.page-products .breadcrumb__sep {
  color: var(--hair);
}

.page-products .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.page-products h1 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(29px, 6.4vw, 52px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  max-width: 20ch;
}

.page-products .lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.88;
  max-width: 62ch;
  margin: 0;
}

.page-products h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(23px, 4.4vw, 36px);
  line-height: 1.24;
  margin: 0;
}

.page-products h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--paper);
}

.page-products p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 12px;
}

.page-products a {
  color: var(--cyan);
}

.page-products .hero__visual {
  margin: 26px 0 0;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 22px 60px rgba(8, 8, 12, 0.55);
}

.page-products .hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0.9;
}

.page-products .sec {
  padding-block: 44px;
}

.page-products .sec + .sec {
  border-top: 1px solid var(--pp-line-soft);
}

.page-products .sec-head {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
  max-width: 68ch;
}

.page-products .sec-head__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--magenta);
}

.page-products .sec-head p {
  color: var(--mist);
  margin: 0;
}

.page-products .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  margin-bottom: 12px;
}

.page-products .tag--gold {
  color: var(--gold);
  border-color: rgba(232, 180, 90, 0.45);
  background: rgba(232, 180, 90, 0.10);
}

.page-products .tag--cyan {
  color: var(--cyan);
  border-color: rgba(85, 230, 232, 0.45);
  background: rgba(85, 230, 232, 0.10);
}

.page-products .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.page-products .btn--gold {
  background: var(--gold);
  color: var(--ink);
}

.page-products .btn--ghost {
  border-color: var(--pp-line);
  color: var(--cyan);
  background: transparent;
}

.page-products .btn:hover {
  transform: translateY(-2px);
}

.page-products .btn--ghost:hover {
  border-color: var(--cyan);
}

.page-products .duo__grid {
  display: grid;
  gap: 16px;
}

.page-products .duo__card {
  padding: 22px 20px;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  background: var(--pp-card);
}

.page-products .duo__card--gold {
  background: var(--pp-card-gold);
  box-shadow: inset 0 1px 0 rgba(232, 180, 90, 0.22);
}

.page-products .duo__card--cyan {
  background: var(--pp-card-cyan);
  box-shadow: inset 0 1px 0 rgba(85, 230, 232, 0.20);
}

.page-products .mini-list {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-products .mini-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .mini-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--cyan);
  transform: rotate(45deg);
}

.page-products .duo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .wide-frame,
.page-products .cycle-frame,
.page-products .settings-frame,
.page-products .fav__visual {
  margin: 22px 0 0;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--night);
}

.page-products .wide-frame img,
.page-products .cycle-frame img,
.page-products .settings-frame img,
.page-products .fav__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .path {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--pp-line);
}

.page-products .path__step {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 0 14px 22px;
}

.page-products .path__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: var(--space);
}

.page-products .path__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.page-products .path__label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--paper);
  text-decoration: none;
}

.page-products .path__label:hover {
  color: var(--cyan);
}

.page-products .path__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .seg {
  position: relative;
}

.page-products .seg__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-products .seg__tab {
  cursor: pointer;
  padding: 9px 16px;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--mist);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.page-products .seg__tab:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-products .seg__panel {
  display: none;
  padding: 20px 18px;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  background: var(--pp-card);
}

.page-products #cyc-m:checked ~ .seg__tabs label[for="cyc-m"],
.page-products #cyc-q:checked ~ .seg__tabs label[for="cyc-q"],
.page-products #cyc-y:checked ~ .seg__tabs label[for="cyc-y"],
.page-products #fav-a:checked ~ .seg__tabs label[for="fav-a"],
.page-products #fav-b:checked ~ .seg__tabs label[for="fav-b"],
.page-products #fav-c:checked ~ .seg__tabs label[for="fav-c"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 500;
}

.page-products #cyc-m:checked ~ .seg__panels #cyc-p-m,
.page-products #cyc-q:checked ~ .seg__panels #cyc-p-q,
.page-products #cyc-y:checked ~ .seg__panels #cyc-p-y,
.page-products #fav-a:checked ~ .seg__panels #fav-p-a,
.page-products #fav-b:checked ~ .seg__panels #fav-p-b,
.page-products #fav-c:checked ~ .seg__panels #fav-p-c {
  display: block;
}

.page-products #cyc-m:focus-visible ~ .seg__tabs label[for="cyc-m"],
.page-products #cyc-q:focus-visible ~ .seg__tabs label[for="cyc-q"],
.page-products #cyc-y:focus-visible ~ .seg__tabs label[for="cyc-y"],
.page-products #fav-a:focus-visible ~ .seg__tabs label[for="fav-a"],
.page-products #fav-b:focus-visible ~ .seg__tabs label[for="fav-b"],
.page-products #fav-c:focus-visible ~ .seg__tabs label[for="fav-c"] {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .spec {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-products .spec__row {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-products .spec__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .spec dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.page-products .spec dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.9;
}

.page-products .note-line {
  margin-top: 18px;
  font-size: 15px;
  color: var(--mist);
}

.page-products .benefit-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .benefit {
  padding: 18px;
  border: 1px solid var(--pp-line);
  border-radius: 3px;
  background: linear-gradient(170deg, rgba(23, 17, 46, 0.9), rgba(7, 11, 31, 0.72));
  transition: border-color 200ms ease, transform 200ms ease;
}

.page-products .benefit:hover {
  border-color: rgba(85, 230, 232, 0.55);
  transform: translateY(-2px);
}

.page-products .benefit__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 10px;
}

.page-products .benefit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .fav {
  display: grid;
  gap: 18px;
}

.page-products .fav__visual {
  margin: 0;
}

.page-products .fav__stat {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.page-products .fav__stat span {
  color: var(--gold);
  font-size: 18px;
  margin-inline: 3px;
}

.page-products .settings {
  display: grid;
  gap: 12px;
}

.page-products .set-card {
  padding: 16px 16px 14px;
  border: 1px solid var(--pp-line);
  border-radius: 3px;
  background: rgba(23, 17, 46, 0.62);
}

.page-products .set-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-products .set-card__head h3 {
  margin: 0;
  font-size: 17px;
}

.page-products .set-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex: none;
}

.page-products .toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .toggle__track {
  display: block;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: rgba(8, 8, 12, 0.8);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.page-products .toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mist);
  transition: transform 200ms ease, background 200ms ease;
}

.page-products .toggle input:checked + .toggle__track {
  background: rgba(85, 230, 232, 0.22);
  border-color: var(--cyan);
}

.page-products .toggle input:checked + .toggle__track::after {
  transform: translateX(19px);
  background: var(--cyan);
}

.page-products .toggle input:focus-visible + .toggle__track {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .check-list {
  display: grid;
  gap: 10px;
}

.page-products .check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--pp-line);
  border-radius: 3px;
  background: rgba(23, 17, 46, 0.48);
  cursor: pointer;
  transition: border-color 180ms ease;
}

.page-products .check:hover {
  border-color: rgba(232, 180, 90, 0.45);
}

.page-products .check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .check__box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--pp-line);
  border-radius: 2px;
  background: transparent;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease;
}

.page-products .check input:checked ~ .check__box {
  border-color: var(--gold);
  background: rgba(232, 180, 90, 0.18);
}

.page-products .check input:checked ~ .check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(40deg);
}

.page-products .check input:focus-visible ~ .check__box {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .check__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.9;
}

.page-products .check__text a {
  color: var(--cyan);
}

.page-products .closing {
  margin-top: 24px;
  padding: 20px 18px;
  border: 1px solid rgba(232, 180, 90, 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: linear-gradient(140deg, rgba(232, 180, 90, 0.12), rgba(23, 17, 46, 0.7));
}

.page-products .closing p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.9;
}

.page-products .closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

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

  .page-products .spec__row {
    grid-template-columns: 108px 1fr;
    gap: 14px;
    align-items: start;
  }

  .page-products .spec dt {
    padding-top: 3px;
  }
}

@media (min-width: 900px) {
  .page-products {
    padding: 40px 0 104px;
  }

  .page-products .sec {
    padding-block: 64px;
  }

  .page-products .hero__visual {
    margin-top: 34px;
  }

  .page-products .duo__grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 20px;
  }

  .page-products .duo__card {
    padding: 28px 26px;
  }

  .page-products .path {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--pp-line);
    padding-top: 18px;
  }

  .page-products .path__step {
    padding: 14px 10px 0 0;
  }

  .page-products .path__step::before {
    left: 0;
    top: -23px;
    width: 11px;
    height: 11px;
  }

  .page-products .benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .fav {
    grid-template-columns: 1fr 0.85fr;
    gap: 24px;
    align-items: start;
  }

  .page-products .fav__visual {
    margin-top: 0;
  }

  .page-products .settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .settings-frame,
  .page-products .cycle-frame {
    max-width: 780px;
  }

  .page-products .closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
  }

  .page-products .closing p {
    margin: 0;
    max-width: 60ch;
  }

  .page-products .closing__actions {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .btn,
  .page-products .benefit,
  .page-products .toggle__track,
  .page-products .toggle__track::after,
  .page-products .check__box,
  .page-products .seg__tab {
    transition: none;
  }

  .page-products .btn:hover,
  .page-products .benefit:hover {
    transform: none;
  }
}



.page-products {
  --pp-line: rgba(168, 176, 204, 0.18);
  --pp-line-soft: rgba(168, 176, 204, 0.09);
  --pp-card: linear-gradient(158deg, rgba(44, 58, 107, 0.55), rgba(59, 46, 95, 0.40));
  --pp-card-gold: linear-gradient(158deg, rgba(232, 180, 90, 0.16), rgba(44, 58, 107, 0.42));
  --pp-card-cyan: linear-gradient(158deg, rgba(85, 230, 232, 0.13), rgba(59, 46, 95, 0.44));
  color: var(--text);
  font-family: var(--font-sans);
  padding: 26px 0 76px;
  background:
    radial-gradient(115% 72% at 90% -8%, rgba(85, 230, 232, 0.10), transparent 62%),
    radial-gradient(95% 62% at -12% 24%, rgba(232, 180, 90, 0.08), transparent 62%);
}

.page-products .wrap {
  width: min(1140px, 100% - 32px);
  margin-inline: auto;
}

.page-products .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mist);
  margin-bottom: 22px;
}

.page-products .breadcrumb__item {
  color: var(--mist);
  text-decoration: none;
}

.page-products .breadcrumb__item[aria-current="page"] {
  color: var(--cyan);
}

.page-products .breadcrumb__sep {
  color: var(--hair);
}

.page-products .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.page-products h1 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(29px, 6.4vw, 52px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  max-width: 20ch;
}

.page-products .lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.88;
  max-width: 62ch;
  margin: 0;
}

.page-products h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(23px, 4.4vw, 36px);
  line-height: 1.24;
  margin: 0;
}

.page-products h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--paper);
}

.page-products p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 12px;
}

.page-products a {
  color: var(--cyan);
}

.page-products .hero__visual {
  margin: 26px 0 0;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--night);
  box-shadow: 0 22px 60px rgba(8, 8, 12, 0.55);
}

.page-products .hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0.9;
}

.page-products .sec {
  padding-block: 44px;
}

.page-products .sec + .sec {
  border-top: 1px solid var(--pp-line-soft);
}

.page-products .sec-head {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
  max-width: 68ch;
}

.page-products .sec-head__no {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--magenta);
}

.page-products .sec-head p {
  color: var(--mist);
  margin: 0;
}

.page-products .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  margin-bottom: 12px;
}

.page-products .tag--gold {
  color: var(--gold);
  border-color: rgba(232, 180, 90, 0.45);
  background: rgba(232, 180, 90, 0.10);
}

.page-products .tag--cyan {
  color: var(--cyan);
  border-color: rgba(85, 230, 232, 0.45);
  background: rgba(85, 230, 232, 0.10);
}

.page-products .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.page-products .btn--gold {
  background: var(--gold);
  color: var(--ink);
}

.page-products .btn--ghost {
  border-color: var(--pp-line);
  color: var(--cyan);
  background: transparent;
}

.page-products .btn:hover {
  transform: translateY(-2px);
}

.page-products .btn--ghost:hover {
  border-color: var(--cyan);
}

.page-products .duo__grid {
  display: grid;
  gap: 16px;
}

.page-products .duo__card {
  padding: 22px 20px;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  background: var(--pp-card);
}

.page-products .duo__card--gold {
  background: var(--pp-card-gold);
  box-shadow: inset 0 1px 0 rgba(232, 180, 90, 0.22);
}

.page-products .duo__card--cyan {
  background: var(--pp-card-cyan);
  box-shadow: inset 0 1px 0 rgba(85, 230, 232, 0.20);
}

.page-products .mini-list {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-products .mini-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .mini-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--cyan);
  transform: rotate(45deg);
}

.page-products .duo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .wide-frame,
.page-products .cycle-frame,
.page-products .settings-frame,
.page-products .fav__visual {
  margin: 22px 0 0;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--night);
}

.page-products .wide-frame img,
.page-products .cycle-frame img,
.page-products .settings-frame img,
.page-products .fav__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .path {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--pp-line);
}

.page-products .path__step {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 0 14px 22px;
}

.page-products .path__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: var(--space);
}

.page-products .path__no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.page-products .path__label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--paper);
  text-decoration: none;
}

.page-products .path__label:hover {
  color: var(--cyan);
}

.page-products .path__hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mist);
}

.page-products .seg {
  position: relative;
}

.page-products .seg__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-products .seg__tab {
  cursor: pointer;
  padding: 9px 16px;
  border: 1px solid var(--pp-line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--mist);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.page-products .seg__tab:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.page-products .seg__panel {
  display: none;
  padding: 20px 18px;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  background: var(--pp-card);
}

.page-products #cyc-m:checked ~ .seg__tabs label[for="cyc-m"],
.page-products #cyc-q:checked ~ .seg__tabs label[for="cyc-q"],
.page-products #cyc-y:checked ~ .seg__tabs label[for="cyc-y"],
.page-products #fav-a:checked ~ .seg__tabs label[for="fav-a"],
.page-products #fav-b:checked ~ .seg__tabs label[for="fav-b"],
.page-products #fav-c:checked ~ .seg__tabs label[for="fav-c"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 500;
}

.page-products #cyc-m:checked ~ .seg__panels #cyc-p-m,
.page-products #cyc-q:checked ~ .seg__panels #cyc-p-q,
.page-products #cyc-y:checked ~ .seg__panels #cyc-p-y,
.page-products #fav-a:checked ~ .seg__panels #fav-p-a,
.page-products #fav-b:checked ~ .seg__panels #fav-p-b,
.page-products #fav-c:checked ~ .seg__panels #fav-p-c {
  display: block;
}

.page-products #cyc-m:focus-visible ~ .seg__tabs label[for="cyc-m"],
.page-products #cyc-q:focus-visible ~ .seg__tabs label[for="cyc-q"],
.page-products #cyc-y:focus-visible ~ .seg__tabs label[for="cyc-y"],
.page-products #fav-a:focus-visible ~ .seg__tabs label[for="fav-a"],
.page-products #fav-b:focus-visible ~ .seg__tabs label[for="fav-b"],
.page-products #fav-c:focus-visible ~ .seg__tabs label[for="fav-c"] {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .spec {
  margin: 0;
  display: grid;
  gap: 0;
}

.page-products .spec__row {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-line-soft);
}

.page-products .spec__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.page-products .spec dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.page-products .spec dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.9;
}

.page-products .note-line {
  margin-top: 18px;
  font-size: 15px;
  color: var(--mist);
}

.page-products .benefit-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .benefit {
  padding: 18px;
  border: 1px solid var(--pp-line);
  border-radius: 3px;
  background: linear-gradient(170deg, rgba(23, 17, 46, 0.9), rgba(7, 11, 31, 0.72));
  transition: border-color 200ms ease, transform 200ms ease;
}

.page-products .benefit:hover {
  border-color: rgba(85, 230, 232, 0.55);
  transform: translateY(-2px);
}

.page-products .benefit__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 10px;
}

.page-products .benefit p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .fav {
  display: grid;
  gap: 18px;
}

.page-products .fav__visual {
  margin: 0;
}

.page-products .fav__stat {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.04em;
}

.page-products .fav__stat span {
  color: var(--gold);
  font-size: 18px;
  margin-inline: 3px;
}

.page-products .settings {
  display: grid;
  gap: 12px;
}

.page-products .set-card {
  padding: 16px 16px 14px;
  border: 1px solid var(--pp-line);
  border-radius: 3px;
  background: rgba(23, 17, 46, 0.62);
}

.page-products .set-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-products .set-card__head h3 {
  margin: 0;
  font-size: 17px;
}

.page-products .set-card p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mist);
}

.page-products .toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex: none;
}

.page-products .toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .toggle__track {
  display: block;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: rgba(8, 8, 12, 0.8);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}

.page-products .toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mist);
  transition: transform 200ms ease, background 200ms ease;
}

.page-products .toggle input:checked + .toggle__track {
  background: rgba(85, 230, 232, 0.22);
  border-color: var(--cyan);
}

.page-products .toggle input:checked + .toggle__track::after {
  transform: translateX(19px);
  background: var(--cyan);
}

.page-products .toggle input:focus-visible + .toggle__track {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .check-list {
  display: grid;
  gap: 10px;
}

.page-products .check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--pp-line);
  border-radius: 3px;
  background: rgba(23, 17, 46, 0.48);
  cursor: pointer;
  position: relative;
  transition: border-color 180ms ease;
}

.page-products .check:hover {
  border-color: rgba(232, 180, 90, 0.45);
}

.page-products .check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-products .check__box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--pp-line);
  border-radius: 2px;
  background: transparent;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease;
}

.page-products .check input:checked ~ .check__box {
  border-color: var(--gold);
  background: rgba(232, 180, 90, 0.18);
}

.page-products .check input:checked ~ .check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(40deg);
}

.page-products .check input:focus-visible ~ .check__box {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .check__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.9;
}

.page-products .check__text a {
  color: var(--cyan);
}

.page-products .closing {
  margin-top: 24px;
  padding: 20px 18px;
  border: 1px solid rgba(232, 180, 90, 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: linear-gradient(140deg, rgba(232, 180, 90, 0.12), rgba(23, 17, 46, 0.7));
}

.page-products .closing p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.9;
}

.page-products .closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

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

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

  .page-products .spec__row {
    grid-template-columns: 108px 1fr;
    gap: 14px;
    align-items: start;
  }

  .page-products .spec dt {
    padding-top: 3px;
  }
}

@media (min-width: 900px) {
  .page-products {
    padding: 40px 0 104px;
  }

  .page-products .sec {
    padding-block: 64px;
  }

  .page-products .hero__visual {
    margin-top: 34px;
  }

  .page-products .duo__grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 20px;
  }

  .page-products .duo__card {
    padding: 28px 26px;
  }

  .page-products .path {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--pp-line);
    padding-top: 18px;
  }

  .page-products .path__step {
    padding: 14px 10px 0 0;
  }

  .page-products .path__step::before {
    left: 0;
    top: -23px;
    width: 11px;
    height: 11px;
  }

  .page-products .benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .fav {
    grid-template-columns: 1fr 0.85fr;
    gap: 24px;
    align-items: start;
  }

  .page-products .settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .settings-frame,
  .page-products .cycle-frame {
    max-width: 780px;
  }

  .page-products .closing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
  }

  .page-products .closing p {
    margin: 0;
    max-width: 60ch;
  }

  .page-products .closing__actions {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .btn,
  .page-products .benefit,
  .page-products .toggle__track,
  .page-products .toggle__track::after,
  .page-products .check__box,
  .page-products .seg__tab {
    transition: none;
  }

  .page-products .btn:hover,
  .page-products .benefit:hover {
    transform: none;
  }
}


<main id="main-content" class="page-products">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a class="breadcrumb__item" href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span class="breadcrumb__item" aria-current="page">体验中心</span>
    </nav>
  </div>

  <header class="hero wrap" data-reveal>
    <p class="eyebrow">体验中心 · 订阅与收藏</p>
    <h1>周期先看清，权益再对一遍，然后安心订阅或收藏</h1>
    <p class="lede">万能真人把订阅说明、会员权益、娱乐专区收藏和设置管理放在同一处。你可以先比三种订阅节奏，再确认六项权益里哪些是自己真会用到的，最后决定是把内容收进收藏夹，还是找客服问清楚再动手。</p>
    <figure class="hero__visual">
      <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="深色背景上的设备轮廓与柔和光晕，周围环绕订阅周期刻度线">
    </figure>
  </header>

  <section class="sec wrap duo" id="entry" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">01</span>
      <h2>订阅说明与人工支持，就在同一屏</h2>
      <p>先读周期和权益，遇到拿不准的地方直接转人工，不用在两个入口之间来回找。</p>
    </div>

    <div class="duo__grid">
      <article class="duo__card duo__card--gold">
        <span class="tag tag--gold">订阅入口</span>
        <h3>iOS 订阅说明</h3>
        <p>万能真人iOS订阅页面把三种周期、订阅前检查清单和 12 条常见订阅问题排在一起。看完周期再对权益，判断依据都在眼前，不必反复跳页。</p>
        <ul class="mini-list">
          <li>月付、季付、年付三档节奏并列对比</li>
          <li>六项会员权益逐条列出，勾选常用的那几项</li>
          <li>订阅前检查清单可直接照着过一遍</li>
        </ul>
        <div class="duo__actions">
          <a class="btn btn--gold" href="#cycle">对比订阅周期</a>
          <a class="btn btn--ghost" href="/answers/">看订阅问答</a>
        </div>
      </article>

      <article class="duo__card duo__card--cyan">
        <span class="tag tag--cyan">人工支持</span>
        <h3>订阅前后都能找到客服</h3>
        <p>订阅、收藏、账号任一处卡住，都可以走工单、邮件、电话三种方式。工作日 10:00 至 18:00 内平均 2 小时回复，工单首次响应平均 90 分钟。</p>
        <ul class="mini-list">
          <li>工单可关联订阅与收藏记录，说明问题少绕弯</li>
          <li>邮件通道适合需要附上说明的情况</li>
          <li>知识库按六类整理 120 条问答，先搜再问更快</li>
        </ul>
        <div class="duo__actions">
          <a class="btn btn--gold" href="/contact/">去联系咨询</a>
          <a class="btn btn--ghost" href="/answers/">先查答疑中心</a>
        </div>
      </article>
    </div>

    <figure class="wide-frame">
      <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="设备轮廓卡与对话气泡卡左右并列，中间以细线连接" loading="lazy" decoding="async">
    </figure>
  </section>

  <section class="sec wrap path-block" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">02</span>
      <h2>从看订阅到找客服，五步走完</h2>
      <p>按顺序走一遍最快；哪一步已经有答案，直接跳到下一步。</p>
    </div>
    <ol class="path">
      <li class="path__step">
        <span class="path__no">01</span>
        <a class="path__label" href="#entry">看订阅说明</a>
        <span class="path__hint">周期与权益先过一遍</span>
      </li>
      <li class="path__step">
        <span class="path__no">02</span>
        <a class="path__label" href="#cycle">选订阅周期</a>
        <span class="path__hint">按使用频率挑月、季或年</span>
      </li>
      <li class="path__step">
        <span class="path__no">03</span>
        <a class="path__label" href="#favorites">管收藏夹</a>
        <span class="path__hint">分册收纳，跨设备同步</span>
      </li>
      <li class="path__step">
        <span class="path__no">04</span>
        <a class="path__label" href="#settings">调设置</a>
        <span class="path__hint">六组开关一屏调完</span>
      </li>
      <li class="path__step">
        <span class="path__no">05</span>
        <a class="path__label" href="/contact/">找客服</a>
        <span class="path__hint">工单带上记录再问</span>
      </li>
    </ol>
  </section>

  <section class="sec wrap" id="cycle" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">03</span>
      <h2>三种订阅节奏，按你的使用频率挑</h2>
      <p>权益范围在三种周期里是一致的，差别在于续订频率与打扰次数。点开对应标签看适用场景。</p>
    </div>

    <div class="seg">
      <input class="visually-hidden" type="radio" name="cyc" id="cyc-m" checked>
      <input class="visually-hidden" type="radio" name="cyc" id="cyc-q">
      <input class="visually-hidden" type="radio" name="cyc" id="cyc-y">
      <div class="seg__tabs">
        <label class="seg__tab" for="cyc-m">月付</label>
        <label class="seg__tab" for="cyc-q">季付</label>
        <label class="seg__tab" for="cyc-y">年付</label>
      </div>
      <div class="seg__panels">
        <div class="seg__panel" id="cyc-p-m">
          <dl class="spec">
            <div class="spec__row"><dt>适合场景</dt><dd>刚开始用、想先看一段时间再定的阶段；回访频率还不固定的用户。</dd></div>
            <div class="spec__row"><dt>权益范围</dt><dd>收藏同步、更新提醒、专属客服、订阅管理、分类筛选、回访记录六项全含。</dd></div>
            <div class="spec__row"><dt>续订节奏</dt><dd>按月续，调整窗口最短，试用期结束前就能决定要不要继续。</dd></div>
            <div class="spec__row"><dt>提醒安排</dt><dd>更新提醒按你关注的专题推送，通知偏好在设置里单独关。</dd></div>
          </dl>
        </div>
        <div class="seg__panel" id="cyc-p-q">
          <dl class="spec">
            <div class="spec__row"><dt>适合场景</dt><dd>已经形成固定回访习惯、不希望频繁处理续订的用户。</dd></div>
            <div class="spec__row"><dt>权益范围</dt><dd>与月付相同的六项权益，收藏夹容量与同步方式保持一致。</dd></div>
            <div class="spec__row"><dt>续订节奏</dt><dd>按季续，一年内需要操心的续订次数明显减少。</dd></div>
            <div class="spec__row"><dt>提醒安排</dt><dd>到期前会提前提示，配合订阅状态一处查看，不怕漏看。</dd></div>
          </dl>
        </div>
        <div class="seg__panel" id="cyc-p-y">
          <dl class="spec">
            <div class="spec__row"><dt>适合场景</dt><dd>长期使用、希望一次设定好长时间不被打断的用户。</dd></div>
            <div class="spec__row"><dt>权益范围</dt><dd>六项权益齐全，回访记录与收藏册长期累积更连贯。</dd></div>
            <div class="spec__row"><dt>续订节奏</dt><dd>按年续，适合把收藏夹当长期资料库整理的使用方式。</dd></div>
            <div class="spec__row"><dt>提醒安排</dt><dd>年度周期提醒一次性集中发出，日常推送可自行调低。</dd></div>
          </dl>
        </div>
      </div>
    </div>

    <figure class="cycle-frame">
      <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="月付、季付、年付三张抽象卡片并排，用等宽数字标注周期" loading="lazy" decoding="async">
    </figure>

    <p class="note-line">周期怎么选、能不能调整、到期怎么处理，完整条文在<a href="/terms-of-use/">使用条款</a>里；还有疑问可以直接<a href="/contact/">找客服</a>问。</p>
  </section>

  <section class="sec wrap" id="benefits" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">04</span>
      <h2>六项会员权益，一项一项对</h2>
      <p>权益说明每两周与规则说明一起更新，改动会同步到更新专栏。</p>
    </div>
    <ul class="benefit-grid">
      <li class="benefit">
        <span class="benefit__no">01</span>
        <h3>收藏同步</h3>
        <p>收藏夹跟着账号走，换设备打开还是同一册内容，六项权益里使用率最高的一项。</p>
      </li>
      <li class="benefit">
        <span class="benefit__no">02</span>
        <h3>更新提醒</h3>
        <p>关注的专题有新增或调整时先收到提示，不必天天手动翻列表。</p>
      </li>
      <li class="benefit">
        <span class="benefit__no">03</span>
        <h3>专属客服</h3>
        <p>订阅与收藏的问题走人工通道，工单能带上你的记录，沟通更省事。</p>
      </li>
      <li class="benefit">
        <span class="benefit__no">04</span>
        <h3>订阅管理</h3>
        <p>当前周期、续订安排与权益生效情况在同一处查看和调整。</p>
      </li>
      <li class="benefit">
        <span class="benefit__no">05</span>
        <h3>分类筛选</h3>
        <p>9 个内容大类、64 个二级标签，可按热度、更新时间与收藏数排序。</p>
      </li>
      <li class="benefit">
        <span class="benefit__no">06</span>
        <h3>回访记录</h3>
        <p>上次看到哪里、收藏了哪些内容，回来直接接上，不用重新找入口。</p>
      </li>
    </ul>
  </section>

  <section class="sec wrap" id="favorites" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">05</span>
      <h2>收藏夹按册整理，进度不会断</h2>
      <p>新版娱乐专区收藏支持跨设备同步，回访用户在同一页面就能翻到最近 30 条更新记录。</p>
    </div>

    <div class="fav">
      <div class="seg seg--fav">
        <input class="visually-hidden" type="radio" name="fav" id="fav-a" checked>
        <input class="visually-hidden" type="radio" name="fav" id="fav-b">
        <input class="visually-hidden" type="radio" name="fav" id="fav-c">
        <div class="seg__tabs">
          <label class="seg__tab" for="fav-a">最近浏览</label>
          <label class="seg__tab" for="fav-b">我的收藏</label>
          <label class="seg__tab" for="fav-c">更新记录</label>
        </div>
        <div class="seg__panels">
          <div class="seg__panel" id="fav-p-a">
            <h3>最近浏览：回来先看这一栏</h3>
            <p>翻过的专题与内容按时间排下来，不用凭记忆重新找入口。换设备登录后，这份列表跟着账号一起走，接着看就行。</p>
            <p class="fav__stat"><span>跨设备</span>同步接续浏览，不必从头再翻一遍</p>
          </div>
          <div class="seg__panel" id="fav-p-b">
            <h3>我的收藏：一册一个主题</h3>
            <p>最多可创建 20 个收藏夹，每个收藏夹容纳 200 条内容。影音、互动娱乐、数字收藏各成一册，比堆在一条长列表里好找得多。</p>
            <p class="fav__stat"><span>20</span>个收藏夹 · 每册<span>200</span>条内容</p>
          </div>
          <div class="seg__panel" id="fav-p-c">
            <h3>更新记录：改了什么一眼看到</h3>
            <p>专题新增、权益说明调整、规则修订按时间顺序排列，最近 30 条可以逐条翻。回访用户中 72% 会用到收藏或更新记录，这也是回访体验里最常被使用的一环。</p>
            <p class="fav__stat"><span>30</span>条最近更新记录按时间排列</p>
          </div>
        </div>
      </div>

      <figure class="fav__visual">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="三张叠放的收藏册纸卡，分别露出最近浏览、我的收藏与更新记录标签" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="sec wrap" id="settings" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">06</span>
      <h2>六组设置集中一处，改完就生效</h2>
      <p>通知、隐私、同步、订阅、显示与安全都排在同一屏，不用逐页去找开关。</p>
    </div>

    <div class="settings">
      <div class="set-card">
        <div class="set-card__head">
          <h3>通知偏好</h3>
          <label class="toggle">
            <input type="checkbox" checked>
            <span class="toggle__track" aria-hidden="true"></span>
            <span class="visually-hidden">通知偏好开关</span>
          </label>
        </div>
        <p>更新提醒、专题推送与活动通知分开控制，只留你想看的。</p>
      </div>

      <div class="set-card">
        <div class="set-card__head">
          <h3>隐私选项</h3>
          <label class="toggle">
            <input type="checkbox" checked>
            <span class="toggle__track" aria-hidden="true"></span>
            <span class="visually-hidden">隐私选项开关</span>
          </label>
        </div>
        <p>浏览与收藏的可见范围自己定，处理方式可查数据保护说明。</p>
      </div>

      <div class="set-card">
        <div class="set-card__head">
          <h3>收藏同步</h3>
          <label class="toggle">
            <input type="checkbox" checked>
            <span class="toggle__track" aria-hidden="true"></span>
            <span class="visually-hidden">收藏同步开关</span>
          </label>
        </div>
        <p>开启后收藏夹跨设备接续，容量按 20 册、每册 200 条安排。</p>
      </div>

      <div class="set-card">
        <div class="set-card__head">
          <h3>订阅状态</h3>
          <label class="toggle">
            <input type="checkbox">
            <span class="toggle__track" aria-hidden="true"></span>
            <span class="visually-hidden">订阅状态提醒开关</span>
          </label>
        </div>
        <p>当前周期与续订安排在这里看，到期前会收到提醒。</p>
      </div>

      <div class="set-card">
        <div class="set-card__head">
          <h3>语言与显示</h3>
          <label class="toggle">
            <input type="checkbox">
            <span class="toggle__track" aria-hidden="true"></span>
            <span class="visually-hidden">语言与显示开关</span>
          </label>
        </div>
        <p>界面语言、字号与深色显示偏好，按自己的阅读习惯调。</p>
      </div>

      <div class="set-card">
        <div class="set-card__head">
          <h3>账号安全</h3>
          <label class="toggle">
            <input type="checkbox" checked>
            <span class="toggle__track" aria-hidden="true"></span>
            <span class="visually-hidden">账号安全提醒开关</span>
          </label>
        </div>
        <p>登录设备与验证方式集中管理，异常登录提示可单独打开。</p>
      </div>
    </div>

    <figure class="settings-frame">
      <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="六组细边框设置模块排成控制台面板，局部霓虹青开关处于点亮状态" loading="lazy" decoding="async">
    </figure>
  </section>

  <section class="sec wrap" id="checklist" data-reveal>
    <div class="sec-head">
      <span class="sec-head__no">07</span>
      <h2>订阅前，把这六项过一遍</h2>
      <p>逐条勾选，确认自己已经想清楚再往下走；有卡住的地方，先把问题记下来。</p>
    </div>

    <div class="check-list">
      <label class="check">
        <input type="checkbox">
        <span class="check__box" aria-hidden="true"></span>
        <span class="check__text">常用设备与登录账号一致，收藏同步才能顺利接上。</span>
      </label>
      <label class="check">
        <input type="checkbox">
        <span class="check__box" aria-hidden="true"></span>
        <span class="check__text">月付、季付、年付三种节奏都看过了，已经选出适合自己的一档。</span>
      </label>
      <label class="check">
        <input type="checkbox">
        <span class="check__box" aria-hidden="true"></span>
        <span class="check__text">清楚六项权益里哪几项是自己真的会用到的，收藏同步与更新提醒通常最先派上用场。</span>
      </label>
      <label class="check">
        <input type="checkbox">
        <span class="check__box" aria-hidden="true"></span>
        <span class="check__text">订阅与续订的相关规则已经读过，条文在<a href="/terms-of-use/">使用条款</a>里可以逐条看。</span>
      </label>
      <label class="check">
        <input type="checkbox">
        <span class="check__box" aria-hidden="true"></span>
        <span class="check__text">想好了收藏夹怎么分册，20 个收藏夹按主题划分，之后找内容更省时间。</span>
      </label>
      <label class="check">
        <input type="checkbox">
        <span class="check__box" aria-hidden="true"></span>
        <span class="check__text">拿不准的问题先在<a href="/answers/">答疑中心</a>搜一遍，仍没答案再<a href="/contact/">提交工单</a>。</span>
      </label>
    </div>

    <div class="closing">
      <p>订阅前还想确认信息怎么被处理，可以读<a href="/data-protection/">数据保护说明</a>；想看最近的功能调整，去<a href="/column/">更新专栏</a>翻改版记录。</p>
      <div class="closing__actions">
        <a class="btn btn--gold" href="/contact/">找客服问一句</a>
        <a class="btn btn--ghost" href="/answers/">进答疑中心</a>
      </div>
    </div>
  </section>
</main>