.page-products{
  --pp-gap:clamp(18px,2.6vw,34px);
  --pp-rail:180px;
  padding-bottom:clamp(40px,6vw,80px);
}
.page-products [id]{
  scroll-margin-top:110px;
}
.page-products .products-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pp-gap);
  align-items:start;
  padding-top:clamp(8px,2vw,20px);
}
.page-products .hero-copy .eyebrow{
  display:block;
  margin-bottom:14px;
  color:var(--cyan-soft);
}
.page-products h1{
  font-size:clamp(30px,7vw,64px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 18px;
  color:var(--paper);
}
.page-products .lede{
  max-width:34em;
  color:var(--mist);
}
.page-products .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}
.page-products .hero-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  margin:26px 0 0;
  padding:18px 0 0;
  list-style:none;
  border-top:1px solid var(--line-cyan);
}
.page-products .hero-facts li{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.page-products .hero-facts .num{
  font-size:clamp(22px,4.4vw,32px);
  color:var(--cyan);
  line-height:1;
}
.page-products .fact-label{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mist);
}
.page-products .hero-card{
  border-radius:var(--r-lg);
  padding:var(--pad-panel);
  background:linear-gradient(160deg,rgba(255,107,74,.14),rgba(14,42,71,.92) 62%);
  border:1px solid rgba(255,107,74,.36);
  box-shadow:var(--shadow-panel);
}
.page-products .hero-card__head{
  margin-bottom:16px;
}
.page-products .hero-card__head .eyebrow{
  color:var(--coral);
  display:block;
  margin-bottom:8px;
}
.page-products .hero-card__title{
  margin:0;
  font-size:clamp(18px,3vw,22px);
  font-weight:700;
  color:var(--paper);
}
.page-products .fee-quick{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:grid;
  gap:12px;
}
.page-products .fee-quick__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(201,211,220,.22);
}
.page-products .fee-quick__row:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.page-products .fee-quick__text{
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}
.page-products .hero-media{
  margin-top:clamp(24px,4vw,44px);
}

.page-products .desk-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pp-gap);
  margin-top:clamp(28px,5vw,56px);
}
.page-products .desk-rail{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.page-products .desk-rail__label{
  display:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--grid);
}
.page-products .desk-pill{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-cyan);
  background:rgba(14,42,71,.72);
  color:var(--mist);
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.page-products .desk-pill:hover,
.page-products .desk-pill:focus-visible{
  color:var(--deep);
  background:var(--cyan);
  border-color:var(--cyan);
}
.page-products .desk-body{
  display:grid;
  gap:clamp(28px,4.5vw,52px);
  min-width:0;
}
.page-products .desk-section{
  display:grid;
  gap:clamp(18px,2.6vw,28px);
  min-width:0;
}
.page-products .section-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.page-products .section-index{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  padding-top:8px;
  border-top:2px solid var(--cyan);
}
.page-products .section-head h2{
  margin:0 0 10px;
  font-size:clamp(22px,4.2vw,38px);
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:800;
  color:var(--paper);
}
.page-products .section-head .muted{
  margin:0;
  max-width:44em;
  color:var(--mist);
}

.page-products .stack{
  display:grid;
  gap:14px;
}
.page-products .func-panel{
  border-radius:var(--r-md);
  padding:var(--pad-panel);
  background:linear-gradient(150deg,rgba(14,42,71,.96),rgba(7,26,47,.96));
  border:1px solid var(--line-cyan);
  transition:transform .35s ease,border-color .35s ease;
}
.page-products .func-panel:hover{
  transform:translateY(-4px);
  border-color:rgba(31,224,200,.5);
}
.page-products .func-panel__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.page-products .func-panel__no{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--grid);
}
.page-products .func-panel h3{
  margin:0 0 10px;
  font-size:clamp(17px,2.6vw,21px);
  color:var(--paper);
  font-weight:700;
}
.page-products .func-panel p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
}

.page-products .fee-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pp-gap);
  align-items:start;
}
.page-products .fee-cats{
  display:grid;
  gap:12px;
}
.page-products .fee-cat{
  position:relative;
  padding:18px 18px 18px 26px;
  border-radius:var(--r-sm);
  background:rgba(14,42,71,.7);
  border-left:3px solid var(--coral);
}
.page-products .fee-cat__dot{
  position:absolute;
  left:12px;
  top:24px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--coral);
}
.page-products .fee-cat h3{
  margin:0 0 8px;
  font-size:16px;
  color:var(--paper);
  font-weight:700;
}
.page-products .fee-cat p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
}
.page-products .fee-media{
  margin:0;
}
.page-products .fee-tools{
  display:grid;
  gap:12px;
  grid-template-columns:minmax(0,1fr);
}
.page-products .fee-tool{
  padding:18px;
  border-radius:var(--r-sm);
  background:var(--deep-2);
  border:1px solid rgba(43,111,122,.5);
}
.page-products .fee-tool h3{
  margin:0 0 8px;
  font-size:15px;
  color:var(--cyan);
  font-weight:700;
  letter-spacing:.02em;
}
.page-products .fee-tool p{
  margin:0;
  font-size:13.5px;
  line-height:1.75;
  color:var(--mist);
}

.page-products .axis-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pp-gap);
  align-items:start;
}
.page-products .axis-media{
  margin:0;
}
.page-products .axis-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
  position:relative;
}
.page-products .axis-steps li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  padding-left:0;
}
.page-products .axis-steps__no{
  font-size:13px;
  color:var(--yellow);
  padding-top:3px;
  border-right:1px solid rgba(245,197,66,.4);
  padding-right:12px;
}
.page-products .axis-steps h3{
  margin:0 0 6px;
  font-size:16px;
  color:var(--paper);
  font-weight:700;
}
.page-products .axis-steps p{
  margin:0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--mist);
}

.page-products .subscribe-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--pp-gap);
  align-items:start;
}
.page-products .subscribe-copy h3{
  margin:0 0 12px;
  font-size:clamp(17px,2.6vw,21px);
  color:var(--paper);
  font-weight:700;
}
.page-products .subscribe-copy p{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
  max-width:42em;
}
.page-products .subscribe-sub{
  margin-top:26px;
}
.page-products .alert-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-products .alert-item{
  padding:7px 15px;
  border-radius:var(--r-pill);
  font-size:13px;
  color:var(--cyan-soft);
  border:1px solid rgba(143,245,232,.4);
  background:rgba(31,224,200,.08);
  font-family:var(--font-mono);
  letter-spacing:.04em;
}
.page-products .cycle-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.page-products .cycle-card{
  padding:14px 16px;
  border-radius:var(--r-sm);
  background:rgba(230,237,243,.06);
  border:1px solid rgba(201,211,220,.16);
}
.page-products .cycle-card__name{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--coral);
  margin-bottom:6px;
  letter-spacing:.04em;
}
.page-products .cycle-card p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}
.page-products .subscribe-media{
  margin:0;
}

.page-products .device-media{
  margin:0;
}
.page-products .device-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.page-products .device-card{
  padding:18px;
  border-radius:var(--r-md);
  background:rgba(14,42,71,.82);
  border:1px solid var(--line-cyan);
}
.page-products .device-card .eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--grid);
  letter-spacing:.16em;
}
.page-products .device-card h3{
  margin:0 0 8px;
  font-size:16px;
  color:var(--paper);
  font-weight:700;
}
.page-products .device-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--mist);
}
.page-products .perf-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:rgba(43,111,122,.45);
  border-radius:var(--r-md);
  overflow:hidden;
}
.page-products .perf-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px;
  background:var(--deep);
}
.page-products .perf-item .num{
  font-size:clamp(20px,3.6vw,28px);
  color:var(--cyan);
  line-height:1;
}
.page-products .perf-label{
  font-size:12.5px;
  line-height:1.6;
  color:var(--mist);
}

.page-products .combo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
}
.page-products .combo-card{
  padding:var(--pad-panel);
  border-radius:var(--r-md);
  background:linear-gradient(170deg,rgba(14,42,71,.94),rgba(7,26,47,.98));
  border:1px solid var(--line-cyan);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-products .combo-card--accent{
  border-color:rgba(31,224,200,.55);
  background:linear-gradient(170deg,rgba(31,224,200,.12),rgba(7,26,47,.98) 58%);
}
.page-products .combo-card__level{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  padding:4px 12px;
  border-radius:var(--r-pill);
  color:var(--deep);
  background:var(--mist);
}
.page-products .combo-card--accent .combo-card__level{
  background:var(--cyan);
}
.page-products .combo-card h3{
  margin:0;
  font-size:clamp(17px,2.6vw,20px);
  color:var(--paper);
  font-weight:700;
}
.page-products .combo-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--mist);
}
.page-products .combo-list{
  list-style:none;
  margin:auto 0 0;
  padding:12px 0 0;
  border-top:1px dashed rgba(201,211,220,.22);
  display:grid;
  gap:7px;
}
.page-products .combo-list li{
  font-size:13px;
  color:var(--cyan-soft);
  padding-left:16px;
  position:relative;
  line-height:1.6;
}
.page-products .combo-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--coral);
}

.page-products .next-panel{
  border-radius:var(--r-lg);
  padding:var(--pad-panel);
  background:linear-gradient(120deg,rgba(31,224,200,.1),rgba(14,42,71,.94) 60%);
  border:1px solid var(--line-cyan);
}
.page-products .next-panel h2{
  margin:0 0 18px;
  font-size:clamp(20px,3.4vw,28px);
  color:var(--paper);
  font-weight:800;
  letter-spacing:-.01em;
}
.page-products .next-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
.page-products .next-link{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px;
  border-radius:var(--r-sm);
  background:rgba(3,16,28,.5);
  border:1px solid rgba(201,211,220,.14);
  text-decoration:none;
  transition:border-color .25s ease,transform .25s ease;
}
.page-products .next-link:hover,
.page-products .next-link:focus-visible{
  border-color:var(--cyan);
  transform:translateY(-3px);
}
.page-products .next-link .eyebrow{
  color:var(--grid);
  letter-spacing:.16em;
}
.page-products .next-link strong{
  color:var(--paper);
  font-size:16px;
}
.page-products .next-link .muted{
  font-size:13px;
  line-height:1.7;
}
.page-products .media-frame__img{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:cover;
}

@media (min-width:640px){
  .page-products .fee-tools{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .device-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .cycle-row{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .perf-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .next-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-products .products-hero{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    gap:clamp(24px,3vw,48px);
  }
  .page-products .desk-layout{
    grid-template-columns:var(--pp-rail) minmax(0,1fr);
    gap:clamp(24px,3.4vw,52px);
    align-items:start;
  }
  .page-products .desk-rail{
    position:sticky;
    top:104px;
    flex-direction:column;
    overflow:visible;
    padding-bottom:0;
  }
  .page-products .desk-rail__label{
    display:block;
    margin-bottom:10px;
  }
  .page-products .desk-pill{
    width:100%;
    text-align:left;
  }
  .page-products .stack{
    gap:16px;
  }
  .page-products .func-panel:nth-child(2){
    margin-left:clamp(12px,2vw,26px);
  }
  .page-products .func-panel:nth-child(3){
    margin-left:clamp(24px,4vw,52px);
  }
  .page-products .func-panel:nth-child(4){
    margin-left:clamp(36px,6vw,78px);
  }
  .page-products .fee-layout{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  }
  .page-products .axis-layout{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  }
  .page-products .subscribe-layout{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  }
  .page-products .device-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .combo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .hero-facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
  }
  .page-products .hero-facts li{
    padding:0 16px;
    border-left:1px solid var(--line-cyan);
  }
  .page-products .hero-facts li:first-child{
    padding-left:0;
    border-left:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .func-panel,
  .page-products .desk-pill,
  .page-products .next-link{
    transition:none;
  }
  .page-products .func-panel:hover,
  .page-products .next-link:hover,
  .page-products .next-link:focus-visible{
    transform:none;
  }
}
<<<END>>>