.page-products{
  --pf-rail-w:220px;
  --pf-panel:rgba(11,15,20,.72);
  --pf-panel-soft:rgba(11,15,20,.5);
}

.page-products .pf-hero{padding-block:clamp(18px,3vw,32px) clamp(36px,6vw,72px);}
.page-products .pf-hero__grid{display:grid;gap:clamp(24px,4vw,40px);margin-top:clamp(18px,3vw,34px);}
.page-products .pf-hero__title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,5.4vw,3.9rem);
  line-height:1.03;
  letter-spacing:-.03em;
  color:var(--paper);
  margin:10px 0 18px;
  max-width:16ch;
}
.page-products .pf-hero__lead{max-width:58ch;color:var(--mist);margin:0 0 26px;}
.page-products .pf-hero__actions{gap:12px;}

.page-products .pf-status{
  border:1px solid var(--line-strong);
  border-top:3px solid var(--orange);
  background:var(--pf-panel);
  padding:18px 18px 10px;
}
.page-products .pf-status__head{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);
}
.page-products .pf-status__list{margin:0;}
.page-products .pf-status__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-top:1px solid var(--line);
}
.page-products .pf-status__row:first-child{border-top:0;}
.page-products .pf-status__k{margin:0;color:var(--mist);font-size:13px;}
.page-products .pf-status__v{
  margin:0;font-family:var(--font-mono);font-size:20px;font-weight:600;
  color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.page-products .pf-status__v span{font-size:11px;color:var(--fog);margin-left:2px;letter-spacing:.06em;}

.page-products .pf-console{padding-block:clamp(32px,5vw,64px) clamp(44px,7vw,96px);}
.page-products .pf-console__grid{display:grid;gap:clamp(20px,4vw,48px);}

.page-products .pf-rail__label{
  margin:0 0 10px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fog);
}
.page-products .pf-rail__toc .toc__list{
  display:flex;gap:8px;overflow-x:auto;margin:0;padding:0 0 6px;list-style:none;
}
.page-products .pf-rail__toc .toc__item{flex:0 0 auto;}
.page-products .pf-rail__toc .toc__link{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;white-space:nowrap;
  font-size:13px;color:var(--mist);text-decoration:none;
  border:1px solid var(--line);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.page-products .pf-rail__toc .toc__link .mono{font-size:11px;color:var(--fog);}
.page-products .pf-rail__toc .toc__link:hover{color:var(--paper);border-color:var(--cyan);}
.page-products .pf-rail__toc .toc__link.is-current{color:var(--orange);border-color:var(--orange);}
.page-products .pf-rail__toc .toc__link.is-current .mono{color:var(--orange);}
.page-products .pf-rail__back{margin-top:16px;display:inline-flex;}

.page-products .pf-module{padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line);}
.page-products .pf-module:first-child{border-top:0;padding-top:0;}
.page-products .pf-module__head{margin-bottom:clamp(18px,3vw,28px);}
.page-products .pf-module__head .index-num{
  display:inline-block;margin-bottom:8px;
  color:var(--cyan);font-size:12px;letter-spacing:.14em;
}
.page-products .pf-module__head .h-section{
  margin:0;color:var(--paper);
  font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.16;letter-spacing:-.02em;
  max-width:24ch;
}
.page-products .figure__img{display:block;width:100%;height:auto;object-fit:cover;}
.page-products .figure__caption{margin-top:10px;font-size:12px;line-height:1.6;color:var(--fog);}

.page-products .pf-cal{display:grid;gap:clamp(20px,3vw,36px);}
.page-products .pf-cal__text{margin:0 0 20px;color:var(--mist);font-size:16px;line-height:1.78;max-width:62ch;}
.page-products .pf-filters{
  display:grid;gap:1px;margin-bottom:20px;
  background:var(--line);border:1px solid var(--line);
}
.page-products .pf-filter{display:grid;gap:4px;padding:12px 14px;background:var(--pf-panel);}
.page-products .pf-filter__k{font-size:11px;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;}
.page-products .pf-filter__v{font-size:13px;color:var(--mist);}
.page-products .pf-cal__strip{
  display:flex;gap:8px;overflow-x:auto;margin-bottom:20px;padding-bottom:8px;
  scrollbar-width:thin;
}
.page-products .pf-cal__day{
  flex:0 0 auto;min-width:68px;padding:10px 8px;
  display:grid;gap:2px;text-align:center;
  border:1px solid var(--line-strong);
}
.page-products .pf-cal__dow{font-size:10px;letter-spacing:.1em;color:var(--fog);}
.page-products .pf-cal__num{font-size:22px;line-height:1.1;color:var(--paper);font-variant-numeric:tabular-nums;}
.page-products .pf-cal__cnt{font-size:10px;color:var(--fog);}
.page-products .pf-cal__day.is-on{
  border-color:var(--orange);
  background:rgba(255,106,26,.14);
  box-shadow:inset 0 0 0 1px rgba(255,106,26,.35);
}
.page-products .pf-cal__day.is-on .pf-cal__num{color:var(--orange);}
.page-products .pf-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.page-products .pf-fact{display:grid;gap:3px;padding-top:10px;border-top:2px solid var(--orange);}
.page-products .pf-fact__n{font-size:22px;color:var(--paper);font-family:var(--font-mono);}
.page-products .pf-fact__l{font-size:12px;line-height:1.5;color:var(--fog);}
.page-products .pf-cal__fig{margin:0;}
.page-products .pf-cal__fig .figure__img{aspect-ratio:3/4;}

.page-products .pf-fav-grid{display:grid;gap:clamp(20px,3vw,36px);}
.page-products .pf-fav__text p{margin:0 0 16px;color:var(--mist);line-height:1.78;max-width:60ch;}
.page-products .pf-groups{margin:18px 0 20px;}
.page-products .pf-groups__title{margin:0 0 10px;font-size:11px;letter-spacing:.16em;color:var(--fog);}
.page-products .pf-group-list{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.page-products .pf-group{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--pf-panel);}
.page-products .pf-group__dot{flex:0 0 auto;width:8px;height:8px;background:var(--fog);}
.page-products .pf-group:nth-child(1) .pf-group__dot{background:var(--orange);}
.page-products .pf-group:nth-child(2) .pf-group__dot{background:var(--cyan);}
.page-products .pf-group:nth-child(3) .pf-group__dot{background:var(--green);}
.page-products .pf-group:nth-child(4) .pf-group__dot{background:var(--mist);}
.page-products .pf-group__name{flex:1 1 auto;font-size:14px;color:var(--paper);}
.page-products .pf-group__n{font-size:12px;color:var(--fog);font-variant-numeric:tabular-nums;}
.page-products .pf-fav{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;font:inherit;font-size:14px;font-weight:600;
  color:var(--paper);background:transparent;
  border:1px solid var(--line-strong);cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.page-products .pf-fav:hover{border-color:var(--orange);color:var(--orange);}
.page-products .pf-fav.is-active,
.page-products .pf-fav[aria-pressed="true"]{
  background:var(--orange);border-color:var(--orange);color:var(--carbon);
}
.page-products .pf-fav__hint{margin:10px 0 0;font-size:11px;letter-spacing:.08em;color:var(--fog);}
.page-products .pf-fav__fig{margin:0;}
.page-products .pf-fav__fig .figure__img{aspect-ratio:3/2;}

.page-products .pf-poss{display:grid;gap:clamp(20px,3vw,32px);align-items:center;}
.page-products .pf-poss__card{
  padding:22px;
  background:var(--pf-panel);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--orange);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
  box-shadow:0 18px 40px rgba(3,10,18,.55);
}
.page-products .pf-poss__ring svg{display:block;width:100%;max-width:220px;height:auto;margin:0 auto;}
.page-products .pf-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.page-products .pf-legend__item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mist);font-family:var(--font-mono);}
.page-products .pf-legend__dot{width:8px;height:8px;}
.page-products .pf-legend__dot--home{background:var(--orange);}
.page-products .pf-legend__dot--away{background:var(--cyan);}
.page-products .pf-poss__side p{margin:0 0 16px;color:var(--mist);line-height:1.78;max-width:58ch;}
.page-products .pf-windows{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.page-products .pf-window{padding:8px 14px;font-size:13px;color:var(--mist);border:1px solid var(--line-strong);}
.page-products .pf-window.is-on{background:var(--cyan);border-color:var(--cyan);color:var(--carbon);font-weight:600;}
.page-products .pf-poss__note{margin:0;font-size:12px;line-height:1.7;color:var(--fog);}

.page-products .pf-ptable-wrap{margin-top:clamp(22px,3vw,34px);overflow-x:auto;border:1px solid var(--line);}
.page-products .pf-ptable{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;}
.page-products .pf-ptable__cap{
  caption-side:top;text-align:left;padding:12px 14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);
}
.page-products .pf-ptable th{
  text-align:left;padding:12px 14px;font-size:11px;font-weight:600;
  letter-spacing:.12em;color:var(--cyan);
  background:rgba(34,211,238,.08);
  border-bottom:1px solid var(--line);
}
.page-products .pf-ptable td{
  padding:12px 14px;vertical-align:top;line-height:1.6;
  color:var(--mist);border-bottom:1px solid var(--line);
}
.page-products .pf-ptable tr:last-child td{border-bottom:0;}
.page-products .pf-ptable td:first-child{color:var(--paper);font-weight:600;white-space:nowrap;}
.page-products .pf-poss__fig{margin:clamp(22px,3vw,34px) 0 0;}
.page-products .pf-poss__fig .figure__img{aspect-ratio:3/2;}

.page-products .pf-hl__fig{margin:0 0 clamp(20px,3vw,30px);}
.page-products .pf-hl__fig .figure__img{aspect-ratio:16/9;}
.page-products .pf-hl__cols{display:grid;gap:18px;}
.page-products .pf-hl__cols h3{margin:0 0 8px;font-size:15px;letter-spacing:.02em;color:var(--orange);}
.page-products .pf-hl__cols p{margin:0;font-size:14px;line-height:1.72;color:var(--mist);}

.page-products .pf-vers{display:grid;gap:1px;margin-bottom:24px;background:var(--line);border:1px solid var(--line);}
.page-products .pf-vers__item{background:var(--pf-panel);}
.page-products .pf-vers__s{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;
  padding:16px 18px;font-size:15px;font-weight:600;color:var(--paper);
  cursor:pointer;list-style:none;
}
.page-products .pf-vers__s::-webkit-details-marker{display:none;}
.page-products .pf-vers__s::after{
  content:"+";margin-left:auto;font-family:var(--font-mono);
  font-size:18px;color:var(--orange);
}
.page-products .pf-vers__item[open] .pf-vers__s::after{content:"−";}
.page-products .pf-vers__s .mono{font-size:11px;letter-spacing:.14em;color:var(--cyan);}
.page-products .pf-vers__b{padding:0 18px 18px;}
.page-products .pf-vers__b p{margin:0 0 10px;font-size:14px;line-height:1.75;color:var(--mist);max-width:62ch;}
.page-products .pf-vers__b ul{margin:0;padding-left:18px;font-size:14px;line-height:1.9;color:var(--mist);}
.page-products .pf-vers__b li::marker{color:var(--orange);}

.page-products .pf-steps-sec{padding-block:clamp(40px,6vw,88px);}
.page-products .pf-sec-head{margin-bottom:clamp(22px,3vw,36px);}
.page-products .pf-sec-head .h-section{
  margin:6px 0 0;font-size:clamp(1.4rem,3.2vw,2.3rem);
  line-height:1.14;letter-spacing:-.02em;
}
.page-products .pf-steps-sec .h-section{color:var(--ink);}
.page-products .pf-steps-sec .eyebrow{color:var(--red);}
.page-products .pf-steps{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line-ink);
}
.page-products .pf-step{display:grid;gap:8px;align-content:start;padding:clamp(18px,3vw,26px);background:var(--paper);}
.page-products .pf-step__n{font-family:var(--font-mono);font-size:clamp(28px,5vw,40px);line-height:1;color:var(--orange);}
.page-products .pf-step__t{margin:0;font-size:16px;color:var(--ink);}
.page-products .pf-step__d{margin:0;font-size:14px;line-height:1.75;color:#2c4159;}

.page-products .pf-scenes-sec{padding-block:clamp(40px,6vw,88px);}
.page-products .pf-scenes-sec .h-section{color:var(--paper);}
.page-products .pf-scenes{
  display:grid;gap:1px;margin-bottom:clamp(22px,3vw,34px);
  background:var(--line);border:1px solid var(--line);
}
.page-products .pf-scene{padding:clamp(18px,3vw,26px);background:var(--pf-panel-soft);}
.page-products .pf-scene__k{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.14em;color:var(--orange);}
.page-products .pf-scene h3{margin:0 0 8px;font-size:16px;color:var(--paper);}
.page-products .pf-scene p{margin:0;font-size:14px;line-height:1.75;color:var(--mist);}
.page-products .pf-scenes__fig{margin:0;}
.page-products .pf-scenes__fig .figure__img{aspect-ratio:16/9;}

.page-products .pf-cta{padding-block:clamp(40px,6vw,80px);}
.page-products .pf-cta__in{display:grid;gap:16px;justify-items:start;}
.page-products .pf-cta .h-section{
  margin:0;max-width:22ch;color:var(--paper);
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.02em;
}
.page-products .pf-cta p{margin:0;max-width:56ch;font-size:16px;line-height:1.75;color:var(--mist);}
.page-products .pf-cta .cluster{gap:12px;}

@media (min-width:640px){
  .page-products .pf-filters{grid-template-columns:repeat(2,1fr);}
  .page-products .pf-facts{grid-template-columns:repeat(3,1fr);gap:12px;}
}

@media (min-width:720px){
  .page-products .pf-scenes{grid-template-columns:repeat(2,1fr);}
  .page-products .pf-hl__cols{grid-template-columns:repeat(3,1fr);gap:24px;}
}

@media (min-width:820px){
  .page-products .pf-steps{grid-template-columns:repeat(3,1fr);}
  .page-products .pf-poss{grid-template-columns:minmax(0,.58fr) minmax(0,1fr);}
}

@media (min-width:900px){
  .page-products .pf-hero__grid{grid-template-columns:minmax(0,1fr) 320px;align-items:end;}
}

@media (min-width:920px){
  .page-products .pf-cal{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start;}
  .page-products .pf-fav-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start;}
}

@media (min-width:1000px){
  .page-products .pf-console__grid{grid-template-columns:var(--pf-rail-w) minmax(0,1fr);align-items:start;}
  .page-products .pf-rail__sticky{position:sticky;top:88px;}
  .page-products .pf-rail__toc .toc__list{display:block;overflow:visible;padding:0;gap:0;}
  .page-products .pf-rail__toc .toc__item{flex:none;}
  .page-products .pf-rail__toc .toc__link{
    white-space:normal;border:0;border-left:2px solid transparent;
    padding:8px 0 8px 12px;background:none;
  }
  .page-products .pf-rail__toc .toc__link.is-current{border-left-color:var(--orange);}
}

@media (prefers-reduced-motion:reduce){
  .page-products *{transition:none !important;animation:none !important;}
}
<<<END>>>