.page-products{
  --pp-index-w:208px;
  --pp-canvas-max:940px;
  background:var(--ink-900);
  color:var(--paper);
}

.page-products [id]{
  scroll-margin-top:calc(var(--head-h) + 20px);
}

.page-products .pp-hero{
  position:relative;
  overflow:hidden;
  padding:calc(var(--head-h) + 38px) 0 56px;
  background:
    radial-gradient(92% 78% at 94% -6%,rgba(185,255,61,.18),transparent 62%),
    linear-gradient(158deg,#102b23 0%,var(--ink-900) 54%,#0a1714 100%);
}

.page-products .pp-hero::after{
  content:"";
  position:absolute;
  right:-14%;
  bottom:-46%;
  width:70%;
  height:130%;
  background:linear-gradient(200deg,rgba(92,225,194,.12),transparent 68%);
  transform:rotate(13deg);
  pointer-events:none;
}

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

.page-products .breadcrumb{
  margin-bottom:26px;
  font-size:13px;
  color:var(--mute);
}

.page-products .pp-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
}

.page-products .pp-hero__lead h1{
  margin:14px 0 0;
  font-size:clamp(30px,6.2vw,56px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:900;
  color:var(--paper);
  max-width:15em;
}

.page-products .pp-hero__lead .eyebrow{
  color:var(--lime);
}

.page-products .pp-hero__text{
  margin:18px 0 0;
  max-width:34em;
  font-size:16px;
  line-height:1.8;
  color:rgba(233,239,234,.82);
}

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

.page-products .pp-hero__stat{
  position:relative;
  padding:22px 22px 26px;
  background:linear-gradient(168deg,rgba(22,51,43,.96),rgba(18,20,22,.96));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}

.page-products .pp-hero__stat::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,var(--lime),rgba(185,255,61,0));
}

.page-products .pp-stat-head{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
}

.page-products .pp-stat-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 16px;
}

.page-products .pp-stat-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"num unit" "label label";
  align-items:baseline;
  column-gap:4px;
  padding-left:12px;
  border-left:1px solid var(--rule);
}

.page-products .pp-stat-num{
  grid-area:num;
  font-size:30px;
  line-height:1.05;
  font-weight:700;
  color:var(--lime);
  text-shadow:0 0 18px rgba(185,255,61,.35);
}

.page-products .pp-stat-unit{
  grid-area:unit;
  font-size:12px;
  color:var(--cyan);
}

.page-products .pp-stat-label{
  grid-area:label;
  margin-top:6px;
  font-size:12px;
  line-height:1.5;
  color:var(--mute);
}

.page-products .pp-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding-bottom:72px;
}

.page-products .pp-index{
  display:none;
  padding-top:12px;
}

.page-products .pp-index__title{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 6px;
}

.page-products .pp-index__list{
  list-style:none;
  margin:0;
  padding:0;
}

.page-products .pp-index__list a{
  display:block;
  padding:9px 0 9px 14px;
  font-size:13px;
  line-height:1.4;
  color:var(--mute);
  text-decoration:none;
  border-left:1px solid var(--rule);
  transition:color .15s var(--ease),border-color .15s var(--ease);
}

.page-products .pp-index__list a .mono{
  display:inline-block;
  margin-right:6px;
  font-size:11px;
  color:var(--rule);
}

.page-products .pp-index__list a:hover,
.page-products .pp-index__list a:focus-visible{
  color:var(--lime);
  border-left-color:var(--lime);
}

.page-products .pp-index__list a:hover .mono,
.page-products .pp-index__list a:focus-visible .mono{
  color:var(--cyan);
}

.page-products .pp-canvas{
  min-width:0;
  max-width:var(--pp-canvas-max);
}

.page-products .pp-sec{
  padding-top:52px;
}

.page-products .pp-sec--last{
  padding-bottom:8px;
}

.page-products .pp-sec__head{
  max-width:44em;
}

.page-products .pp-sec__head .eyebrow{
  color:var(--cyan);
}

.page-products .pp-sec__head h2{
  margin:10px 0 0;
  font-size:clamp(23px,4.2vw,34px);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:900;
  color:var(--paper);
}

.page-products .pp-sec__intro{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.8;
  color:rgba(233,239,234,.76);
}

.page-products .pp-audience{
  margin-top:26px;
  border-top:1px solid var(--rule);
}

.page-products .pp-aud{
  padding:22px 0;
  border-bottom:1px solid var(--rule);
}

.page-products .pp-aud__no{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ember);
}

.page-products .pp-aud h3{
  margin:8px 0 0;
  font-size:18px;
  font-weight:700;
  color:var(--paper);
  letter-spacing:-.01em;
}

.page-products .pp-aud p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(233,239,234,.74);
}

.page-products .pp-link{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  color:var(--lime);
  text-decoration:none;
  border-bottom:1px solid rgba(185,255,61,.4);
  padding-bottom:2px;
}

.page-products .pp-link:hover,
.page-products .pp-link:focus-visible{
  border-bottom-color:var(--lime);
}

.page-products .pp-steps{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}

.page-products .pp-step{
  position:relative;
  padding:22px 20px 20px;
  background:linear-gradient(180deg,rgba(22,51,43,.86),rgba(18,20,22,.94));
  border-bottom:1px solid var(--rule);
}

.page-products .pp-step::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:54px;
  height:2px;
  background:linear-gradient(90deg,var(--lime),transparent);
}

.page-products .pp-step__no{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--lime);
}

.page-products .pp-step h3{
  margin:10px 0 0;
  font-size:17px;
  font-weight:700;
  color:var(--paper);
}

.page-products .pp-step p{
  margin:9px 0 0;
  font-size:14px;
  line-height:1.75;
  color:rgba(233,239,234,.74);
}

.page-products .pp-figure{
  margin:26px 0 0;
}

.page-products .pp-figure--tight{
  margin-top:20px;
}

.page-products .pp-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  border:1px solid var(--rule);
  background:var(--ink-800);
}

.page-products .pp-figure__cap{
  margin:10px 0 0;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  letter-spacing:.02em;
  color:var(--mute);
}

.page-products .pp-board{
  position:relative;
  margin-top:26px;
  padding:20px 18px 22px;
  background:linear-gradient(150deg,rgba(22,51,43,.92),rgba(18,20,22,.96));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}

.page-products .pp-board::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,var(--lime),rgba(92,225,194,.2),transparent);
}

.page-products .pp-board__head{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}

.page-products .pp-board__tag{
  font-size:11px;
  letter-spacing:.2em;
  color:var(--mute);
}

.page-products .pp-badge{
  display:inline-block;
  padding:4px 10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:#0B1F1A;
  background:var(--ember);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

.page-products .pp-board__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  margin-top:18px;
}

.page-products .pp-metrics{
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;
}

.page-products .pp-metric{
  padding:13px 0;
  border-bottom:1px solid rgba(44,58,52,.9);
}

.page-products .pp-metric dt{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
}

.page-products .pp-metric dd{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:rgba(233,239,234,.78);
}

.page-products .pp-pitch{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  background:var(--ink-900);
  border:1px solid var(--rule);
}

.page-products .pp-board__legend{
  margin:8px 0 0;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}

.page-products .pp-board__notes{
  list-style:none;
  margin:18px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--rule);
  display:grid;
  gap:10px;
}

.page-products .pp-board__notes li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(233,239,234,.76);
}

.page-products .pp-board__notes li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  background:var(--lime);
}

.page-products .pp-band{
  position:relative;
  margin-top:52px;
  overflow:hidden;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

.page-products .pp-band img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  filter:saturate(.85) brightness(.72);
}

.page-products .pp-band__text{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  margin:0;
  font-size:clamp(15px,2.6vw,22px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  color:var(--paper);
  text-shadow:0 2px 18px rgba(11,31,26,.9);
}

.page-products .pp-tl{
  list-style:none;
  margin:26px 0 0;
  padding:0 0 0 18px;
  border-left:2px solid rgba(185,255,61,.3);
}

.page-products .pp-tl li{
  position:relative;
  padding:0 0 22px 8px;
}

.page-products .pp-tl li:last-child{
  padding-bottom:0;
}

.page-products .pp-tl li::before{
  content:"";
  position:absolute;
  left:-27px;
  top:5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ink-900);
  border:2px solid var(--lime);
  box-sizing:content-box;
}

.page-products .pp-tl__k{
  display:block;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ember);
}

.page-products .pp-tl p{
  margin:7px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(233,239,234,.76);
}

.page-products .pp-facts{
  list-style:none;
  margin:24px 0 0;
  padding:0;
}

.page-products .pp-facts li{
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  font-size:14.5px;
  line-height:1.8;
  color:rgba(233,239,234,.78);
}

.page-products .pp-facts .mono{
  display:inline-block;
  min-width:76px;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--cyan);
}

.page-products .pp-scenes{
  margin-top:26px;
  border-top:1px solid var(--rule);
}

.page-products .pp-scene{
  padding:22px 0;
  border-bottom:1px solid var(--rule);
}

.page-products .pp-scene h3{
  margin:0;
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  color:var(--paper);
  letter-spacing:-.01em;
}

.page-products .pp-scene p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(233,239,234,.74);
}

.page-products .pp-scene__tag{
  margin-top:14px;
}

.page-products .pp-support{
  margin-top:26px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}

.page-products .pp-support__card{
  display:block;
  padding:20px 18px;
  text-decoration:none;
  color:inherit;
  background:linear-gradient(180deg,rgba(22,51,43,.7),rgba(18,20,22,.9));
  border-left:2px solid var(--rule);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}

.page-products .pp-support__card .mono{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--mute);
}

.page-products .pp-support__card h3{
  margin:9px 0 0;
  font-size:16px;
  font-weight:700;
  color:var(--paper);
}

.page-products .pp-support__card p{
  margin:8px 0 0;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(233,239,234,.72);
}

.page-products .pp-support__card:hover,
.page-products .pp-support__card:focus-visible{
  border-left-color:var(--lime);
  background:linear-gradient(180deg,rgba(28,62,52,.8),rgba(18,20,22,.94));
}

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

.page-products .has-js [data-reveal]:not(.is-revealed){
  opacity:0;
  transform:translateY(18px);
}

.page-products [data-reveal="1"]{
  transition-delay:.07s;
}

.page-products [data-reveal="2"]{
  transition-delay:.14s;
}

.page-products [data-reveal="3"]{
  transition-delay:.21s;
}

@media (min-width:620px){
  .page-products .pp-scene{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:24px;
    align-items:start;
  }
  .page-products .pp-scene h3,
  .page-products .pp-scene p{
    grid-column:1;
  }
  .page-products .pp-scene__tag{
    grid-column:2;
    grid-row:1;
    margin-top:2px;
  }
  .page-products .pp-support{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:820px){
  .page-products .pp-audience{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .pp-aud{
    padding:26px 24px 26px 0;
    border-right:1px solid var(--rule);
  }
  .page-products .pp-aud:last-child{
    border-right:0;
    padding-right:0;
  }
  .page-products .pp-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
  }
  .page-products .pp-board__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:26px;
    align-items:start;
  }
  .page-products .pp-band__text{
    left:36px;
    bottom:28px;
    max-width:22em;
  }
}

@media (min-width:900px){
  .page-products .pp-hero{
    padding:calc(var(--head-h) + 52px) 0 72px;
  }
  .page-products .pp-hero__grid{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
    gap:56px;
    align-items:end;
  }
  .page-products .pp-stat-num{
    font-size:34px;
  }
}

@media (min-width:960px){
  .page-products .pp-body{
    grid-template-columns:var(--pp-index-w) minmax(0,1fr);
    gap:56px;
    align-items:start;
  }
  .page-products .pp-index{
    display:block;
    position:sticky;
    top:calc(var(--head-h) + 32px);
    padding-top:56px;
  }
  .page-products .pp-devices{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:30px;
    align-items:start;
  }
  .page-products .pp-devices .pp-facts{
    margin-top:20px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products [data-reveal]{
    transition:none;
    transform:none;
    opacity:1;
  }
  .page-products .has-js [data-reveal]:not(.is-revealed){
    opacity:1;
    transform:none;
  }
  .page-products .pp-support__card{
    transition:none;
  }
}
<<<END>>>