.page-products{
  --pv-gap:clamp(16px,2.6vw,30px);
  --pv-sec-pad:clamp(38px,6vw,76px);
  --pv-card-bg:var(--night);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(0,229,195,.10), transparent 62%),
    radial-gradient(760px 420px at 4% 6%, rgba(255,107,53,.07), transparent 66%),
    var(--ink);
  color:var(--paper);
}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.06;
  letter-spacing:.01em;
  margin:0;
}
.page-products h1{font-size:clamp(2rem,6vw,4rem)}
.page-products h2{font-size:clamp(1.45rem,3.4vw,2.5rem)}
.page-products h3{font-size:clamp(1.02rem,2vw,1.24rem)}
.page-products p{line-height:1.8}

.page-products .pv-num{
  display:inline-block;
  font-family:var(--font-num);
  font-weight:700;
  font-size:clamp(1.5rem,5vw,2.4rem);
  line-height:1;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.page-products .pv-num--amber{color:var(--amber)}
.page-products .pv-num--orange{color:var(--orange)}
.page-products .pv-num__unit{font-size:.6em;margin-left:2px}

/* ---------- hero ---------- */
.page-products .pv-hero{
  position:relative;
  padding:clamp(18px,3vw,30px) 0 var(--pv-sec-pad);
  border-bottom:1px solid var(--line-soft);
}
.page-products .pv-hero__inner{
  display:grid;
  gap:clamp(22px,3vw,38px);
}
.page-products .pv-lead{
  margin:14px 0 0;
  max-width:48ch;
  color:var(--mist);
  font-size:clamp(.98rem,1.6vw,1.1rem);
}
.page-products .pv-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  margin:22px 0 24px;
}
.page-products .pv-metric{
  background:var(--pitch);
  padding:clamp(12px,2.2vw,20px);
}
.page-products .pv-metric__label{
  display:block;
  margin-top:10px;
  font-size:.76rem;
  letter-spacing:.08em;
  color:var(--mist);
}
.page-products .pv-hero__figure{margin:0}

.page-products .pv-stack{display:grid;gap:14px}
.page-products .pv-card{
  background:linear-gradient(150deg,rgba(0,229,195,.07),transparent 65%),var(--pv-card-bg);
  border:1px solid var(--line-soft);
  padding:clamp(14px,2.2vw,22px);
}
.page-products .pv-card--cut{
  clip-path:var(--cut-shape);
  border:none;
  background:linear-gradient(150deg,#0d4436,var(--night) 72%);
  padding:clamp(16px,2.4vw,24px);
}
.page-products .pv-card__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.page-products .pv-card__title{font-size:clamp(1.05rem,2.2vw,1.3rem)}
.page-products .pv-card__desc{
  margin:10px 0 0;
  font-size:.9rem;
  color:var(--mist);
}
.page-products .pv-card__rows{margin-top:12px;display:grid;gap:8px}
.page-products .pv-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding-top:8px;
  border-top:1px dashed var(--line-soft);
  font-size:.86rem;
  color:var(--mist);
}
.page-products .pv-row__val{
  font-family:var(--font-num);
  color:var(--paper);
  white-space:nowrap;
}

/* ---------- tabs ---------- */
.page-products .pv-tabs{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(6,31,25,.96);
  border-bottom:1px solid var(--line-soft);
}
.page-products .pv-tabs__list{
  display:flex;
  gap:8px;
  margin:0;
  padding:10px var(--pad);
  list-style:none;
  overflow-x:auto;
  scrollbar-width:thin;
}
.page-products .pv-tabs__link{
  display:inline-block;
  white-space:nowrap;
  padding:8px 14px;
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--mist);
  text-decoration:none;
  background:var(--ink);
  border:1px solid var(--line-soft);
  clip-path:var(--cut-shape);
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.page-products .pv-tabs__link:hover,
.page-products .pv-tabs__link:focus-visible{
  color:var(--paper);
  border-color:var(--cyan);
}
.page-products .pv-tabs__link.is-active,
.page-products .pv-tabs__link[aria-current="true"]{
  color:var(--pitch);
  background:var(--cyan);
  border-color:var(--cyan);
  font-weight:700;
}

/* ---------- section shell ---------- */
.page-products .pv-sec{padding:var(--pv-sec-pad) 0}
.page-products .pv-sec--night{
  background:var(--night);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.page-products .pv-head{max-width:64ch;margin-bottom:clamp(18px,3vw,32px)}
.page-products .pv-head p:not(.eyebrow){
  margin:12px 0 0;
  color:var(--mist);
  font-size:clamp(.95rem,1.5vw,1.02rem);
}
.page-products .pv-hint{
  margin:14px 0 0;
  font-size:.85rem;
  color:var(--mist);
}
.page-products .pv-hint a{color:var(--cyan)}

/* ---------- indicator cards ---------- */
.page-products .pv-ind{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.page-products .pv-ind__item{
  background:linear-gradient(180deg,rgba(0,229,195,.09),transparent 72%),var(--pitch);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--cyan);
  padding:clamp(12px,2vw,18px);
}
.page-products .pv-ind__item--amber{
  border-left-color:var(--amber);
  background:linear-gradient(180deg,rgba(255,176,58,.10),transparent 72%),var(--pitch);
}
.page-products .pv-ind__item--orange{
  border-left-color:var(--orange);
  background:linear-gradient(180deg,rgba(255,107,53,.10),transparent 72%),var(--pitch);
}
.page-products .pv-ind__item p{
  margin:8px 0 0;
  font-size:.88rem;
  color:var(--mist);
}

.page-products .pv-shotmap-wrap{
  margin-top:clamp(20px,3vw,32px);
  padding:clamp(12px,2.4vw,22px);
  background:rgba(4,17,13,.55);
  border:1px solid var(--line-soft);
  clip-path:var(--cut-shape);
}
.page-products .pv-shotmap{
  display:block;
  width:100%;
  height:auto;
}
.page-products .pv-shotmap__note{
  margin:10px 0 0;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--mist);
}

/* ---------- media ---------- */
.page-products .media{margin:0}
.page-products .pv-band{
  margin-bottom:clamp(18px,2.6vw,28px);
}
.page-products .page-products .media img,
.page-products .media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

/* ---------- table ---------- */
.page-products .pv-tablewrap{
  overflow-x:auto;
  border:1px solid var(--line-soft);
  background:rgba(4,17,13,.62);
  scrollbar-width:thin;
}
.page-products .pv-table{
  width:100%;
  min-width:600px;
  border-collapse:collapse;
  font-size:.9rem;
}
.page-products .pv-table caption{
  caption-side:top;
  padding:12px 14px;
  text-align:left;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--mist);
  border-bottom:1px solid var(--line-soft);
}
.page-products .pv-table th{
  padding:11px 14px;
  text-align:left;
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--mist);
  background:var(--pitch);
  border-bottom:1px solid var(--line);
}
.page-products .pv-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--line-soft);
  color:var(--paper);
}
.page-products .pv-table td:first-child{white-space:nowrap}
.page-products .pv-table td:not(:first-child){
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
}
.page-products .pv-table tbody tr:hover{background:rgba(0,229,195,.06)}
.page-products .pv-status{
  font-family:var(--font-body);
  font-size:.75rem;
  letter-spacing:.06em;
  color:var(--cyan);
}

/* ---------- ranges ---------- */
.page-products .pv-ranges{display:grid;gap:16px}
.page-products .pv-range{
  background:var(--pitch);
  border:1px solid var(--line-soft);
  padding:clamp(14px,2.4vw,20px);
}
.page-products .pv-range__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  font-size:.88rem;
  color:var(--mist);
}
.page-products .pv-range__val{
  font-family:var(--font-num);
  font-size:1.02rem;
  color:var(--cyan);
}
.page-products .pv-range__val--amber{color:var(--amber)}
.page-products .pv-range__track{
  position:relative;
  height:16px;
  border:1px solid var(--line);
  background-image:repeating-linear-gradient(to right,var(--line-soft) 0 1px,transparent 1px 25%);
  background-color:rgba(30,90,73,.28);
}
.page-products .pv-range__fill{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--from);
  width:var(--to);
  background:linear-gradient(90deg,var(--cyan),var(--cyan-soft));
}
.page-products .pv-range--opp .pv-range__fill{
  background:linear-gradient(90deg,var(--amber),#FFD79B);
}
.page-products .pv-range__fill::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  padding:4px 8px;
  white-space:nowrap;
  font-family:var(--font-num);
  font-size:.72rem;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--line);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.page-products .pv-range:hover .pv-range__fill::after{opacity:1}
.page-products .pv-range__scale{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-family:var(--font-num);
  font-size:.7rem;
  color:var(--mist);
}

.page-products .pv-read{
  margin-top:clamp(20px,3vw,30px);
  padding:clamp(16px,2.6vw,24px);
  border-left:3px solid var(--amber);
  background:var(--night);
}
.page-products .pv-read h3{margin-bottom:10px}
.page-products .pv-read ul{
  margin:0;
  padding-left:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.page-products .pv-read li{
  position:relative;
  padding-left:18px;
  font-size:.92rem;
  color:var(--mist);
  line-height:1.75;
}
.page-products .pv-read li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:2px;
  background:var(--cyan);
}
.page-products .pv-read strong{color:var(--paper)}

/* ---------- steps ---------- */
.page-products .pv-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-products .pv-step{
  position:relative;
  padding:clamp(16px,2.4vw,24px);
  background:linear-gradient(160deg,rgba(0,229,195,.08),transparent 70%),var(--pitch);
  border:1px solid var(--line-soft);
  clip-path:var(--cut-shape);
}
.page-products .pv-step__no{
  display:inline-block;
  font-family:var(--font-num);
  font-size:.85rem;
  letter-spacing:.12em;
  color:var(--orange);
}
.page-products .pv-step h3{margin:10px 0 8px}
.page-products .pv-step p{
  margin:0;
  font-size:.9rem;
  color:var(--mist);
}
.page-products .pv-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(18px,2.6vw,26px);
}

/* ---------- versions ---------- */
.page-products .pv-vers{
  display:grid;
  gap:12px;
}
.page-products .pv-ver{
  padding:16px 18px;
  background:var(--pitch);
  border-top:2px solid var(--cyan);
}
.page-products .pv-ver--amber{border-top-color:var(--amber)}
.page-products .pv-ver--orange{border-top-color:var(--orange)}
.page-products .pv-ver__id{
  font-family:var(--font-num);
  font-size:1.35rem;
  font-weight:700;
  color:var(--cyan);
}
.page-products .pv-ver--amber .pv-ver__id{color:var(--amber)}
.page-products .pv-ver--orange .pv-ver__id{color:var(--orange)}
.page-products .pv-ver h3{margin:6px 0 8px}
.page-products .pv-ver p{
  margin:0;
  font-size:.88rem;
  color:var(--mist);
}
.page-products .pv-rhythm{
  display:grid;
  gap:1px;
  margin-top:clamp(18px,2.6vw,28px);
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.page-products .pv-rhythm__item{
  background:var(--night);
  padding:clamp(14px,2.2vw,20px);
}
.page-products .pv-rhythm__time{
  display:inline-block;
  padding:3px 9px;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--pitch);
  background:var(--amber);
  font-weight:700;
}
.page-products .pv-rhythm__item p{
  margin:10px 0 0;
  font-size:.88rem;
  color:var(--mist);
}

/* ---------- scenes ---------- */
.page-products .pv-scenes{
  display:grid;
  gap:14px;
}
.page-products .pv-scene{
  padding:clamp(16px,2.4vw,24px);
  background:linear-gradient(170deg,rgba(0,229,195,.07),transparent 68%),var(--pitch);
  border:1px solid var(--line-soft);
}
.page-products .pv-scene h3{margin:12px 0 8px}
.page-products .pv-scene p{
  margin:0;
  font-size:.9rem;
  color:var(--mist);
}
.page-products .pv-scene__link{
  display:inline-block;
  margin-top:14px;
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.page-products .pv-scene__link:hover{
  color:var(--cyan-soft);
  border-bottom-color:var(--cyan);
}

/* ---------- support ---------- */
.page-products .pv-support{
  display:grid;
  gap:clamp(16px,2.6vw,26px);
  padding:clamp(18px,3vw,32px);
  background:linear-gradient(140deg,#0d4436,var(--pitch) 78%);
  clip-path:var(--cut-shape);
}
.page-products .pv-support__text p:not(.eyebrow){
  margin:12px 0 0;
  color:var(--mist);
  font-size:.94rem;
  max-width:56ch;
}
.page-products .pv-support__acts{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-content:start;
}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .page-products .pv-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-products .pv-rhythm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-products .pv-vers{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:860px){
  .page-products .pv-ind{grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-products .pv-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .page-products .pv-scenes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-products .pv-ranges{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .page-products .pv-support{
    grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);
    align-items:center;
  }
  .page-products .pv-support__acts{flex-direction:column;align-items:flex-start}
}

@media (min-width:960px){
  .page-products .pv-hero__inner{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:start;
  }
  .page-products .pv-stack{
    position:sticky;
    top:calc(var(--header-h) + 18px);
  }
  .page-products .pv-hero__lead{padding-right:clamp(0px,2vw,24px)}
}

@media (prefers-reduced-motion:reduce){
  .page-products .pv-tabs__link,
  .page-products .pv-range__fill::after{transition:none}
}
<<<END>>>

.page-products {
  --from: inherit;
  --to: 1rem;
}