.page-products{
  --pp-line:rgba(30,58,95,.72);
  --pp-radius:var(--radius);
  --pp-panel:rgba(10,28,52,.62);
}

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

.page-products .page-products__hero{
  padding-block:1.5rem 2rem;
  border-bottom:1px solid var(--pp-line);
  background:
    radial-gradient(90% 130% at 6% -10%, rgba(18,41,74,.78) 0%, rgba(5,10,22,0) 62%),
    linear-gradient(180deg, rgba(7,18,38,.72) 0%, rgba(5,10,22,0) 100%);
}

.page-products .page-products__hero-grid{
  display:grid;
  gap:1.4rem;
  margin-top:1.2rem;
}

.page-products .page-products__hero-frame{
  position:relative;
  padding:1.5rem 1.25rem;
  background:var(--glass);
  border:1px solid var(--pp-line);
  border-left:3px solid var(--cyan);
  border-radius:var(--pp-radius);
  backdrop-filter:blur(8px);
  overflow:hidden;
}

.page-products .page-products__hero-frame::after{
  content:"";
  position:absolute;
  right:-25%;
  bottom:-55%;
  width:65%;
  height:120%;
  background:radial-gradient(circle, rgba(55,242,212,.16) 0%, rgba(55,242,212,0) 68%);
  pointer-events:none;
}

.page-products .page-products__hero-frame h1{
  margin:.65rem 0 .9rem;
  font-size:clamp(2rem,6.4vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.01em;
  max-width:19ch;
}

.page-products .page-products__hero-frame .lede{
  position:relative;
  max-width:48ch;
  color:var(--text-dim);
  font-size:.95rem;
  line-height:1.75;
}

.page-products .page-products__hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.4rem;
}

.page-products .page-products__hero-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
  gap:1rem;
  margin:1.5rem 0 0;
  padding:1.1rem 0 0;
  list-style:none;
  border-top:1px solid var(--pp-line);
}

.page-products .page-products__stat-num{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(1.3rem,3.4vw,2rem);
  line-height:1;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}

.page-products .page-products__stat-label{
  display:block;
  margin-top:.42rem;
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--text-mute);
}

.page-products .page-products__hero-media{
  margin:0;
  align-self:stretch;
}

.page-products .page-products__hero-media img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
  background:var(--ink-hull);
}

.page-products .page-products__lanes-section{
  border-bottom:1px solid var(--pp-line);
}

.page-products .page-products__lanes{
  display:grid;
  gap:.6rem;
  margin-top:1.2rem;
}

.page-products .page-products__lane{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .9rem;
  padding:.8rem .9rem;
  background:linear-gradient(90deg, rgba(18,41,74,.85) 0%, rgba(11,27,51,.55) 100%);
  border:1px solid var(--pp-line);
  border-left:3px solid var(--line);
  border-radius:var(--pp-radius);
  transition:background var(--dur), border-color var(--dur);
}

.page-products .page-products__lane:hover{
  background:linear-gradient(90deg, rgba(18,41,74,.98) 0%, rgba(11,27,51,.7) 100%);
}

.page-products .lane--orange{border-left-color:var(--orange);}
.page-products .lane--purple{border-left-color:var(--purple);}
.page-products .lane--green{border-left-color:var(--green);}

.page-products .page-products__lane .lane__time{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:.85rem;
  font-weight:600;
  color:var(--cyan);
  min-width:3.6rem;
}

.page-products .page-products__lane-body{
  flex:1 1 12rem;
  min-width:0;
}

.page-products .page-products__lane-league{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:0;
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--text-mute);
}

.page-products .page-products__lane-title{
  margin:.18rem 0 0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--text);
}

.page-products .page-products__lane .tag{
  margin-left:auto;
  white-space:nowrap;
}

.page-products .page-products__console-section{
  border-bottom:1px solid var(--pp-line);
}

.page-products .page-products__console{
  display:grid;
  gap:1.2rem;
  margin-top:1.25rem;
}

.page-products .page-products__console-side{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.page-products .page-products__console .tabs{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.page-products .page-products__console .tabs__btn{
  display:flex;
  align-items:center;
  gap:.6rem;
  width:100%;
  padding:.72rem .85rem;
  text-align:left;
  font-family:inherit;
  font-size:.92rem;
  color:var(--text-dim);
  background:rgba(11,27,51,.7);
  border:1px solid var(--pp-line);
  border-left:3px solid transparent;
  border-radius:var(--pp-radius);
  cursor:pointer;
  transition:color var(--dur), background var(--dur), border-color var(--dur);
}

.page-products .page-products__console .tabs__btn:hover{
  color:var(--text);
  border-left-color:var(--cyan-press);
}

.page-products .page-products__console .tabs__btn[aria-selected="true"]{
  color:var(--text);
  background:var(--ink-panel);
  border-left-color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(55,242,212,.16);
}

.page-products .page-products__console .tabs__btn:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

.page-products .page-products__tab-idx{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--cyan);
}

.page-products .page-products__console .tabs__panel{
  padding:1.2rem;
  background:var(--pp-panel);
  border:1px solid var(--pp-line);
  border-top:2px solid var(--cyan);
  border-radius:var(--pp-radius);
  backdrop-filter:blur(8px);
}

.page-products .page-products__console .tabs__panel h3{
  margin:0 0 .55rem;
  font-size:clamp(1.1rem,2.4vw,1.4rem);
  line-height:1.3;
  color:var(--text);
}

.page-products .page-products__console .tabs__panel p{
  margin:0 0 .85rem;
  font-size:.92rem;
  line-height:1.75;
  color:var(--text-dim);
}

.page-products .page-products__checklist{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.5rem;
}

.page-products .page-products__checklist li{
  position:relative;
  padding-left:1.1rem;
  font-size:.88rem;
  line-height:1.7;
  color:var(--text-dim);
}

.page-products .page-products__checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--cyan);
}

.page-products .page-products__chapter-head{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  padding-top:1rem;
  margin-bottom:1.15rem;
  border-top:1px solid var(--pp-line);
}

.page-products .page-products__chapter-num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(1.05rem,2.6vw,1.5rem);
  line-height:1.15;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

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

.page-products .page-products__split p{
  margin:0 0 .9rem;
  font-size:.94rem;
  line-height:1.8;
  color:var(--text-dim);
}

.page-products .page-products__split p.note{
  margin-bottom:0;
}

.page-products .page-products__legend{
  list-style:none;
  margin:1rem 0;
  padding:.9rem 1rem;
  display:grid;
  gap:.5rem;
  background:rgba(11,27,51,.6);
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
}

.page-products .page-products__legend li{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.84rem;
  color:var(--text-dim);
}

.page-products .page-products__figure{
  margin:0;
  display:grid;
  gap:.9rem;
}

.page-products .page-products__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
  background:var(--ink-hull);
}

.page-products .page-products__metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(6.6rem,1fr));
  gap:.7rem;
  margin:1.1rem 0;
}

.page-products .page-products__metric{
  padding:.8rem .85rem;
  background:var(--ink-hull);
  border:1px solid var(--pp-line);
  border-left:2px solid var(--cyan-press);
  border-radius:var(--pp-radius);
}

.page-products .page-products__metric-num{
  display:block;
  font-family:var(--font-mono);
  font-size:1.3rem;
  font-weight:600;
  line-height:1;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}

.page-products .page-products__metric-label{
  display:block;
  margin-top:.4rem;
  font-size:.66rem;
  letter-spacing:.14em;
  color:var(--text-mute);
}

.page-products .page-products__ring-wrap{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  padding:.9rem 1rem;
  background:rgba(11,27,51,.55);
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
}

.page-products .page-products__ring{
  flex:0 0 auto;
  width:96px;
  height:96px;
}

.page-products .page-products__ring-wrap .note{
  flex:1 1 12rem;
  margin:0;
  font-size:.8rem;
  line-height:1.7;
  color:var(--text-mute);
}

.page-products .page-products__scenes{
  display:grid;
  gap:.85rem;
}

.page-products .page-products__scene{
  padding:1rem 1.1rem;
  background:linear-gradient(150deg, rgba(18,41,74,.75) 0%, rgba(11,27,51,.55) 100%);
  border:1px solid var(--pp-line);
  border-top:2px solid var(--line);
  border-radius:var(--pp-radius);
}

.page-products .page-products__scene h3{
  margin:0 0 .45rem;
  font-size:.98rem;
  line-height:1.4;
  color:var(--text);
}

.page-products .page-products__scene p{
  margin:0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--text-dim);
}

.page-products .page-products__steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
}

.page-products .page-products__step{
  position:relative;
  padding:1rem 1.1rem 1rem 3.1rem;
  background:linear-gradient(120deg, rgba(18,41,74,.8) 0%, rgba(11,27,51,.45) 100%);
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
}

.page-products .page-products__step-num{
  position:absolute;
  left:1rem;
  top:1rem;
  font-family:var(--font-mono);
  font-size:1rem;
  font-weight:600;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}

.page-products .page-products__step h3{
  margin:0 0 .3rem;
  font-size:.98rem;
  color:var(--text);
}

.page-products .page-products__step p{
  margin:0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--text-dim);
}

.page-products .page-products__end{
  margin-top:1.5rem;
  padding:1.5rem 1.25rem;
  background:
    radial-gradient(120% 170% at 100% 0%, rgba(55,242,212,.14) 0%, rgba(55,242,212,0) 62%),
    rgba(11,27,51,.78);
  border:1px solid var(--pp-line);
  border-radius:var(--pp-radius);
}

.page-products .page-products__end h2{
  margin:0 0 .6rem;
}

.page-products .page-products__end .note{
  margin:0;
  max-width:60ch;
  font-size:.88rem;
  line-height:1.8;
  color:var(--text-dim);
}

.page-products .page-products__end-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.15rem;
}

@media (min-width:768px){
  .page-products .page-products__hero{
    padding-block:2rem 2.75rem;
  }

  .page-products .page-products__hero-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    align-items:stretch;
    gap:1.5rem;
  }

  .page-products .page-products__hero-frame{
    padding:2rem 1.75rem;
  }

  .page-products .page-products__hero-media img{
    aspect-ratio:auto;
    min-height:100%;
  }

  .page-products .page-products__console{
    grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    align-items:start;
    gap:1.5rem;
  }

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

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

  .page-products .page-products__end{
    padding:2rem 1.75rem;
  }
}

@media (min-width:960px){
  .page-products .page-products__split{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    align-items:start;
    gap:2rem;
  }

  .page-products .page-products__split--flip > :first-child{
    order:2;
  }

  .page-products .page-products__chapter-head{
    gap:1.1rem;
    margin-bottom:1.4rem;
  }

  .page-products .page-products__lanes{
    gap:.7rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .page-products__lane,
  .page-products .page-products__console .tabs__btn{
    transition:none;
  }
}
<<<END>>>