.page-products {
  --sv-hair: rgba(36, 26, 20, 0.16);
  --sv-soft: rgba(36, 26, 20, 0.08);
  --sv-accent: var(--dune);
  background: var(--sand-cream);
  color: var(--ink);
}

.page-products .sv-container {
  width: min(calc(100% - 2 * var(--gutter)), var(--shell));
  margin-inline: auto;
}

.page-products .sv-topbar {
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--sv-hair);
}

.page-products .breadcrumb__list a {
  color: var(--teal);
  text-decoration: none;
}

.page-products .breadcrumb__list a:hover {
  text-decoration: underline;
}

/* ---------- 首屏 ---------- */
.page-products .sv-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.8rem, 5vw, 3.2rem) clamp(2.2rem, 6vw, 3.8rem);
  background:
    radial-gradient(120% 90% at 90% -10%, rgba(240, 180, 74, 0.3), transparent 62%),
    var(--sand-cream);
}

.page-products .sv-hero__shape {
  position: absolute;
  z-index: 0;
  top: -28%;
  right: -16%;
  width: min(720px, 76vw);
  height: 156%;
  background: linear-gradient(150deg, var(--dune) 0%, var(--poplar) 58%, var(--grape) 100%);
  opacity: 0.17;
  clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-products .sv-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
  align-items: end;
}

.page-products .sv-hero__copy h1 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 16em;
}

.page-products .sv-hero__copy .lead {
  margin-block: 0.9rem 0;
  max-width: 34em;
  color: var(--stone);
  font-size: var(--step0);
  line-height: 1.75;
}

.page-products .sv-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block-start: 1.3rem;
}

.page-products .sv-hero__mark {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
}

.page-products .sv-hero__num {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 15vw, 8.5rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--grape);
}

.page-products .sv-hero__cap {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--stone);
  padding-block-end: 0.6rem;
  border-block-end: 3px solid var(--poplar);
}

@media (min-width: 900px) {
  .page-products .sv-hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .page-products .sv-hero__mark {
    justify-content: flex-end;
  }
}

/* ---------- 通用区块 ---------- */
.page-products .sv-sec {
  padding-block: clamp(2.4rem, 6vw, 4.2rem);
}

.page-products .sv-sec--cream {
  background: var(--sand-cream);
}

.page-products .sv-sec--paper {
  background: var(--sand-paper);
}

.page-products .sv-sec--dark {
  background: var(--poplar-ink);
  color: var(--sand-cream);
}

.page-products .sv-head {
  max-width: 46rem;
  margin-block-end: clamp(1.4rem, 3.5vw, 2.2rem);
}

.page-products .sv-head--split {
  max-width: none;
  display: grid;
  gap: 0.8rem;
}

.page-products .sv-head__title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step2);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-products .sv-head .lead {
  margin-block: 0.75rem 0;
  font-size: var(--step0);
  line-height: 1.75;
  color: var(--stone);
}

.page-products .sv-sec--dark .sv-head .lead {
  color: rgba(246, 239, 225, 0.78);
}

@media (min-width: 880px) {
  .page-products .sv-head--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: 2rem;
  }
  .page-products .sv-head--split .lead {
    margin-block-start: 0;
  }
}

.page-products .sv-figure {
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  background: var(--sand-paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  overflow: hidden;
}

.page-products .sv-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .sv-figure figcaption {
  padding: 0.7rem 1rem 0.9rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--stone);
}

.page-products .sv-sec--dark .sv-figure {
  background: rgba(246, 239, 225, 0.08);
}

.page-products .sv-sec--dark .sv-figure figcaption {
  color: rgba(246, 239, 225, 0.72);
}

/* ---------- 四板块 ---------- */
.page-products .sv-pano {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .sv-pano__item {
  position: relative;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--sand-paper);
  border-block-start: 4px solid var(--dune);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-products .sv-pano__idx {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--grape);
  letter-spacing: 0.06em;
}

.page-products .sv-pano__name {
  margin: 0.35rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: var(--step1);
  font-weight: 800;
}

.page-products .sv-pano__item p {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--stone);
}

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

@media (min-width: 1080px) {
  .page-products .sv-pano {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* ---------- 人群方案 ---------- */
.page-products .sv-plans {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .sv-rails__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.14em;
  color: var(--stone);
}

.page-products .sv-rails__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--sv-hair);
}

.page-products .sv-rail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.62rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px solid var(--sv-hair);
  transition: background 0.2s ease, color 0.2s ease;
}

.page-products .sv-rail__idx {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--dune);
}

.page-products .sv-rail__name {
  font-size: var(--step0);
  font-weight: 700;
}

.page-products .sv-rail__n {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--grape);
}

.page-products .sv-rail:hover,
.page-products .sv-rail:focus-visible {
  background: var(--poplar-ink);
  color: var(--sand-cream);
}

.page-products .sv-rail:hover .sv-rail__idx,
.page-products .sv-rail:focus-visible .sv-rail__idx {
  color: var(--glow);
}

.page-products .sv-rail:hover .sv-rail__n,
.page-products .sv-rail:focus-visible .sv-rail__n {
  color: var(--sand-cream);
}

.page-products .sv-rails__fig {
  margin: 1rem 0 0;
  background: var(--sand-cream);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  overflow: hidden;
}

.page-products .sv-rails__fig img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

.page-products .sv-rails__fig figcaption {
  padding: 0.55rem 0.8rem 0.7rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--stone);
}

.page-products .sv-cards {
  display: grid;
  gap: 0.9rem;
}

.page-products .sv-plan {
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--sand-cream);
  border-inline-start: 5px solid var(--sv-accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-products .sv-plan:nth-child(1),
.page-products .sv-plan:nth-child(3) {
  --sv-accent: var(--teal);
}

.page-products .sv-plan:nth-child(2),
.page-products .sv-plan:nth-child(5) {
  --sv-accent: var(--poplar);
}

.page-products .sv-plan:nth-child(4) {
  --sv-accent: var(--grape);
}

.page-products .sv-plan:nth-child(6) {
  --sv-accent: var(--dune);
}

.page-products .sv-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.page-products .sv-plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step1);
  font-weight: 800;
}

.page-products .sv-plan__scene {
  margin: 0.6rem 0 0.85rem;
  font-size: var(--step0);
  line-height: 1.75;
  color: var(--stone);
}

.page-products .sv-plan__spec {
  margin: 0;
  display: grid;
  gap: 0.4rem;
  border-block-start: 1px dashed var(--sv-hair);
  padding-block-start: 0.75rem;
}

.page-products .sv-plan__spec > div {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  gap: 0.6rem;
  align-items: baseline;
}

.page-products .sv-plan__spec dt {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  color: var(--dune);
}

.page-products .sv-plan__spec dd {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink);
}

.page-products .sv-plan__link {
  display: inline-block;
  margin-block-start: 0.95rem;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  border-block-end: 2px solid currentColor;
}

.page-products .sv-plan__link:hover {
  color: var(--poplar);
}

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

@media (min-width: 980px) {
  .page-products .sv-plans {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }
  .page-products .sv-rails {
    position: sticky;
    top: calc(var(--bar-h) + 1.2rem);
  }
}

/* ---------- 导航说明 ---------- */
.page-products .sv-keyline {
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
  padding: 0.9rem 1rem;
  background: var(--sand-paper);
  border-inline-start: 5px solid var(--grape);
  font-size: var(--step0);
  line-height: 1.7;
  color: var(--ink);
}

.page-products .sv-navmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-block-end: clamp(1.3rem, 3vw, 2rem);
}

.page-products .sv-navmap__zone {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem 1.9rem;
  background: var(--sand-cream);
  border: 1px solid var(--sv-hair);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.page-products .sv-navmap__zone::after {
  content: "";
  position: absolute;
  inset: auto 0.9rem 0.7rem;
  height: 20px;
  background: repeating-linear-gradient(
    to bottom,
    var(--sv-soft) 0 4px,
    transparent 4px 8px
  );
}

.page-products .sv-navmap__idx {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--dune);
}

.page-products .sv-navmap__zone strong {
  font-family: var(--font-display);
  font-size: var(--step0);
  font-weight: 800;
}

.page-products .sv-navmap__n {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--grape);
}

.page-products .sv-notes {
  display: grid;
  gap: 1rem;
  margin-block-start: clamp(1.3rem, 3vw, 1.9rem);
}

.page-products .sv-note {
  padding-block-start: 0.8rem;
  border-block-start: 3px solid var(--poplar);
}

.page-products .sv-note__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step0);
  font-weight: 800;
}

.page-products .sv-note p {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--stone);
}

@media (min-width: 760px) {
  .page-products .sv-navmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-products .sv-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
  }
}

/* ---------- 适配清单 ---------- */
.page-products .sv-fit {
  display: grid;
  gap: 1.1rem;
  margin-block-end: clamp(1.4rem, 3vw, 2rem);
}

.page-products .sv-fit__col {
  padding: 1rem 1rem 1.15rem;
  background: rgba(246, 239, 225, 0.07);
  border-block-start: 3px solid var(--glow);
}

.page-products .sv-fit__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step0);
  font-weight: 800;
  color: var(--sand-cream);
}

.page-products .sv-fit__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.page-products .sv-fit__list li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: var(--step-1);
  line-height: 1.68;
  color: rgba(246, 239, 225, 0.86);
}

.page-products .sv-fit__box {
  font-size: 1.05em;
  line-height: 1.6;
  color: var(--glow);
}

.page-products .sv-fit__note {
  margin: 0;
  padding-block-start: 0.9rem;
  border-block-start: 1px dashed rgba(246, 239, 225, 0.28);
  font-size: var(--step-1);
  line-height: 1.72;
  color: rgba(246, 239, 225, 0.8);
}

@media (min-width: 820px) {
  .page-products .sv-fit {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

/* ---------- 流程 ---------- */
.page-products .sv-flow {
  display: grid;
  gap: 1rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
}

.page-products .sv-step {
  position: relative;
  padding: 1rem 1rem 1.1rem;
  background: var(--sand-paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-products .sv-step__idx {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: var(--poplar-ink);
  color: var(--glow);
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.1em;
}

.page-products .sv-step__title {
  margin: 0.6rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: var(--step0);
  font-weight: 800;
  color: var(--ink);
}

.page-products .sv-step__body {
  margin: 0 0 0.6rem;
  font-size: var(--step-1);
  line-height: 1.68;
  color: var(--stone);
}

.page-products .sv-step__out,
.page-products .sv-step__who {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
}

.page-products .sv-step__out span,
.page-products .sv-step__who span {
  display: inline-block;
  min-width: 3.6em;
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: 0.08em;
  color: var(--grape);
}

@media (min-width: 880px) {
  .page-products .sv-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .page-products .sv-step::after {
    content: "";
    position: absolute;
    top: 1.55rem;
    right: -0.95rem;
    width: 0.7rem;
    height: 0.7rem;
    border-block-start: 2px solid var(--dune);
    border-inline-end: 2px solid var(--dune);
    transform: rotate(45deg);
  }
}

/* ---------- 对比表 ---------- */
.page-products .sv-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-products .sv-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  text-align: start;
}

.page-products .sv-table caption {
  caption-side: top;
  text-align: start;
  padding-block-end: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  letter-spacing: 0.1em;
  color: var(--stone);
}

.page-products .sv-table th,
.page-products .sv-table td {
  padding: 0.72rem 0.8rem;
  font-size: var(--step-1);
  line-height: 1.6;
  text-align: start;
  vertical-align: top;
}

.page-products .sv-table thead th {
  background: var(--poplar-ink);
  color: var(--sand-cream);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.page-products .sv-table tbody th {
  font-weight: 800;
  color: var(--ink);
  border-inline-start: 4px solid var(--dune);
}

.page-products .sv-table tbody td {
  color: var(--stone);
}

.page-products .sv-table tbody tr:nth-child(odd) {
  background: var(--sand-cream);
}

.page-products .sv-table tbody tr:nth-child(even) {
  background: var(--sand-paper);
}

.page-products .sv-advice {
  margin-block-start: clamp(1.3rem, 3vw, 1.9rem);
  padding: 1rem 1.1rem 1.15rem;
  background: var(--sand-cream);
  border-inline-start: 5px solid var(--grape);
}

.page-products .sv-advice__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step0);
  font-weight: 800;
}

.page-products .sv-advice p {
  margin: 0;
  font-size: var(--step0);
  line-height: 1.78;
  color: var(--stone);
}

/* ---------- 结尾 ---------- */
.page-products .sv-cta {
  background: var(--poplar-ink);
  color: var(--sand-cream);
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
}

.page-products .sv-cta__inner {
  display: grid;
  gap: 1.4rem;
}

.page-products .sv-cta .eyebrow {
  color: var(--glow);
}

.page-products .sv-cta__title {
  margin: 0.4rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: var(--step2);
  font-weight: 800;
  line-height: 1.2;
}

.page-products .sv-cta__copy p {
  margin: 0;
  max-width: 40em;
  font-size: var(--step0);
  line-height: 1.78;
  color: rgba(246, 239, 225, 0.82);
}

.page-products .sv-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: flex-start;
}

@media (min-width: 860px) {
  .page-products .sv-cta__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
  }
  .page-products .sv-cta__acts {
    justify-content: flex-end;
  }
}