.page-products .pd-crumb {
  padding-block: 18px 6px;
}

.page-products .pd-hero {
  background:
    radial-gradient(58% 62% at 12% 8%, rgba(217, 237, 242, 0.95) 0%, rgba(217, 237, 242, 0) 62%),
    radial-gradient(48% 54% at 92% 22%, rgba(221, 232, 216, 0.9) 0%, rgba(221, 232, 216, 0) 66%),
    radial-gradient(70% 60% at 68% 108%, rgba(244, 201, 93, 0.28) 0%, rgba(244, 201, 93, 0) 60%),
    var(--lx-cream);
  padding-bottom: clamp(36px, 7vw, 76px);
}

.page-products .pd-hero__inner {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: start;
}

.page-products .pd-hero__copy h1 {
  font-family: var(--lx-font-display);
  font-weight: 900;
  font-size: clamp(32px, 7.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lx-deep);
  margin: 10px 0 0;
  max-width: 15em;
}

.page-products .pd-hero__lead {
  font-family: var(--lx-font-body);
  font-size: 17px;
  line-height: 1.82;
  color: var(--lx-ink);
  margin: 18px 0 0;
  max-width: 34em;
}

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

.page-products .pd-hero__facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--lx-line);
  display: grid;
  gap: 14px;
}

.page-products .pd-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-products .pd-hero__facts strong {
  font-family: var(--lx-font-mono);
  font-size: 24px;
  color: var(--lx-blue);
  letter-spacing: -0.01em;
}

.page-products .pd-hero__facts span {
  font-family: var(--lx-font-ui);
  font-size: 14px;
  color: var(--lx-gray);
}

.page-products .pd-hero__stack {
  display: grid;
  gap: 14px;
}

.page-products .pd-stack-card {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius-lg);
  padding: 20px 22px;
  box-shadow: var(--lx-shadow-card);
  position: relative;
  overflow: hidden;
}

.page-products .pd-stack-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--lx-blue);
}

.page-products .pd-stack-card--b::before {
  background: var(--lx-bamboo);
}

.page-products .pd-stack-card--c::before {
  background: var(--lx-brick);
}

.page-products .pd-stack-card--a {
  background: linear-gradient(140deg, #ffffff 0%, var(--lx-blue-soft) 100%);
}

.page-products .pd-stack-card--b {
  background: linear-gradient(140deg, #ffffff 0%, var(--lx-bamboo-soft) 100%);
}

.page-products .pd-stack-card--c {
  background: linear-gradient(140deg, var(--lx-paper) 0%, #f6e6cf 100%);
}

.page-products .pd-stack-card__tag {
  font-family: var(--lx-font-ui);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--lx-gray);
  margin: 0;
}

.page-products .pd-stack-card__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 26px);
  color: var(--lx-deep);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}

.page-products .pd-stack-card__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-section {
  padding-block: clamp(44px, 8vw, 86px);
}

.page-products .pd-section--paper {
  background: var(--lx-paper);
}

.page-products .pd-head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(26px, 5vw, 44px);
}

.page-products .pd-head .lx-section__index {
  font-family: var(--lx-font-mono);
  font-size: clamp(44px, 9vw, 76px);
  line-height: 0.9;
  color: var(--lx-blue);
  opacity: 0.22;
}

.page-products .pd-head .lx-section__title {
  font-family: var(--lx-font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-head .lx-section__note {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--lx-gray);
  margin: 8px 0 0;
}

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

.page-products .pd-line {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--lx-shadow-card);
}

.page-products .pd-line--wide {
  background: linear-gradient(160deg, var(--lx-paper) 0%, var(--lx-blue-soft) 130%);
  border-color: rgba(20, 92, 120, 0.24);
}

.page-products .pd-line--tint {
  background: linear-gradient(160deg, var(--lx-paper) 0%, var(--lx-bamboo-soft) 130%);
}

.page-products .pd-line__no {
  font-family: var(--lx-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lx-brick-deep);
  margin: 0;
}

.page-products .pd-line__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(21px, 4.4vw, 27px);
  color: var(--lx-deep);
  margin: 6px 0 0;
}

.page-products .pd-line__text {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 1.82;
  color: var(--lx-ink);
  margin: 10px 0 0;
}

.page-products .pd-line__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .pd-line__list li {
  font-family: var(--lx-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lx-deep);
  padding-left: 18px;
  position: relative;
}

.page-products .pd-line__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--lx-bamboo);
}

.page-products .pd-switch {
  margin-top: clamp(26px, 5vw, 42px);
  background: var(--lx-cream);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
}

.page-products .pd-switch__lead {
  font-family: var(--lx-font-ui);
  font-size: 15px;
  color: var(--lx-deep);
  margin: 0 0 14px;
}

.page-products .pd-switch__group {
  display: grid;
  gap: 10px;
}

.page-products .pd-switch__item {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius);
  padding: 4px 16px;
}

.page-products .pd-switch__item .lx-accordion__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--lx-deep);
  padding: 14px 0;
  cursor: pointer;
}

.page-products .pd-switch__item .lx-accordion__body p {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lx-ink);
  margin: 0 0 16px;
}

.page-products .pd-plans {
  display: grid;
  gap: 22px;
}

.page-products .pd-plans__cards {
  display: grid;
  gap: 14px;
}

.page-products .pd-plan {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}

.page-products .pd-plan--active {
  background: linear-gradient(165deg, var(--lx-paper) 0%, var(--lx-blue-soft) 100%);
  border-color: var(--lx-blue);
  box-shadow: var(--lx-shadow-lift);
}

.page-products .pd-plan__label {
  align-self: flex-start;
  font-family: var(--lx-font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--lx-paper);
  background: var(--lx-bamboo);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0;
}

.page-products .pd-plan--active .pd-plan__label {
  background: var(--lx-blue);
}

.page-products .pd-plan__name {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--lx-deep);
  margin: 14px 0 0;
}

.page-products .pd-plan__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-plan__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--lx-line);
  display: grid;
  gap: 8px;
}

.page-products .pd-plan__list li {
  font-family: var(--lx-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--lx-deep);
  padding-left: 16px;
  position: relative;
}

.page-products .pd-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lx-brick);
}

.page-products .pd-plans__figure,
.page-products .pd-cases__figure,
.page-products .pd-catalog__figure,
.page-products .pd-steps__figure {
  margin: 0;
}

.page-products .pd-plans__media,
.page-products .pd-cases__media,
.page-products .pd-catalog__media,
.page-products .pd-steps__media {
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  background: var(--lx-cream);
}

.page-products .pd-plans__media img,
.page-products .pd-cases__media img,
.page-products .pd-catalog__media img,
.page-products .pd-steps__media img,
.page-products .pd-scene__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .lx-figure__caption {
  font-family: var(--lx-font-ui);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--lx-gray);
  margin-top: 10px;
}

.page-products .pd-table-wrap {
  margin-top: clamp(24px, 5vw, 38px);
  border-radius: var(--lx-radius);
  border: 1px solid var(--lx-line);
  overflow-x: auto;
  background: var(--lx-paper);
}

.page-products .pd-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--lx-font-ui);
  font-size: 14px;
}

.page-products .pd-table__caption {
  text-align: left;
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--lx-deep);
  padding: 16px 16px 12px;
}

.page-products .pd-table thead th {
  background: var(--lx-blue-soft);
  color: var(--lx-deep);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--lx-line);
  white-space: nowrap;
}

.page-products .pd-table tbody th {
  font-weight: 600;
  color: var(--lx-deep);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lx-line-soft);
  white-space: nowrap;
}

.page-products .pd-table tbody td {
  color: var(--lx-ink);
  padding: 12px 16px;
  border-bottom: 1px solid var(--lx-line-soft);
  white-space: nowrap;
}

.page-products .pd-table tbody tr:nth-child(even) td,
.page-products .pd-table tbody tr:nth-child(even) th {
  background: rgba(217, 237, 242, 0.28);
}

.page-products .pd-plans__note {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lx-gray);
  margin: 16px 0 0;
}

.page-products .pd-plans__note a {
  color: var(--lx-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pd-cases {
  display: grid;
  gap: 24px;
}

.page-products .pd-cases__panel {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: 18px 16px;
  box-shadow: var(--lx-shadow-card);
}

.page-products .pd-searchbar {
  background: var(--lx-blue-soft);
  border-radius: var(--lx-radius);
  padding: 14px 16px;
}

.page-products .pd-searchbar__label {
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lx-blue);
  margin: 0;
}

.page-products .pd-searchbar__query {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(19px, 4.4vw, 24px);
  color: var(--lx-deep);
  margin: 6px 0 0;
}

.page-products .pd-searchbar__meta {
  font-family: var(--lx-font-ui);
  font-size: 13.5px;
  color: var(--lx-gray);
  margin: 6px 0 0;
}

.page-products .pd-filterbar {
  margin-top: 14px;
}

.page-products .pd-filterbar--tight {
  margin-top: 0;
}

.page-products .lx-chip {
  font-family: var(--lx-font-ui);
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--lx-cream);
  border: 1px solid var(--lx-line);
  color: var(--lx-deep);
  white-space: nowrap;
}

.page-products .lx-chip[data-active="true"] {
  background: var(--lx-blue);
  border-color: var(--lx-blue);
  color: var(--lx-paper);
  font-weight: 600;
}

.page-products .pd-results {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--lx-line-soft);
}

.page-products .pd-result__title {
  grid-column: 1 / 2;
  font-family: var(--lx-font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-result__meta {
  grid-column: 1 / 2;
  font-family: var(--lx-font-mono);
  font-size: 12.5px;
  color: var(--lx-gray);
  margin: 0;
}

.page-products .pd-result__flag {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--lx-font-ui);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lx-bamboo-soft);
  color: var(--lx-bamboo);
  white-space: nowrap;
}

.page-products .pd-result__flag--plain {
  background: var(--lx-cream);
  color: var(--lx-gray);
}

.page-products .lx-mark {
  background: linear-gradient(transparent 54%, var(--lx-mark) 54%);
  color: var(--lx-ink);
  padding: 0 1px;
}

.page-products .pd-export {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  align-items: center;
  background: var(--lx-cream);
  border-radius: var(--lx-radius);
  padding: 14px 16px;
}

.page-products .pd-export__text {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--lx-ink);
  margin: 0;
}

.page-products .pd-export__text strong {
  color: var(--lx-brick-deep);
}

.page-products .pd-export__btn {
  justify-self: start;
}

.page-products .pd-case-notes {
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .pd-case-notes .lx-card__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-case-notes .lx-card__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-catalog {
  display: grid;
  gap: 22px;
}

.page-products .pd-catalog__tabs {
  background: var(--lx-blue-soft);
  border-radius: var(--lx-radius-lg);
  padding: 18px 16px;
}

.page-products .pd-catalog__tabs-lead {
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--lx-blue);
  margin: 0 0 12px;
}

.page-products .pd-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.page-products .pd-tabs__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--lx-font-ui);
  font-size: 14.5px;
  color: var(--lx-deep);
  background: var(--lx-paper);
  border-radius: var(--lx-radius-sm);
  padding: 11px 14px;
  border-left: 4px solid transparent;
}

.page-products .pd-tabs__item span {
  font-family: var(--lx-font-mono);
  font-size: 12px;
  color: var(--lx-gray);
}

.page-products .pd-tabs__item--on {
  border-left-color: var(--lx-brick);
  font-weight: 700;
  box-shadow: var(--lx-shadow-card);
}

.page-products .pd-catalog__tabs-note {
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lx-blue);
  margin: 12px 0 0;
}

.page-products .pd-catalog__body {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: 18px 16px;
}

.page-products .pd-catalog__filter {
  margin-bottom: 14px;
}

.page-products .pd-catalog__filter-label {
  display: block;
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--lx-gray);
  margin-bottom: 8px;
}

.page-products .pd-entries {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 14px 14px;
  border-radius: var(--lx-radius);
  background: var(--lx-cream);
  border-left: 3px solid var(--lx-bamboo);
}

.page-products .pd-entry__no {
  font-family: var(--lx-font-mono);
  font-size: 12.5px;
  color: var(--lx-brick-deep);
  margin: 0;
}

.page-products .pd-entry__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-entry__meta {
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lx-gray);
  margin: 4px 0 0;
}

.page-products .pd-catalog__foot {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--lx-gray);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--lx-line);
}

.page-products .pd-catalog__figure {
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .pd-scenes {
  display: grid;
  gap: 14px;
}

.page-products .pd-scene {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
}

.page-products .pd-scene--big {
  background: linear-gradient(155deg, var(--lx-paper) 0%, var(--lx-blue-soft) 120%);
  border-color: rgba(20, 92, 120, 0.2);
}

.page-products .pd-scene--side {
  background: var(--lx-bamboo-soft);
  border-color: rgba(79, 107, 74, 0.22);
}

.page-products .pd-scene__tag {
  align-self: flex-start;
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--lx-brick-deep);
  margin: 0;
}

.page-products .pd-scene__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(19px, 4.2vw, 24px);
  line-height: 1.3;
  color: var(--lx-deep);
  margin: 8px 0 0;
}

.page-products .pd-scene__text {
  font-family: var(--lx-font-body);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--lx-ink);
  margin: 10px 0 0;
}

.page-products .pd-scene__media {
  margin-top: 16px;
  border-radius: var(--lx-radius);
  overflow: hidden;
  max-width: 320px;
}

.page-products .pd-deliver {
  margin-top: clamp(24px, 5vw, 38px);
  background: var(--lx-cream);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
}

.page-products .pd-deliver__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--lx-deep);
  margin: 0 0 16px;
}

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

.page-products .pd-deliver__list li {
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 3px solid var(--lx-blue);
}

.page-products .pd-deliver__list strong {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--lx-deep);
}

.page-products .pd-deliver__list span {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--lx-gray);
}

.page-products .pd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: pdstep;
}

.page-products .pd-step {
  background: var(--lx-cream);
  border-radius: var(--lx-radius-lg);
  padding: 20px 20px 22px;
  border-bottom: 3px solid var(--lx-blue);
}

.page-products .pd-step:nth-child(2) {
  border-bottom-color: var(--lx-bamboo);
}

.page-products .pd-step:nth-child(3) {
  border-bottom-color: var(--lx-brick);
}

.page-products .pd-step:nth-child(4) {
  border-bottom-color: var(--lx-deep);
}

.page-products .pd-step__no {
  font-family: var(--lx-font-mono);
  font-size: 34px;
  line-height: 1;
  color: var(--lx-blue);
  opacity: 0.32;
  display: block;
}

.page-products .pd-step__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--lx-deep);
  margin: 10px 0 0;
}

.page-products .pd-step__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-steps__figure {
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .pd-support {
  margin-top: clamp(22px, 4vw, 34px);
  display: grid;
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--lx-radius-lg);
  background: linear-gradient(140deg, var(--lx-blue-soft) 0%, var(--lx-paper) 90%);
  border: 1px solid rgba(20, 92, 120, 0.18);
}

.page-products .pd-support__text {
  font-family: var(--lx-font-body);
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--lx-ink);
  margin: 0;
}

.page-products .pd-support .lx-btn {
  justify-self: start;
}

.page-products .pd-more {
  display: grid;
  gap: 24px;
}

.page-products .pd-more__faq {
  display: grid;
  gap: 10px;
}

.page-products .pd-more__item {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  padding: 4px 16px;
}

.page-products .pd-more__item .lx-accordion__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--lx-deep);
  padding: 15px 0;
  cursor: pointer;
}

.page-products .pd-more__item .lx-accordion__body p {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lx-ink);
  margin: 0 0 18px;
}

.page-products .pd-more__links {
  display: grid;
  gap: 10px;
}

.page-products .pd-link-card {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--lx-radius);
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  text-decoration: none;
  transition: transform 240ms var(--lx-ease), border-color 240ms var(--lx-ease);
}

.page-products .pd-link-card:hover {
  transform: translateX(4px);
  border-color: var(--lx-blue);
}

.page-products .pd-link-card__label {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--lx-deep);
}

.page-products .pd-link-card__text {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lx-gray);
}

.page-products .pd-link-card--accent {
  background: linear-gradient(140deg, var(--lx-blue-soft) 0%, var(--lx-paper) 100%);
  border-color: rgba(20, 92, 120, 0.28);
}

.page-products .pd-link-card--accent .pd-link-card__label {
  color: var(--lx-blue);
}

.page-products .lx-btn[data-state="copied"] {
  background: var(--lx-bamboo);
  color: var(--lx-paper);
}

@media (min-width: 640px) {
  .page-products .pd-hero__facts {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 26px;
  }

  .page-products .pd-hero__facts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .page-products .pd-plans__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-catalog__body {
    padding: 22px 22px;
  }

  .page-products .pd-entry {
    grid-template-columns: 96px 1fr;
    align-items: start;
    gap: 4px 14px;
  }

  .page-products .pd-export {
    grid-template-columns: 1fr auto;
  }

  .page-products .pd-deliver__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 26px;
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .pd-more__links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .page-products .pd-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }

  .page-products .pd-hero__stack {
    gap: 16px;
  }

  .page-products .pd-stack-card {
    padding: 24px 26px;
  }

  .page-products .pd-stack-card:nth-child(1) {
    transform: translateX(-16px);
  }

  .page-products .pd-stack-card:nth-child(2) {
    transform: translateX(20px);
  }

  .page-products .pd-stack-card:nth-child(3) {
    transform: translateX(0);
  }

  .page-products .pd-head {
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .page-products .pd-head .lx-section__index {
    font-size: clamp(64px, 7vw, 96px);
  }

  .page-products .pd-lines {
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas:
      "wide b"
      "wide c";
    gap: 18px;
  }

  .page-products .pd-line--wide {
    grid-area: wide;
    padding: 32px 30px;
  }

  .page-products .pd-line:not(.pd-line--wide):nth-of-type(2) {
    grid-area: b;
  }

  .page-products .pd-line:not(.pd-line--wide):nth-of-type(3) {
    grid-area: c;
  }

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

  .page-products .pd-plans {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
    gap: 28px;
  }

  .page-products .pd-cases {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: 30px;
  }

  .page-products .pd-cases__panel {
    padding: 24px 24px;
  }

  .page-products .pd-catalog {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .page-products .pd-scenes {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "big big side"
      "one two side";
    gap: 16px;
  }

  .page-products .pd-scene--big {
    grid-area: big;
    padding: 28px 28px;
  }

  .page-products .pd-scene--side {
    grid-area: side;
  }

  .page-products .pd-scene:nth-child(2) {
    grid-area: one;
  }

  .page-products .pd-scene:nth-child(3) {
    grid-area: two;
  }

  .page-products .pd-deliver {
    padding: 28px 30px;
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .page-products .pd-support {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 26px 30px;
  }

  .page-products .pd-more {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-link-card,
  .page-products .pd-link-card:hover {
    transform: none;
    transition: none;
  }
}

<main id="main-content" class="page-products">
  <div class="lx-container">
    <nav class="lx-breadcrumb pd-crumb" aria-label="面包屑">
      <ol class="lx-breadcrumb__list">
        <li class="lx-breadcrumb__item"><a class="lx-breadcrumb__link" href="/">首页</a></li>
        <li class="lx-breadcrumb__item"><span class="lx-breadcrumb__current">服务与目录</span></li>
      </ol>
    </nav>
  </div>

  <section class="lx-hero pd-hero">
    <div class="lx-container pd-hero__inner">
      <div class="pd-hero__copy">
        <p class="lx-eyebrow">服务与目录</p>
        <h1>三本工具册摊在桌上，先读、再查、最后导出来用</h1>
        <p class="pd-hero__lead">乐享中文把会员权益、站内检索案例与国内内容目录做成三件可以直接上手的事：新手从阅读开始熟悉分类，熟手用关键词和分类快速定位，需要交付的时候把结果导出成 CSV 或清单文本带走。无论你是个人读者，还是要把资料交给五人以上的小组，都能在这里找到对应的版本与开通方式。</p>
        <div class="pd-hero__actions">
          <a class="lx-btn lx-btn--primary" href="#plans">看会员权益对照</a>
          <a class="lx-btn lx-btn--ghost" href="/find-us/">咨询开通与席位</a>
        </div>
        <ul class="pd-hero__facts">
          <li><strong>3.6 万</strong><span>位会员在使用</span></li>
          <li><strong>2,400</strong><span>个检索案例</span></li>
          <li><strong>4.8 万</strong><span>条目录条目</span></li>
        </ul>
      </div>

      <div class="pd-hero__stack">
        <article class="pd-stack-card pd-stack-card--a">
          <p class="pd-stack-card__tag">会员权益</p>
          <h2 class="pd-stack-card__title">阅读 · 检索 · 导出</h2>
          <p class="pd-stack-card__text">三档版本按这三类权益组合，新手也能一眼看清自己缺哪一块。</p>
        </article>
        <article class="pd-stack-card pd-stack-card--b">
          <p class="pd-stack-card__tag">检索案例</p>
          <h2 class="pd-stack-card__title">760 个对照视图</h2>
          <p class="pd-stack-card__text">同一条问题两边并排看，答案往往藏在差异里。</p>
        </article>
        <article class="pd-stack-card pd-stack-card--c">
          <p class="pd-stack-card__tag">内容目录</p>
          <h2 class="pd-stack-card__title">18 个一级分类</h2>
          <p class="pd-stack-card__text">按地区、主题、批次三条线索翻，像翻街巷里的门牌。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="lx-section pd-section" id="overview" aria-labelledby="overview-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">01</span>
        <div>
          <h2 class="lx-section__title" id="overview-title">三条服务线，各自解决一段路</h2>
          <p class="lx-section__note">不清楚该从哪条开始，就看你现在卡在哪一步。</p>
        </div>
      </div>

      <div class="pd-lines">
        <article class="pd-line pd-line--wide">
          <p class="pd-line__no" aria-hidden="true">A</p>
          <h3 class="pd-line__title">会员权益</h3>
          <p class="pd-line__text">给刚接触乐享的人一条清晰的入门路径。阅读版先把分类和目录的骨架走一遍，检索版把关键词、分类、批次三种筛选练熟，团队版再把席位分给同事一起用。新手看乐享会员权益，看的其实就是这条从读到查再到导出的路线。</p>
          <ul class="pd-line__list">
            <li>三档版本按阅读、检索、导出组合</li>
            <li>团队版支持 5 至 20 个席位</li>
            <li>按年度开通，席位可随组内分工调整</li>
          </ul>
        </article>

        <article class="pd-line">
          <p class="pd-line__no" aria-hidden="true">B</p>
          <h3 class="pd-line__title">检索案例合集</h3>
          <p class="pd-line__text">当你已经知道要找什么，却不确定该往哪个方向找，案例比目录更快给到参照。每条案例带着分类、批次和对照标记，翻两条就能判断这条路走不走得通。</p>
          <ul class="pd-line__list">
            <li>累计 2,400 个可检索案例</li>
            <li>其中 760 个提供对照视图</li>
          </ul>
        </article>

        <article class="pd-line pd-line--tint">
          <p class="pd-line__no" aria-hidden="true">C</p>
          <h3 class="pd-line__title">国内内容目录</h3>
          <p class="pd-line__text">从地区、主题、更新批次三个方向进入，找到条目所在的分类位置，再顺着索引签往下一层走。国内内容目录覆盖 18 个一级分类与 126 个二级分类，累计约 4.8 万条条目。</p>
          <ul class="pd-line__list">
            <li>三条线索交叉定位</li>
            <li>索引签式跳转，不打断阅读</li>
          </ul>
        </article>
      </div>

      <div class="pd-switch">
        <p class="pd-switch__lead">看看哪条线适合你现在的处境：</p>
        <div class="pd-switch__group">
          <details class="lx-accordion pd-switch__item" open>
            <summary class="lx-accordion__title">刚开始用，怕看不懂分类</summary>
            <div class="lx-accordion__body">
              <p>从阅读版进入，按地区与主题两条线各读十个条目，一周内就能熟悉目录的呼吸节奏；遇到陌生词直接跳检索，案例会告诉你它通常出现在哪些分类里。</p>
            </div>
          </details>
          <details class="lx-accordion pd-switch__item">
            <summary class="lx-accordion__title">手上有一批资料要整理</summary>
            <div class="lx-accordion__body">
              <p>用检索版的关键词加分类双筛选缩小范围，把命中结果导出成 CSV 交给表格处理，需要放进汇报材料的再导一份清单文本，粘贴即用。</p>
            </div>
          </details>
          <details class="lx-accordion pd-switch__item">
            <summary class="lx-accordion__title">小组共用，需要分头干活</summary>
            <div class="lx-accordion__body">
              <p>团队版按 5 至 20 个席位开通，编辑、检索、整理三类活儿可以分给不同成员，负责人统一看导出结果。</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

  <section class="lx-section pd-section pd-section--paper" id="plans" aria-labelledby="plans-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">02</span>
        <div>
          <h2 class="lx-section__title" id="plans-title">会员权益对照卡</h2>
          <p class="lx-section__note">阅读版、检索版、团队版，差别集中在能查多深、能带走多少。</p>
        </div>
      </div>

      <div class="pd-plans">
        <div class="pd-plans__cards">
          <article class="pd-plan">
            <p class="pd-plan__label">阅读版</p>
            <h3 class="pd-plan__name">先把目录读顺</h3>
            <p class="pd-plan__text">适合刚接触中文内容整理的个人读者，重点是把分类结构和条目写法看明白。</p>
            <ul class="pd-plan__list">
              <li>目录浏览与条目阅读</li>
              <li>检索案例阅读</li>
              <li>分类索引签跳转</li>
            </ul>
          </article>
          <article class="pd-plan pd-plan--active">
            <p class="pd-plan__label">检索版</p>
            <h3 class="pd-plan__name">把答案找得快</h3>
            <p class="pd-plan__text">适合作者、编辑与资料岗，需要反复查同一个主题并横向比较结果。</p>
            <ul class="pd-plan__list">
              <li>关键词、分类、批次三种筛选</li>
              <li>对照视图并排阅读</li>
              <li>CSV 与清单文本导出</li>
            </ul>
          </article>
          <article class="pd-plan">
            <p class="pd-plan__label">团队版</p>
            <h3 class="pd-plan__name">把活儿分下去</h3>
            <p class="pd-plan__text">适合 5 至 20 人的内容小组，检索、整理、成稿分头推进。</p>
            <ul class="pd-plan__list">
              <li>5 至 20 个席位</li>
              <li>检索版全部权益</li>
              <li>统一的导出结果</li>
            </ul>
          </article>
        </div>

        <figure class="lx-figure pd-plans__figure">
          <div class="lx-media lx-media--wide pd-plans__media">
            <img class="lx-media__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="米白桌面上摊开三张会员权益对照卡，阅读、检索、导出标签分别用竹青与海丝蓝区分">
          </div>
          <figcaption class="lx-figure__caption">三档版本按阅读、检索、导出三类权益组合，新手可以顺着卡片从左边读到右边。</figcaption>
        </figure>
      </div>

      <div class="lx-table-wrap pd-table-wrap">
        <table class="lx-table pd-table">
          <caption class="pd-table__caption">三档版本权益对照</caption>
          <thead>
            <tr>
              <th scope="col">权益项</th>
              <th scope="col">阅读版</th>
              <th scope="col">检索版</th>
              <th scope="col">团队版</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">目录条目阅读</th>
              <td>全部开放</td>
              <td>全部开放</td>
              <td>全部开放</td>
            </tr>
            <tr>
              <th scope="row">案例合集查阅</th>
              <td>可读全文</td>
              <td>可读全文</td>
              <td>可读全文</td>
            </tr>
            <tr>
              <th scope="row">关键词筛选</th>
              <td>—</td>
              <td>支持</td>
              <td>支持</td>
            </tr>
            <tr>
              <th scope="row">对照视图</th>
              <td>单条查看</td>
              <td>并排对照</td>
              <td>并排对照</td>
            </tr>
            <tr>
              <th scope="row">结果导出</th>
              <td>—</td>
              <td>CSV 与清单文本</td>
              <td>CSV 与清单文本</td>
            </tr>
            <tr>
              <th scope="row">席位数量</th>
              <td>1 人</td>
              <td>1 人</td>
              <td>5 至 20 个</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="pd-plans__note">各版本的年度费用与开票方式，可以在 <a href="/find-us/">找到我们</a> 页面按你需要的版本咨询，团队席位会按实际人数给出方案。</p>
    </div>
  </section>

  <section class="lx-section pd-section" id="cases" aria-labelledby="cases-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">03</span>
        <div>
          <h2 class="lx-section__title" id="cases-title">检索案例合集怎么用</h2>
          <p class="lx-section__note">乐享站内检索案例合集把别人走过的路标出来，你只要挑一条对得上的接着走。</p>
        </div>
      </div>

      <div class="pd-cases">
        <div class="pd-cases__panel">
          <div class="pd-searchbar">
            <p class="pd-searchbar__label">关键词</p>
            <p class="pd-searchbar__query">海上丝路 · 地方志</p>
            <p class="pd-searchbar__meta">命中 38 条，其中 12 条带对照视图</p>
          </div>

          <div class="lx-filterbar pd-filterbar">
            <span class="lx-chip" data-active="true">全部</span>
            <span class="lx-chip">地方文化</span>
            <span class="lx-chip">行业资料</span>
            <span class="lx-chip">目录整理</span>
            <span class="lx-chip">批次 -218</span>
          </div>

          <ul class="pd-results">
            <li class="pd-result">
              <p class="pd-result__title">沿海港口旧志里的物产条目归到哪个二级分类</p>
              <p class="pd-result__meta">地方文化 · <mark class="lx-mark">海上丝路</mark> · 批次 -216</p>
              <span class="pd-result__flag">对照视图</span>
            </li>
            <li class="pd-result">
              <p class="pd-result__title">同一批资料在两个版本中的条目写法差异如何取舍</p>
              <p class="pd-result__meta">目录整理 · <mark class="lx-mark">地方志</mark> · 批次 -218</p>
              <span class="pd-result__flag">对照视图</span>
            </li>
            <li class="pd-result">
              <p class="pd-result__title">小组分工时如何把检索结果拆成三份清单</p>
              <p class="pd-result__meta">行业资料 · 导出 · 批次 -214</p>
              <span class="pd-result__flag pd-result__flag--plain">清单文本</span>
            </li>
            <li class="pd-result">
              <p class="pd-result__title">关键词搜不到时，改用地区线索继续找的办法</p>
              <p class="pd-result__meta">目录整理 · <mark class="lx-mark">海上丝路</mark> · 批次 -212</p>
              <span class="pd-result__flag">对照视图</span>
            </li>
          </ul>

          <div class="pd-export">
            <p class="pd-export__text">勾中的结果可以导出成 <strong>CSV</strong> 交给表格，或导出成 <strong>清单文本</strong> 直接贴进文档。</p>
            <button class="lx-btn lx-btn--accent pd-export__btn" type="button" data-copy="案例标题,一级分类,二级分类,更新批次,对照视图,导出时间">复制导出字段</button>
          </div>
        </div>

        <figure class="lx-figure pd-cases__figure">
          <div class="lx-media lx-media--wide pd-cases__media">
            <img class="lx-media__img" src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="站内检索界面截图式画面，关键词底纹高亮，左侧分类筛选栏与右侧结果行显示对照视图标记" loading="lazy" decoding="async">
          </div>
          <figcaption class="lx-figure__caption">左边筛条件，右边看结果，命中词用底纹标出来，扫一眼就知道该点哪一条。</figcaption>
        </figure>
      </div>

      <div class="lx-grid lx-grid--3 pd-case-notes">
        <article class="lx-card lx-card--paper">
          <h3 class="lx-card__title">从问题反推分类</h3>
          <p class="lx-card__text">先把你手头的问题写成一句话，挑出两三个实词当关键词，再看命中的结果集中在哪几个二级分类，比对着分类树一层层点更快。</p>
        </article>
        <article class="lx-card lx-card--tint">
          <h3 class="lx-card__title">两条并排看差异</h3>
          <p class="lx-card__text">760 个案例提供对照视图。同一条资料在不同批次里的写法差别，往往就是判断依据所在。</p>
        </article>
        <article class="lx-card lx-card--bamboo">
          <h3 class="lx-card__title">导出前先收窄</h3>
          <p class="lx-card__text">用批次筛选把结果压到一屏之内再导出，清单会更干净，后处理的时间也省下来。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="lx-section pd-section pd-section--paper" id="catalog" aria-labelledby="catalog-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">04</span>
        <div>
          <h2 class="lx-section__title" id="catalog-title">国内内容目录怎么翻</h2>
          <p class="lx-section__note">地区、主题、批次三条线索交叉，18 个一级分类往下走到 126 个二级分类。</p>
        </div>
      </div>

      <div class="pd-catalog">
        <aside class="pd-catalog__tabs" aria-label="一级分类索引">
          <p class="pd-catalog__tabs-lead">一级分类</p>
          <ul class="pd-tabs">
            <li class="pd-tabs__item pd-tabs__item--on">地方文化 <span>21</span></li>
            <li class="pd-tabs__item">行业资料 <span>18</span></li>
            <li class="pd-tabs__item">人物与家族 <span>14</span></li>
            <li class="pd-tabs__item">地理与物产 <span>16</span></li>
            <li class="pd-tabs__item">教育与机构 <span>12</span></li>
            <li class="pd-tabs__item">版本与批次 <span>9</span></li>
          </ul>
          <p class="pd-catalog__tabs-note">其余 12 个一级分类在站内按字母序排列。</p>
        </aside>

        <div class="pd-catalog__body">
          <div class="pd-catalog__filter">
            <span class="pd-catalog__filter-label">按地区</span>
            <div class="lx-filterbar pd-filterbar pd-filterbar--tight">
              <span class="lx-chip" data-active="true">闽南</span>
              <span class="lx-chip">闽东</span>
              <span class="lx-chip">粤东</span>
              <span class="lx-chip">浙南</span>
            </div>
          </div>
          <div class="pd-catalog__filter">
            <span class="pd-catalog__filter-label">按主题</span>
            <div class="lx-filterbar pd-filterbar pd-filterbar--tight">
              <span class="lx-chip" data-active="true">港口与航路</span>
              <span class="lx-chip">宗族谱系</span>
              <span class="lx-chip">方言与民俗</span>
              <span class="lx-chip">工艺与物产</span>
            </div>
          </div>
          <div class="pd-catalog__filter">
            <span class="pd-catalog__filter-label">按批次</span>
            <div class="lx-filterbar pd-filterbar pd-filterbar--tight">
              <span class="lx-chip" data-active="true">-218</span>
              <span class="lx-chip">-217</span>
              <span class="lx-chip">-216</span>
              <span class="lx-chip">全部批次</span>
            </div>
          </div>

          <ul class="pd-entries">
            <li class="pd-entry">
              <p class="pd-entry__no">ML-04-18</p>
              <div>
                <p class="pd-entry__title">沿海市镇码头与航路条目汇编</p>
                <p class="pd-entry__meta">地方文化 / 港口与航路 · 闽南 · 批次 -218 · 132 条</p>
              </div>
            </li>
            <li class="pd-entry">
              <p class="pd-entry__no">ML-04-27</p>
              <div>
                <p class="pd-entry__title">红砖厝营造工艺与匠户记录</p>
                <p class="pd-entry__meta">地方文化 / 工艺与物产 · 闽南 · 批次 -218 · 86 条</p>
              </div>
            </li>
            <li class="pd-entry">
              <p class="pd-entry__no">HY-02-11</p>
              <div>
                <p class="pd-entry__title">沿海物产外销名录与商号整理</p>
                <p class="pd-entry__meta">行业资料 / 港口与航路 · 粤东 · 批次 -217 · 104 条</p>
              </div>
            </li>
            <li class="pd-entry">
              <p class="pd-entry__no">ML-06-03</p>
              <div>
                <p class="pd-entry__title">方言词条与民俗活动对照清单</p>
                <p class="pd-entry__meta">地方文化 / 方言与民俗 · 浙南 · 批次 -216 · 61 条</p>
              </div>
            </li>
          </ul>

          <p class="pd-catalog__foot">每个月平均新增约 900 条目录条目，新增内容会跟着批次号一起进目录，历史条目保留原编号。</p>
        </div>
      </div>

      <figure class="lx-figure pd-catalog__figure">
        <div class="lx-media lx-media--wide pd-catalog__media">
          <img class="lx-media__img" src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="多张目录索引卡按地区、主题、批次分栏摊开，卡片边缘露出可翻动的索引签" loading="lazy" decoding="async">
        </div>
        <figcaption class="lx-figure__caption">索引签露在卡片外沿，翻到哪一层，右侧条目就跟着换。</figcaption>
      </figure>
    </div>
  </section>

  <section class="lx-section pd-section" id="scenes" aria-labelledby="scenes-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">05</span>
        <div>
          <h2 class="lx-section__title" id="scenes-title">这些场景里，它最省事</h2>
          <p class="lx-section__note">从一个人读到一群人分工，用法不一样，工具是同一套。</p>
        </div>
      </div>

      <div class="pd-scenes">
        <article class="pd-scene pd-scene--big">
          <p class="pd-scene__tag">个人自学</p>
          <h3 class="pd-scene__title">新会员第一周怎么走</h3>
          <p class="pd-scene__text">先读目录，把常查的两三个二级分类记住；再用一个自己熟悉的关键词搜一遍，看看结果长什么样；最后试着导出十条，熟悉清单文本的格式。三步走完，后面的使用就顺了。</p>
        </article>
        <article class="pd-scene">
          <p class="pd-scene__tag">内容团队</p>
          <h3 class="pd-scene__title">一堆资料要成稿</h3>
          <p class="pd-scene__text">检索版把范围压小，导出后交给表格去重、排序、分工，人不必反复翻同一页。</p>
        </article>
        <article class="pd-scene">
          <p class="pd-scene__tag">地方文化</p>
          <h3 class="pd-scene__title">查一个地名与它的旧称</h3>
          <p class="pd-scene__text">按地区进目录，再切到主题看物产与航路，对照视图能看清不同批次的写法差别。</p>
        </article>
        <article class="pd-scene pd-scene--side">
          <p class="pd-scene__tag">团队协作</p>
          <h3 class="pd-scene__title">席位分给不同角色</h3>
          <p class="pd-scene__text">编辑、检索、整理各占一个席位，负责人统一收导出结果，进度不用来回问。</p>
          <div class="lx-media lx-media--tall pd-scene__media">
            <img class="lx-media__img" src="{zhanqunpic:h:960w:540}" width="540" height="960" alt="手机与小屏设备界面局部特写，检索带横向展开，导出按钮以砖橙色突出" loading="lazy" decoding="async">
          </div>
        </article>
      </div>

      <div class="pd-deliver">
        <h3 class="pd-deliver__title">你能拿到的交付物</h3>
        <ul class="pd-deliver__list">
          <li><strong>账号与席位</strong><span>按年度开通，团队版分配 5 至 20 个席位</span></li>
          <li><strong>CSV 结果文件</strong><span>带分类、批次与对照标记，适合进表格处理</span></li>
          <li><strong>清单文本</strong><span>纯文本条目，直接粘进文档或汇报材料</span></li>
          <li><strong>上手引导</strong><span>开通后按角色给出第一条阅读与检索建议</span></li>
        </ul>
      </div>
    </div>
  </section>

  <section class="lx-section pd-section pd-section--paper" id="start" aria-labelledby="start-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">06</span>
        <div>
          <h2 class="lx-section__title" id="start-title">从咨询到用起来，四步</h2>
          <p class="lx-section__note">个人开通当天能开始读，团队开通多一步席位分配。</p>
        </div>
      </div>

      <ol class="pd-steps">
        <li class="pd-step">
          <span class="pd-step__no" aria-hidden="true">01</span>
          <h3 class="pd-step__title">说清你要查什么</h3>
          <p class="pd-step__text">把你的主题、常用分类和人员规模告诉我们，客服会指出哪个版本更合适。</p>
        </li>
        <li class="pd-step">
          <span class="pd-step__no" aria-hidden="true">02</span>
          <h3 class="pd-step__title">开通对应版本</h3>
          <p class="pd-step__text">按年度开通阅读版、检索版或团队版，团队版确认席位数与使用人。</p>
        </li>
        <li class="pd-step">
          <span class="pd-step__no" aria-hidden="true">03</span>
          <h3 class="pd-step__title">配置席位与分工</h3>
          <p class="pd-step__text">把检索、整理、成稿分给不同成员，负责人统一收导出结果。</p>
        </li>
        <li class="pd-step">
          <span class="pd-step__no" aria-hidden="true">04</span>
          <h3 class="pd-step__title">按角色上手</h3>
          <p class="pd-step__text">拿到第一条阅读路径与检索关键词建议，之后有问题随时来信。</p>
        </li>
      </ol>

      <figure class="lx-figure pd-steps__figure">
        <div class="lx-media lx-media--wide pd-steps__media">
          <img class="lx-media__img" src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="四张流程卡片按编号顺序排列，依次为咨询、开通、席位配置与持续支持" loading="lazy" decoding="async">
        </div>
        <figcaption class="lx-figure__caption">四步走完，个人当天可以开始阅读，团队版在席位分配完成后即可分工。</figcaption>
      </figure>

      <div class="pd-support">
        <p class="pd-support__text">会员服务由 2 位同事负责，配合 18 位编辑与 6 位检索、目录整理同事；与 36 家行业资料机构、12 家地方文化机构保持内容共建，你在目录里看到的很多条目来自这些合作。</p>
        <a class="lx-btn lx-btn--primary" href="/find-us/">联系客服咨询开通</a>
      </div>
    </div>
  </section>

  <section class="lx-section pd-section" id="more" aria-labelledby="more-title">
    <div class="lx-container">
      <div class="lx-section__head pd-head">
        <span class="lx-section__index" aria-hidden="true">07</span>
        <div>
          <h2 class="lx-section__title" id="more-title">还想再确认几件事</h2>
          <p class="lx-section__note">常见的问题先在这里看，没找到答案再写信过来。</p>
        </div>
      </div>

      <div class="pd-more">
        <div class="pd-more__faq">
          <details class="lx-accordion pd-more__item">
            <summary class="lx-accordion__title">团队版的席位中途能增减吗</summary>
            <div class="lx-accordion__body">
              <p>团队版在 5 至 20 个席位区间内按实际人数开通，人员调整时把变更告诉客服即可，使用期限跟着年度周期走。</p>
            </div>
          </details>
          <details class="lx-accordion pd-more__item">
            <summary class="lx-accordion__title">导出的 CSV 能直接进表格软件吗</summary>
            <div class="lx-accordion__body">
              <p>可以。字段包含标题、一级与二级分类、更新批次和对照视图标记，用逗号分隔，常见表格软件都能直接打开。清单文本则是每行一条，方便贴进文档。</p>
            </div>
          </details>
          <details class="lx-accordion pd-more__item">
            <summary class="lx-accordion__title">检索不到想要的内容怎么办</summary>
            <div class="lx-accordion__body">
              <p>换一条线索试试：关键词搜不到就用地区或主题进目录，再按批次收窄。仍然没有的话，把页面截图和用过的关键词发给客服，我们会告诉你该往哪个分类找。</p>
            </div>
          </details>
        </div>

        <nav class="pd-more__links" aria-label="延伸阅读">
          <a class="pd-link-card" href="/questions/">
            <span class="pd-link-card__label">问答中心</span>
            <span class="pd-link-card__text">会员权益、目录筛选与导出的常见问题</span>
          </a>
          <a class="pd-link-card" href="/press/">
            <span class="pd-link-card__label">站内动态</span>
            <span class="pd-link-card__text">看最新批次与目录维护记录</span>
          </a>
          <a class="pd-link-card" href="/history/">
            <span class="pd-link-card__label">品牌历程</span>
            <span class="pd-link-card__text">从目录卡片整理走到今天的会员服务</span>
          </a>
          <a class="pd-link-card pd-link-card--accent" href="/find-us/">
            <span class="pd-link-card__label">找到我们</span>
            <span class="pd-link-card__text">咨询版本、席位与内容共建</span>
          </a>
        </nav>
      </div>
    </div>
  </section>
</main>

.page-products .pd-crumb {
  padding-block: 18px 6px;
}

.page-products .pd-hero {
  background:
    radial-gradient(58% 62% at 12% 8%, rgba(217, 237, 242, 0.95) 0%, rgba(217, 237, 242, 0) 62%),
    radial-gradient(48% 54% at 92% 22%, rgba(221, 232, 216, 0.9) 0%, rgba(221, 232, 216, 0) 66%),
    radial-gradient(70% 60% at 68% 108%, rgba(244, 201, 93, 0.28) 0%, rgba(244, 201, 93, 0) 60%),
    var(--lx-cream);
  padding-bottom: clamp(36px, 7vw, 76px);
}

.page-products .pd-hero__inner {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: start;
}

.page-products .pd-hero__copy h1 {
  font-family: var(--lx-font-display);
  font-weight: 900;
  font-size: clamp(32px, 7.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--lx-deep);
  margin: 10px 0 0;
  max-width: 15em;
}

.page-products .pd-hero__lead {
  font-family: var(--lx-font-body);
  font-size: 17px;
  line-height: 1.82;
  color: var(--lx-ink);
  margin: 18px 0 0;
  max-width: 34em;
}

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

.page-products .pd-hero__facts {
  list-style: none;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--lx-line);
  display: grid;
  gap: 14px;
}

.page-products .pd-hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-products .pd-hero__facts strong {
  font-family: var(--lx-font-mono);
  font-size: 24px;
  color: var(--lx-blue);
  letter-spacing: -0.01em;
}

.page-products .pd-hero__facts span {
  font-family: var(--lx-font-ui);
  font-size: 14px;
  color: var(--lx-gray);
}

.page-products .pd-hero__stack {
  display: grid;
  gap: 14px;
}

.page-products .pd-stack-card {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius-lg);
  padding: 20px 22px;
  box-shadow: var(--lx-shadow-card);
  position: relative;
  overflow: hidden;
}

.page-products .pd-stack-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--lx-blue);
}

.page-products .pd-stack-card--b::before {
  background: var(--lx-bamboo);
}

.page-products .pd-stack-card--c::before {
  background: var(--lx-brick);
}

.page-products .pd-stack-card--a {
  background: linear-gradient(140deg, #ffffff 0%, var(--lx-blue-soft) 100%);
}

.page-products .pd-stack-card--b {
  background: linear-gradient(140deg, #ffffff 0%, var(--lx-bamboo-soft) 100%);
}

.page-products .pd-stack-card--c {
  background: linear-gradient(140deg, var(--lx-paper) 0%, #f6e6cf 100%);
}

.page-products .pd-stack-card__tag {
  font-family: var(--lx-font-ui);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--lx-gray);
  margin: 0;
}

.page-products .pd-stack-card__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 26px);
  color: var(--lx-deep);
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}

.page-products .pd-stack-card__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-section {
  padding-block: clamp(44px, 8vw, 86px);
}

.page-products .pd-section--paper {
  background: var(--lx-paper);
}

.page-products .pd-head {
  display: grid;
  gap: 8px;
  margin-bottom: clamp(26px, 5vw, 44px);
}

.page-products .pd-head .lx-section__index {
  font-family: var(--lx-font-mono);
  font-size: clamp(44px, 9vw, 76px);
  line-height: 0.9;
  color: var(--lx-blue);
  opacity: 0.22;
}

.page-products .pd-head .lx-section__title {
  font-family: var(--lx-font-display);
  font-weight: 900;
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-head .lx-section__note {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--lx-gray);
  margin: 8px 0 0;
}

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

.page-products .pd-line {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius-lg);
  padding: 24px 22px;
  box-shadow: var(--lx-shadow-card);
}

.page-products .pd-line--wide {
  background: linear-gradient(160deg, var(--lx-paper) 0%, var(--lx-blue-soft) 130%);
  border-color: rgba(20, 92, 120, 0.24);
}

.page-products .pd-line--tint {
  background: linear-gradient(160deg, var(--lx-paper) 0%, var(--lx-bamboo-soft) 130%);
}

.page-products .pd-line__no {
  font-family: var(--lx-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--lx-brick-deep);
  margin: 0;
}

.page-products .pd-line__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(21px, 4.4vw, 27px);
  color: var(--lx-deep);
  margin: 6px 0 0;
}

.page-products .pd-line__text {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 1.82;
  color: var(--lx-ink);
  margin: 10px 0 0;
}

.page-products .pd-line__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .pd-line__list li {
  font-family: var(--lx-font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lx-deep);
  padding-left: 18px;
  position: relative;
}

.page-products .pd-line__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--lx-bamboo);
}

.page-products .pd-switch {
  margin-top: clamp(26px, 5vw, 42px);
  background: var(--lx-cream);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
}

.page-products .pd-switch__lead {
  font-family: var(--lx-font-ui);
  font-size: 15px;
  color: var(--lx-deep);
  margin: 0 0 14px;
}

.page-products .pd-switch__group {
  display: grid;
  gap: 10px;
}

.page-products .pd-switch__item {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius);
  padding: 4px 16px;
}

.page-products .pd-switch__item .lx-accordion__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--lx-deep);
  padding: 14px 0;
  cursor: pointer;
}

.page-products .pd-switch__item .lx-accordion__body p {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lx-ink);
  margin: 0 0 16px;
}

.page-products .pd-plans {
  display: grid;
  gap: 22px;
}

.page-products .pd-plans__cards {
  display: grid;
  gap: 14px;
}

.page-products .pd-plan {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
}

.page-products .pd-plan--active {
  background: linear-gradient(165deg, var(--lx-paper) 0%, var(--lx-blue-soft) 100%);
  border-color: var(--lx-blue);
  box-shadow: var(--lx-shadow-lift);
}

.page-products .pd-plan__label {
  align-self: flex-start;
  font-family: var(--lx-font-ui);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--lx-paper);
  background: var(--lx-bamboo);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0;
}

.page-products .pd-plan--active .pd-plan__label {
  background: var(--lx-blue);
}

.page-products .pd-plan__name {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--lx-deep);
  margin: 14px 0 0;
}

.page-products .pd-plan__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-plan__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--lx-line);
  display: grid;
  gap: 8px;
}

.page-products .pd-plan__list li {
  font-family: var(--lx-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--lx-deep);
  padding-left: 16px;
  position: relative;
}

.page-products .pd-plan__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lx-brick);
}

.page-products .pd-plans__figure,
.page-products .pd-cases__figure,
.page-products .pd-catalog__figure,
.page-products .pd-steps__figure {
  margin: 0;
}

.page-products .pd-plans__media,
.page-products .pd-cases__media,
.page-products .pd-catalog__media,
.page-products .pd-steps__media {
  border-radius: var(--lx-radius-lg);
  overflow: hidden;
  background: var(--lx-cream);
}

.page-products .pd-plans__media img,
.page-products .pd-cases__media img,
.page-products .pd-catalog__media img,
.page-products .pd-steps__media img,
.page-products .pd-scene__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .lx-figure__caption {
  font-family: var(--lx-font-ui);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--lx-gray);
  margin-top: 10px;
}

.page-products .pd-table-wrap {
  margin-top: clamp(24px, 5vw, 38px);
  border-radius: var(--lx-radius);
  border: 1px solid var(--lx-line);
  overflow-x: auto;
  background: var(--lx-paper);
}

.page-products .pd-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--lx-font-ui);
  font-size: 14px;
}

.page-products .pd-table__caption {
  text-align: left;
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--lx-deep);
  padding: 16px 16px 12px;
}

.page-products .pd-table thead th {
  background: var(--lx-blue-soft);
  color: var(--lx-deep);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--lx-line);
  white-space: nowrap;
}

.page-products .pd-table tbody th {
  font-weight: 600;
  color: var(--lx-deep);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lx-line-soft);
  white-space: nowrap;
}

.page-products .pd-table tbody td {
  color: var(--lx-ink);
  padding: 12px 16px;
  border-bottom: 1px solid var(--lx-line-soft);
  white-space: nowrap;
}

.page-products .pd-table tbody tr:nth-child(even) td,
.page-products .pd-table tbody tr:nth-child(even) th {
  background: rgba(217, 237, 242, 0.28);
}

.page-products .pd-plans__note {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lx-gray);
  margin: 16px 0 0;
}

.page-products .pd-plans__note a {
  color: var(--lx-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-products .pd-cases {
  display: grid;
  gap: 24px;
}

.page-products .pd-cases__panel {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: 18px 16px;
  box-shadow: var(--lx-shadow-card);
}

.page-products .pd-searchbar {
  background: var(--lx-blue-soft);
  border-radius: var(--lx-radius);
  padding: 14px 16px;
}

.page-products .pd-searchbar__label {
  font-family: var(--lx-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lx-blue);
  margin: 0;
}

.page-products .pd-searchbar__query {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(19px, 4.4vw, 24px);
  color: var(--lx-deep);
  margin: 6px 0 0;
}

.page-products .pd-searchbar__meta {
  font-family: var(--lx-font-ui);
  font-size: 13.5px;
  color: var(--lx-gray);
  margin: 6px 0 0;
}

.page-products .pd-filterbar {
  margin-top: 14px;
}

.page-products .pd-filterbar--tight {
  margin-top: 0;
}

.page-products .lx-chip {
  font-family: var(--lx-font-ui);
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--lx-cream);
  border: 1px solid var(--lx-line);
  color: var(--lx-deep);
  white-space: nowrap;
}

.page-products .lx-chip[data-active="true"] {
  background: var(--lx-blue);
  border-color: var(--lx-blue);
  color: var(--lx-paper);
  font-weight: 600;
}

.page-products .pd-results {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-products .pd-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--lx-line-soft);
}

.page-products .pd-result__title {
  grid-column: 1 / 2;
  font-family: var(--lx-font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-result__meta {
  grid-column: 1 / 2;
  font-family: var(--lx-font-mono);
  font-size: 12.5px;
  color: var(--lx-gray);
  margin: 0;
}

.page-products .pd-result__flag {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--lx-font-ui);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--lx-bamboo-soft);
  color: var(--lx-bamboo);
  white-space: nowrap;
}

.page-products .pd-result__flag--plain {
  background: var(--lx-cream);
  color: var(--lx-gray);
}

.page-products .lx-mark {
  background: linear-gradient(transparent 54%, var(--lx-mark) 54%);
  color: var(--lx-ink);
  padding: 0 1px;
}

.page-products .pd-export {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  align-items: center;
  background: var(--lx-cream);
  border-radius: var(--lx-radius);
  padding: 14px 16px;
}

.page-products .pd-export__text {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--lx-ink);
  margin: 0;
}

.page-products .pd-export__text strong {
  color: var(--lx-brick-deep);
}

.page-products .pd-export__btn {
  justify-self: start;
}

.page-products .pd-case-notes {
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .pd-case-notes .lx-card__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-case-notes .lx-card__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-catalog {
  display: grid;
  gap: 22px;
}

.page-products .pd-catalog__tabs {
  background: var(--lx-blue-soft);
  border-radius: var(--lx-radius-lg);
  padding: 18px 16px;
}

.page-products .pd-catalog__tabs-lead {
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--lx-blue);
  margin: 0 0 12px;
}

.page-products .pd-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.page-products .pd-tabs__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--lx-font-ui);
  font-size: 14.5px;
  color: var(--lx-deep);
  background: var(--lx-paper);
  border-radius: var(--lx-radius-sm);
  padding: 11px 14px;
  border-left: 4px solid transparent;
}

.page-products .pd-tabs__item span {
  font-family: var(--lx-font-mono);
  font-size: 12px;
  color: var(--lx-gray);
}

.page-products .pd-tabs__item--on {
  border-left-color: var(--lx-brick);
  font-weight: 700;
  box-shadow: var(--lx-shadow-card);
}

.page-products .pd-catalog__tabs-note {
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lx-blue);
  margin: 12px 0 0;
}

.page-products .pd-catalog__body {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius-lg);
  padding: 18px 16px;
}

.page-products .pd-catalog__filter {
  margin-bottom: 14px;
}

.page-products .pd-catalog__filter-label {
  display: block;
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--lx-gray);
  margin-bottom: 8px;
}

.page-products .pd-entries {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .pd-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 14px 14px;
  border-radius: var(--lx-radius);
  background: var(--lx-cream);
  border-left: 3px solid var(--lx-bamboo);
}

.page-products .pd-entry__no {
  font-family: var(--lx-font-mono);
  font-size: 12.5px;
  color: var(--lx-brick-deep);
  margin: 0;
}

.page-products .pd-entry__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--lx-deep);
  margin: 0;
}

.page-products .pd-entry__meta {
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lx-gray);
  margin: 4px 0 0;
}

.page-products .pd-catalog__foot {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--lx-gray);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--lx-line);
}

.page-products .pd-catalog__figure {
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .pd-scenes {
  display: grid;
  gap: 14px;
}

.page-products .pd-scene {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line-soft);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
}

.page-products .pd-scene--big {
  background: linear-gradient(155deg, var(--lx-paper) 0%, var(--lx-blue-soft) 120%);
  border-color: rgba(20, 92, 120, 0.2);
}

.page-products .pd-scene--side {
  background: var(--lx-bamboo-soft);
  border-color: rgba(79, 107, 74, 0.22);
}

.page-products .pd-scene__tag {
  align-self: flex-start;
  font-family: var(--lx-font-ui);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--lx-brick-deep);
  margin: 0;
}

.page-products .pd-scene__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(19px, 4.2vw, 24px);
  line-height: 1.3;
  color: var(--lx-deep);
  margin: 8px 0 0;
}

.page-products .pd-scene__text {
  font-family: var(--lx-font-body);
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--lx-ink);
  margin: 10px 0 0;
}

.page-products .pd-scene__media {
  margin-top: 16px;
  border-radius: var(--lx-radius);
  overflow: hidden;
  max-width: 320px;
}

.page-products .pd-deliver {
  margin-top: clamp(24px, 5vw, 38px);
  background: var(--lx-cream);
  border-radius: var(--lx-radius-lg);
  padding: 22px 20px;
}

.page-products .pd-deliver__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--lx-deep);
  margin: 0 0 16px;
}

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

.page-products .pd-deliver__list li {
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 3px solid var(--lx-blue);
}

.page-products .pd-deliver__list strong {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--lx-deep);
}

.page-products .pd-deliver__list span {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--lx-gray);
}

.page-products .pd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-products .pd-step {
  background: var(--lx-cream);
  border-radius: var(--lx-radius-lg);
  padding: 20px 20px 22px;
  border-bottom: 3px solid var(--lx-blue);
}

.page-products .pd-step:nth-child(2) {
  border-bottom-color: var(--lx-bamboo);
}

.page-products .pd-step:nth-child(3) {
  border-bottom-color: var(--lx-brick);
}

.page-products .pd-step:nth-child(4) {
  border-bottom-color: var(--lx-deep);
}

.page-products .pd-step__no {
  font-family: var(--lx-font-mono);
  font-size: 34px;
  line-height: 1;
  color: var(--lx-blue);
  opacity: 0.32;
  display: block;
}

.page-products .pd-step__title {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--lx-deep);
  margin: 10px 0 0;
}

.page-products .pd-step__text {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-ink);
  margin: 8px 0 0;
}

.page-products .pd-steps__figure {
  margin-top: clamp(22px, 4vw, 34px);
}

.page-products .pd-support {
  margin-top: clamp(22px, 4vw, 34px);
  display: grid;
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--lx-radius-lg);
  background: linear-gradient(140deg, var(--lx-blue-soft) 0%, var(--lx-paper) 90%);
  border: 1px solid rgba(20, 92, 120, 0.18);
}

.page-products .pd-support__text {
  font-family: var(--lx-font-body);
  font-size: 15.5px;
  line-height: 1.82;
  color: var(--lx-ink);
  margin: 0;
}

.page-products .pd-support .lx-btn {
  justify-self: start;
}

.page-products .pd-more {
  display: grid;
  gap: 24px;
}

.page-products .pd-more__faq {
  display: grid;
  gap: 10px;
}

.page-products .pd-more__item {
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  border-radius: var(--lx-radius);
  padding: 4px 16px;
}

.page-products .pd-more__item .lx-accordion__title {
  font-family: var(--lx-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--lx-deep);
  padding: 15px 0;
  cursor: pointer;
}

.page-products .pd-more__item .lx-accordion__body p {
  font-family: var(--lx-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--lx-ink);
  margin: 0 0 18px;
}

.page-products .pd-more__links {
  display: grid;
  gap: 10px;
}

.page-products .pd-link-card {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--lx-radius);
  background: var(--lx-paper);
  border: 1px solid var(--lx-line);
  text-decoration: none;
  transition: transform 240ms var(--lx-ease), border-color 240ms var(--lx-ease);
}

.page-products .pd-link-card:hover {
  transform: translateX(4px);
  border-color: var(--lx-blue);
}

.page-products .pd-link-card__label {
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--lx-deep);
}

.page-products .pd-link-card__text {
  font-family: var(--lx-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--lx-gray);
}

.page-products .pd-link-card--accent {
  background: linear-gradient(140deg, var(--lx-blue-soft) 0%, var(--lx-paper) 100%);
  border-color: rgba(20, 92, 120, 0.28);
}

.page-products .pd-link-card--accent .pd-link-card__label {
  color: var(--lx-blue);
}

.page-products .lx-btn[data-state="copied"] {
  background: var(--lx-bamboo);
  color: var(--lx-paper);
}

@media (min-width: 640px) {
  .page-products .pd-hero__facts {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 26px;
  }

  .page-products .pd-hero__facts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .page-products .pd-plans__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products .pd-catalog__body {
    padding: 22px 22px;
  }

  .page-products .pd-entry {
    grid-template-columns: 96px 1fr;
    align-items: start;
    gap: 4px 14px;
  }

  .page-products .pd-export {
    grid-template-columns: 1fr auto;
  }

  .page-products .pd-deliver__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 26px;
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products .pd-more__links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .page-products .pd-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
  }

  .page-products .pd-hero__stack {
    gap: 16px;
  }

  .page-products .pd-stack-card {
    padding: 24px 26px;
  }

  .page-products .pd-stack-card:nth-child(1) {
    transform: translateX(-16px);
  }

  .page-products .pd-stack-card:nth-child(2) {
    transform: translateX(20px);
  }

  .page-products .pd-stack-card:nth-child(3) {
    transform: translateX(0);
  }

  .page-products .pd-head {
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .page-products .pd-head .lx-section__index {
    font-size: clamp(64px, 7vw, 96px);
  }

  .page-products .pd-lines {
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas:
      "wide b"
      "wide c";
    gap: 18px;
  }

  .page-products .pd-line--wide {
    grid-area: wide;
    padding: 32px 30px;
  }

  .page-products .pd-line:not(.pd-line--wide):nth-of-type(2) {
    grid-area: b;
  }

  .page-products .pd-line:not(.pd-line--wide):nth-of-type(3) {
    grid-area: c;
  }

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

  .page-products .pd-plans {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
    gap: 28px;
  }

  .page-products .pd-cases {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: 30px;
  }

  .page-products .pd-cases__panel {
    padding: 24px 24px;
  }

  .page-products .pd-catalog {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  .page-products .pd-scenes {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "big big side"
      "one two side";
    gap: 16px;
  }

  .page-products .pd-scene--big {
    grid-area: big;
    padding: 28px 28px;
  }

  .page-products .pd-scene--side {
    grid-area: side;
  }

  .page-products .pd-scene:nth-child(2) {
    grid-area: one;
  }

  .page-products .pd-scene:nth-child(3) {
    grid-area: two;
  }

  .page-products .pd-deliver {
    padding: 28px 30px;
  }

  .page-products .pd-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .page-products .pd-support {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 26px 30px;
  }

  .page-products .pd-more {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: start;
    gap: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pd-link-card,
  .page-products .pd-link-card:hover {
    transform: none;
    transition: none;
  }
}