.page-products {
  --pd-rail-w: 68px;
  --pd-media-col: 420px;
  background: var(--lj-ink);
  color: var(--lj-text);
  overflow-x: clip;
}

.page-products img {
  max-width: 100%;
  height: auto;
}

.page-products [data-reveal] {
  transition: opacity .6s var(--lj-ease), transform .6s var(--lj-ease);
}

/* ---------- Hero ---------- */

.page-products .pd-hero {
  position: relative;
  padding: calc(var(--lj-header-h) + 40px) 0 56px;
  overflow: hidden;
}

.page-products .pd-hero__cut {
  position: absolute;
  top: -14%;
  right: -20%;
  width: min(780px, 82%);
  height: 132%;
  background: linear-gradient(152deg, rgba(0, 229, 160, .17), rgba(0, 229, 160, 0) 66%);
  clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-products .pd-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 58, 51, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 58, 51) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 72% 26%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 72% 26%, #000 0%, transparent 70%);
  pointer-events: none;
}

.page-products .pd-hero__inner {
  position: relative;
  z-index: 1;
}

.page-products .pd-hero__title {
  font-family: var(--lj-font-display);
  font-weight: 700;
  font-size: clamp(36px, 8.4vw, 76px);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 14px 0 20px;
  max-width: 15ch;
  color: var(--lj-text);
}

.page-products .pd-hero__lead {
  max-width: 60ch;
  color: var(--lj-muted);
}

.page-products .pd-hero__stats {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lj-line);
  border: 1px solid var(--lj-line);
}

.page-products .pd-hero__stats li {
  background: var(--lj-ink);
  padding: 16px 14px 18px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.page-products .pd-hero__stats .lj-num {
  font-family: var(--lj-font-num);
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
}

.page-products .pd-hero__stat-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lj-muted);
}

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

/* ---------- Module shell ---------- */

.page-products .pd-module {
  position: relative;
  border-top: 1px solid var(--lj-line);
  padding: 44px 0 52px;
}

.page-products .pd-module__inner {
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.page-products .pd-module__rail {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-products .pd-module__num {
  font-family: var(--lj-font-display);
  font-weight: 700;
  font-size: clamp(38px, 9vw, 64px);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--lj-accent);
}

.page-products .pd-module--warm .pd-module__num {
  color: var(--lj-warm);
}

.page-products .pd-module__label {
  font-family: var(--lj-font-num);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--lj-muted);
}

.page-products .pd-module__body {
  min-width: 0;
}

.page-products .pd-module__head {
  max-width: 64ch;
  margin-bottom: 26px;
}

.page-products .pd-module__head .lj-h2 {
  margin: 0 0 12px;
}

.page-products .pd-module__head p {
  color: var(--lj-muted);
  margin: 0;
}

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

.page-products .pd-module__media {
  margin: 0;
}

.page-products .pd-module__band {
  margin: 0 0 26px;
}

/* ---------- Module 01 : review cards ---------- */

.page-products .pd-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.page-products .pd-card {
  border: 1px solid var(--lj-line);
  background: var(--lj-panel);
  min-width: 0;
}

.page-products .pd-card__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.page-products .pd-card__summary::-webkit-details-marker {
  display: none;
}

.page-products .pd-card__title {
  font-weight: 700;
  font-size: 15px;
}

.page-products .pd-card__meta {
  font-family: var(--lj-font-num);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--lj-muted);
}

.page-products .pd-card__plus {
  margin-left: auto;
  font-family: var(--lj-font-num);
  font-size: 18px;
  line-height: 1;
  color: var(--lj-muted);
  transition: transform .22s var(--lj-ease), color .22s var(--lj-ease);
}

.page-products .pd-card[open] > .pd-card__summary .pd-card__plus {
  color: var(--lj-accent);
  transform: rotate(45deg);
}

.page-products .pd-card__body {
  padding: 0 16px 16px;
  border-top: 1px dashed var(--lj-line);
}

.page-products .pd-card__note {
  font-size: 14px;
  color: var(--lj-muted);
  margin: 14px 0 0;
}

.page-products .pd-card--sub {
  background: rgba(255, 255, 255, .015);
  border-left: 2px solid var(--lj-accent);
}

.page-products .pd-card--warm {
  border-left-color: var(--lj-warm);
}

.page-products .pd-card--warm[open] > .pd-card__summary .pd-card__plus {
  color: var(--lj-warm);
}

.page-products .pd-subgrid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

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

.page-products .pd-rows li {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.55;
}

.page-products .pd-rows__k {
  font-family: var(--lj-font-num);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--lj-muted);
}

.page-products .pd-rows .lj-num {
  font-family: var(--lj-font-num);
  color: var(--lj-text);
}

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

.page-products .pd-timeline li {
  display: grid;
  grid-template-columns: 10px 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  font-size: 14px;
}

.page-products .pd-timeline .lj-num {
  font-family: var(--lj-font-num);
}

/* ---------- Module 02 : schedule views ---------- */

.page-products .pd-views {
  position: relative;
  min-width: 0;
}

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

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

.page-products .pd-views__tab {
  border: 1px solid var(--lj-line);
  padding: 9px 16px;
  font-family: var(--lj-font-num);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--lj-muted);
  cursor: pointer;
  user-select: none;
  transition: background .22s var(--lj-ease), color .22s var(--lj-ease), border-color .22s var(--lj-ease);
}

.page-products .pd-views__tab:hover {
  color: var(--lj-text);
  border-color: var(--lj-muted);
}

.page-products .pd-views__panel {
  display: none;
}

.page-products #view-date:checked ~ .pd-views__tabs .pd-views__tab[for="view-date"],
.page-products #view-round:checked ~ .pd-views__tabs .pd-views__tab[for="view-round"],
.page-products #view-home:checked ~ .pd-views__tabs .pd-views__tab[for="view-home"] {
  background: var(--lj-accent);
  border-color: var(--lj-accent);
  color: var(--lj-ink);
}

.page-products #view-date:focus-visible ~ .pd-views__tabs .pd-views__tab[for="view-date"],
.page-products #view-round:focus-visible ~ .pd-views__tabs .pd-views__tab[for="view-round"],
.page-products #view-home:focus-visible ~ .pd-views__tabs .pd-views__tab[for="view-home"] {
  outline: 2px solid var(--lj-soft);
  outline-offset: 2px;
}

.page-products #view-date:checked ~ .pd-views__panels .pd-views__panel--date,
.page-products #view-round:checked ~ .pd-views__panels .pd-views__panel--round,
.page-products #view-home:checked ~ .pd-views__panels .pd-views__panel--home {
  display: block;
}

.page-products .pd-track {
  display: flex;
  overflow-x: auto;
  border-top: 1px solid var(--lj-line);
  border-bottom: 1px solid var(--lj-line);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.page-products .pd-track::-webkit-scrollbar {
  height: 6px;
}

.page-products .pd-track::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04);
}

.page-products .pd-track::-webkit-scrollbar-thumb {
  background: var(--lj-line);
}

.page-products .pd-track__node {
  flex: 0 0 auto;
  width: 176px;
  padding: 16px 14px 18px;
  border-right: 1px dashed var(--lj-line);
  border-top: 2px solid var(--lj-accent);
  display: grid;
  gap: 8px;
  align-content: start;
  scroll-snap-align: start;
}

.page-products .pd-track__node--away {
  border-top-color: var(--lj-line);
  background: rgba(255, 255, 255, .02);
}

.page-products .pd-track__node:last-child {
  border-right: none;
}

.page-products .pd-track__num {
  font-family: var(--lj-font-num);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}

.page-products .pd-track__meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--lj-muted);
}

.page-products .pd-views__panel .lj-meta {
  margin: 14px 0 0;
}

/* ---------- Module 03 : stoppage time ---------- */

.page-products .pd-delay {
  min-width: 0;
}

.page-products .pd-compare {
  position: relative;
}

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

.page-products .pd-compare__tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.page-products .pd-compare__tab {
  border: 1px solid var(--lj-line);
  padding: 8px 15px;
  font-family: var(--lj-font-num);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--lj-muted);
  cursor: pointer;
  user-select: none;
  transition: background .22s var(--lj-ease), color .22s var(--lj-ease), border-color .22s var(--lj-ease);
}

.page-products .pd-compare__tab:hover {
  color: var(--lj-text);
  border-color: var(--lj-muted);
}

.page-products #pd-recent:checked ~ .pd-compare__tabs .pd-compare__tab[for="pd-recent"],
.page-products #pd-full:checked ~ .pd-compare__tabs .pd-compare__tab[for="pd-full"] {
  background: var(--lj-warm);
  border-color: var(--lj-warm);
  color: var(--lj-ink);
}

.page-products #pd-recent:focus-visible ~ .pd-compare__tabs .pd-compare__tab[for="pd-recent"],
.page-products #pd-full:focus-visible ~ .pd-compare__tabs .pd-compare__tab[for="pd-full"] {
  outline: 2px solid var(--lj-soft);
  outline-offset: 2px;
}

.page-products .pd-compare__panel {
  display: none;
}

.page-products #pd-recent:checked ~ .pd-compare__panels .pd-compare__panel--recent,
.page-products #pd-full:checked ~ .pd-compare__panels .pd-compare__panel--full {
  display: block;
}

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

.page-products .pd-bar {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr) 62px;
  align-items: center;
  gap: 12px;
}

.page-products .pd-bar__label {
  font-family: var(--lj-font-num);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--lj-muted);
}

.page-products .pd-bar__track {
  display: block;
  height: 12px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}

.page-products .pd-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(255, 122, 61, .55);
  transition: width .5s var(--lj-ease);
}

.page-products .pd-bar--peak .pd-bar__fill {
  background: var(--lj-warm);
  box-shadow: 0 0 14px rgba(255, 122, 61, .45);
}

.page-products .pd-bar .lj-num {
  font-family: var(--lj-font-num);
  font-size: 15px;
  text-align: right;
}

.page-products .pd-compare__panel--recent .pd-bar:nth-child(1) .pd-bar__fill { width: 89%; }
.page-products .pd-compare__panel--recent .pd-bar:nth-child(2) .pd-bar__fill { width: 95%; }
.page-products .pd-compare__panel--recent .pd-bar:nth-child(3) .pd-bar__fill { width: 100%; }

.page-products .pd-compare__panel--full .pd-bar:nth-child(1) .pd-bar__fill { width: 73%; }
.page-products .pd-compare__panel--full .pd-bar:nth-child(2) .pd-bar__fill { width: 79%; }
.page-products .pd-compare__panel--full .pd-bar:nth-child(3) .pd-bar__fill { width: 86%; }
.page-products .pd-compare__panel--full .pd-bar:nth-child(4) .pd-bar__fill { width: 95%; }
.page-products .pd-compare__panel--full .pd-bar:nth-child(5) .pd-bar__fill { width: 100%; }

.page-products .pd-delay .lj-meta {
  margin: 18px 0 0;
}

/* ---------- Module 04 : transfer files ---------- */

.page-products .pd-files {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.page-products .pd-file {
  border: 1px solid var(--lj-line);
  background: var(--lj-panel);
  padding: 16px 18px 18px;
  box-shadow: 8px 8px 0 -1px var(--lj-print), 8px 8px 0 0 var(--lj-line);
}

.page-products .pd-file__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lj-line);
}

.page-products .pd-file__scope {
  margin-left: auto;
  font-family: var(--lj-font-num);
  font-size: 12px;
  color: var(--lj-muted);
  letter-spacing: .04em;
}

.page-products .pd-file .lj-num {
  font-family: var(--lj-font-num);
}

/* ---------- Module 05 : delivery ---------- */

.page-products .pd-module--bg {
  position: relative;
  overflow: hidden;
}

.page-products .pd-module__bgmedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-products .pd-module__bgmedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  filter: saturate(.45) brightness(.75);
}

.page-products .pd-deliver {
  display: grid;
  gap: 1px;
  background: var(--lj-line);
  border: 1px solid var(--lj-line);
}

.page-products .pd-deliver__item {
  background: rgba(14, 33, 27, .86);
  padding: 20px 18px 22px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.page-products .pd-deliver__item .lj-eyebrow {
  margin: 0;
}

.page-products .pd-deliver__title {
  margin: 0;
  font-family: var(--lj-font-display);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--lj-accent);
  letter-spacing: -.01em;
}

.page-products .pd-deliver__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lj-muted);
}

/* ---------- Module 06 : role routes ---------- */

.page-products .pd-roles {
  position: relative;
}

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

.page-products .pd-roles__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.page-products .pd-roles__tab {
  border: 1px solid var(--lj-line);
  padding: 9px 16px;
  font-family: var(--lj-font-num);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--lj-muted);
  cursor: pointer;
  user-select: none;
  transition: background .22s var(--lj-ease), color .22s var(--lj-ease), border-color .22s var(--lj-ease);
}

.page-products .pd-roles__tab:hover {
  color: var(--lj-text);
  border-color: var(--lj-muted);
}

.page-products #role-editor:checked ~ .pd-roles__tabs .pd-roles__tab[for="role-editor"],
.page-products #role-club:checked ~ .pd-roles__tabs .pd-roles__tab[for="role-club"],
.page-products #role-fan:checked ~ .pd-roles__tabs .pd-roles__tab[for="role-fan"],
.page-products #role-data:checked ~ .pd-roles__tabs .pd-roles__tab[for="role-data"] {
  background: var(--lj-accent);
  border-color: var(--lj-accent);
  color: var(--lj-ink);
}

.page-products #role-editor:focus-visible ~ .pd-roles__tabs .pd-roles__tab[for="role-editor"],
.page-products #role-club:focus-visible ~ .pd-roles__tabs .pd-roles__tab[for="role-club"],
.page-products #role-fan:focus-visible ~ .pd-roles__tabs .pd-roles__tab[for="role-fan"],
.page-products #role-data:focus-visible ~ .pd-roles__tabs .pd-roles__tab[for="role-data"] {
  outline: 2px solid var(--lj-soft);
  outline-offset: 2px;
}

.page-products .pd-roles__chart {
  border: 1px solid var(--lj-line);
  background: var(--lj-panel);
  padding: 10px;
  overflow: hidden;
}

.page-products .pd-roles__chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pd-roles__path {
  fill: none;
  stroke: var(--lj-line);
  stroke-width: 1.6;
  opacity: .34;
  transition: stroke .28s var(--lj-ease), opacity .28s var(--lj-ease);
}

.page-products .pd-roles__node {
  fill: var(--lj-muted);
  opacity: .6;
  transition: fill .28s var(--lj-ease), opacity .28s var(--lj-ease);
}

.page-products .pd-roles__node-text {
  fill: var(--lj-muted);
  font-family: var(--lj-font-num);
  font-size: 13px;
}

.page-products #role-editor:checked ~ .pd-roles__chart .pd-roles__path--editor,
.page-products #role-club:checked ~ .pd-roles__chart .pd-roles__path--club,
.page-products #role-fan:checked ~ .pd-roles__chart .pd-roles__path--fan,
.page-products #role-data:checked ~ .pd-roles__chart .pd-roles__path--data {
  stroke: var(--lj-accent);
  opacity: 1;
  stroke-width: 2;
}

.page-products #role-editor:checked ~ .pd-roles__chart .pd-roles__node--dest,
.page-products #role-club:checked ~ .pd-roles__chart .pd-roles__node--dest,
.page-products #role-fan:checked ~ .pd-roles__chart .pd-roles__node--dest,
.page-products #role-data:checked ~ .pd-roles__chart .pd-roles__node--dest {
  fill: var(--lj-accent);
  opacity: 1;
}

.page-products .pd-roles__detail {
  margin-top: 22px;
}

.page-products .pd-roles__view {
  display: none;
}

.page-products #role-editor:checked ~ .pd-roles__detail .pd-roles__view--editor,
.page-products #role-club:checked ~ .pd-roles__detail .pd-roles__view--club,
.page-products #role-fan:checked ~ .pd-roles__detail .pd-roles__view--fan,
.page-products #role-data:checked ~ .pd-roles__detail .pd-roles__view--data {
  display: block;
}

.page-products .pd-roles__desc {
  margin: 0 0 16px;
  max-width: 58ch;
  color: var(--lj-muted);
  line-height: 1.7;
}

.page-products .pd-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-products .pd-path li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lj-line);
  padding: 10px 14px;
  font-size: 14px;
  background: var(--lj-ink);
}

.page-products .pd-path__num {
  font-family: var(--lj-font-num);
  font-size: 12px;
  color: var(--lj-accent);
  letter-spacing: .06em;
}

.page-products .pd-next {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--lj-line);
}

.page-products .pd-next__text {
  margin: 0;
  max-width: 70ch;
  color: var(--lj-muted);
  line-height: 1.75;
}

.page-products .pd-next__text a {
  color: var(--lj-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */

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

  .page-products .pd-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .page-products .pd-file--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .page-products .pd-hero {
    padding: calc(var(--lj-header-h) + 64px) 0 80px;
  }

  .page-products .pd-module {
    padding: 56px 0 68px;
  }

  .page-products .pd-module__inner {
    grid-template-columns: var(--pd-rail-w) minmax(0, 1fr);
    gap: 36px;
  }

  .page-products .pd-module__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page-products .pd-module__label {
    writing-mode: vertical-rl;
    letter-spacing: .3em;
    padding-top: 2px;
  }
}

@media (min-width: 1024px) {
  .page-products .pd-module__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--pd-media-col));
    gap: 38px;
    align-items: start;
  }

  .page-products .pd-module--left .pd-module__main {
    grid-template-columns: minmax(0, var(--pd-media-col)) minmax(0, 1fr);
  }

  .page-products .pd-module--wide .pd-module__head {
    max-width: 74ch;
  }

  .page-products .pd-track__node {
    width: 196px;
  }
}

@media (min-width: 1240px) {
  .page-products .pd-hero__stats li {
    padding: 20px 20px 22px;
  }

  .page-products .pd-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products *,
  .page-products *::before,
  .page-products *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .page-products [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}