.page-products#main-content{padding-block-start:0;}

.page-products{
  --xp-gap:clamp(18px,3vw,34px);
  --xp-card:linear-gradient(155deg,rgba(13,42,33,.97),rgba(6,23,18,.97));
}

/* ---------- hero ---------- */
.page-products .xp-hero{
  position:relative;
  overflow:hidden;
  border-bottom:2px solid var(--line);
  padding-block:calc(var(--header-h) + clamp(26px,5vw,62px)) clamp(30px,5vw,64px);
  background:
    radial-gradient(120% 95% at 86% 0%,rgba(53,167,255,.20),transparent 58%),
    radial-gradient(95% 85% at 6% 4%,rgba(200,255,61,.14),transparent 62%),
    linear-gradient(175deg,#04120E 0%,var(--ink) 58%,#061a14 100%);
}
.page-products .xp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(90deg,rgba(30,74,58,.55) 1px,transparent 1px);
  background-size:clamp(56px,9vw,112px) 100%;
  opacity:.26;
}
.page-products .xp-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(24px,4vw,46px);
}
.page-products .xp-hero .breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 18px;
  padding:0;
  list-style:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mist);
}
.page-products .xp-hero .breadcrumb li+li::before{content:"/";margin-inline-end:8px;color:var(--line);}
.page-products .xp-hero .breadcrumb a{color:var(--silver);text-decoration:none;border-bottom:1px solid transparent;}
.page-products .xp-hero .breadcrumb a:hover,.page-products .xp-hero .breadcrumb a:focus-visible{color:var(--lime);border-bottom-color:var(--lime);}
.page-products .xp-hero h1{margin:10px 0 16px;max-width:16ch;}
.page-products .xp-hero .lede{max-width:46ch;color:var(--silver);}
.page-products .xp-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.page-products .xp-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:26px 0 0;
  padding-top:18px;
  border-top:2px solid var(--line);
}
.page-products .xp-stats .stat{
  border-left:2px solid var(--line);
  padding-left:10px;
}
.page-products .xp-stats .stat__label{display:block;order:2;margin-top:4px;}
.page-products .xp-stats .stat__num{font-family:var(--font-mono);color:var(--amber);font-size:clamp(1.1rem,2.2vw,1.5rem);}

/* hero deck */
.page-products .xp-deck{
  position:relative;
  border:2px solid var(--line);
  background:var(--xp-card);
  box-shadow:var(--shadow-hard);
  padding:18px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.page-products .xp-deck::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,var(--lime),var(--pulse) 55%,transparent);
}
.page-products .xp-deck__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.page-products .xp-deck__hint{
  margin:0 0 16px;
  font-size:13px;
  color:var(--mist);
}
.page-products .xp-deck__rows{
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .xp-deck__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 10px;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.page-products .xp-deck__no{
  grid-row:span 2;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--lime);
  padding-top:2px;
}
.page-products .xp-deck__row-name{
  font-weight:500;
  color:var(--paper);
  font-size:14px;
}
.page-products .xp-deck__row-meta{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--mist);
}
.page-products .xp-deck__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--line);
}
.page-products .xp-deck__cap{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--mist);
}

/* ---------- .page-products layout ---------- */
.page-products .xp-body{padding-block:clamp(30px,5vw,68px);}
.page-products .xp-layout{display:grid;gap:clamp(22px,3vw,40px);}
.page-products .xp-index{
  border:2px solid var(--line);
  background:rgba(13,42,33,.6);
  padding:16px;
}
.page-products .xp-index .plate{margin-bottom:12px;}
.page-products .xp-index__list{
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .xp-index__link{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:9px 10px;
  color:var(--silver);
  text-decoration:none;
  font-size:14px;
  border-left:2px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.page-products .xp-index__link span{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mist);
}
.page-products .xp-index__link:hover,
.page-products .xp-index__link:focus-visible{
  color:var(--paper);
  background:rgba(30,74,58,.5);
  border-left-color:var(--lime);
}
.page-products .xp-index__link.is-active{
  color:var(--lime);
  border-left-color:var(--lime);
  background:rgba(200,255,61,.08);
}
.page-products .xp-index__link.is-active span{color:var(--lime);}

.page-products .xp-flow{display:grid;gap:clamp(26px,4vw,52px);}
.page-products .xp-block{
  scroll-margin-top:calc(var(--header-h) + 18px);
  border-top:2px solid var(--line);
  padding-top:clamp(24px,3.5vw,40px);
}
.page-products .xp-block__head{max-width:60ch;}
.page-products .xp-block__head .plate{margin-bottom:10px;}
.page-products .xp-block__head h2{margin:0 0 12px;}
.page-products .xp-block__lead{
  margin:0;
  color:var(--silver);
  font-size:16px;
  line-height:1.65;
}
.page-products .xp-block__grid{display:grid;gap:clamp(18px,3vw,30px);margin-top:clamp(20px,3vw,30px);}
.page-products .xp-block__side{display:grid;gap:16px;align-content:start;}
.page-products .xp-block__side>p{margin:0;color:var(--silver);}

/* entry card */
.page-products .xp-entry{
  display:grid;
  gap:8px 14px;
  margin-top:20px;
  padding:14px 16px;
  border:2px solid var(--line);
  background:var(--xp-card);
  box-shadow:var(--shadow-hard);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.page-products .xp-entry__no{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--lime);
  text-transform:uppercase;
}
.page-products .xp-entry__text{margin:0;color:var(--paper);font-size:14px;line-height:1.55;}
.page-products .xp-entry .btn{justify-self:start;}

/* chips + filters */
.page-products .xp-round{margin-top:clamp(18px,3vw,26px);}
.page-products .xp-round__label,
.page-products .xp-views .xp-round__label{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mist);
}
.page-products .xp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  position:relative;
}
.page-products .xp-chip-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.page-products .xp-chip{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border:2px solid var(--line);
  background:rgba(7,26,20,.7);
  color:var(--silver);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.page-products .xp-chip:hover{border-color:var(--lime-deep);color:var(--paper);}
.page-products .xp-chip-input:checked+.xp-chip{
  border-color:var(--lime);
  background:rgba(200,255,61,.14);
  color:var(--lime);
}
.page-products .xp-chip-input:focus-visible+.xp-chip{
  outline:2px solid var(--lime);
  outline-offset:2px;
}

/* collection panels */
.page-products .xp-round-panels{margin-top:16px;}
.page-products .xp-round-panels>[data-panel]{display:grid;gap:2px;margin:0;padding:0;list-style:none;}
.page-products .xp-round:has(.xp-chip-input:checked) .xp-round-panels>[data-panel]{display:none;}
.page-products .xp-round:has(#xp-r1:checked) [data-panel="1"],
.page-products .xp-round:has(#xp-r2:checked) [data-panel="2"],
.page-products .xp-round:has(#xp-r3:checked) [data-panel="3"],
.page-products .xp-round:has(#xp-r4:checked) [data-panel="4"]{display:grid;}

.page-products .xp-match{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--line);
  background:rgba(13,42,33,.5);
}
.page-products .xp-match__no{
  grid-row:span 2;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--lime);
}
.page-products .xp-match__body{display:grid;gap:3px;min-width:0;}
.page-products .xp-match__name{color:var(--paper);font-size:14px;font-weight:500;}
.page-products .xp-match__meta{font-family:var(--font-mono);font-size:12px;color:var(--mist);}
.page-products .xp-match>.tag{grid-column:2;justify-self:start;}

.page-products .xp-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.page-products .xp-quick__item{
  padding:7px 12px;
  border:1px dashed var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--silver);
}

/* panels (scoped tweaks) */
.page-products .panel{
  margin-top:20px;
  border:2px solid var(--line);
  background:rgba(13,42,33,.55);
  padding:16px 18px;
}
.page-products .panel p{margin:0;color:var(--silver);font-size:14px;line-height:1.6;}
.page-products .panel__title{
  margin:0 0 6px !important;
  font-family:var(--font-mono);
  font-size:12px !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lime) !important;
}
.page-products .panel--amber{border-left:3px solid var(--amber);}
.page-products .panel--amber .panel__title{color:var(--amber) !important;}
.page-products .panel--pulse{border-left:3px solid var(--pulse);}
.page-products .panel--pulse .panel__title{color:var(--pulse) !important;}

.page-products .xp-points{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .xp-points li{
  position:relative;
  padding-left:18px;
  color:var(--silver);
  font-size:14px;
  line-height:1.6;
}
.page-products .xp-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:2px;
  background:var(--lime);
}
.page-products .xp-points--strong li{padding-block:6px;border-bottom:1px solid var(--line);}
.page-products .xp-points--strong strong{color:var(--paper);}

.page-products .note{
  margin-top:14px;
  border:1px dashed var(--line);
  padding:10px 12px;
  font-size:13px;
  color:var(--mist);
}

/* phone wireframe */
.page-products .xp-phone{
  border:2px solid var(--line);
  background:linear-gradient(170deg,#0b241c,#061713);
  padding:14px;
  box-shadow:var(--shadow-soft);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
}
.page-products .xp-phone__bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:2px solid var(--lime-deep);
  background:rgba(200,255,61,.07);
}
.page-products .xp-phone__search{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--silver);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-products .xp-phone__star{
  color:var(--pulse);
  font-size:13px;
}
.page-products .xp-phone__toggle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  position:relative;
  margin-top:12px;
}
.page-products .xp-phone__screen{
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.page-products .xp-phone__list{
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .xp-phone__list li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 0;
  border-bottom:1px solid rgba(30,74,58,.7);
  font-size:13px;
  color:var(--silver);
}
.page-products .xp-phone__list em{
  margin-left:auto;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--amber);
}
.page-products .xp-phone__dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--pulse);
}
.page-products .xp-phone__dot--amber{background:var(--amber);}
.page-products .xp-phone__foot{
  margin:12px 0 0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--mist);
}
.page-products .xp-phone__screen:has(~ * ){ }
.page-products .xp-phone:has(#xp-tab-a:checked) [data-tab="b"],
.page-products .xp-phone:has(#xp-tab-b:checked) [data-tab="a"]{display:none;}

/* standings views */
.page-products .xp-views{margin-top:clamp(18px,3vw,26px);}
.page-products .xp-view-panels{margin-top:16px;}
.page-products .xp-view-panels>[data-view]{display:none;}
.page-products .xp-views:has(#xp-v1:checked) [data-view="1"],
.page-products .xp-views:has(#xp-v2:checked) [data-view="2"],
.page-products .xp-views:has(#xp-v3:checked) [data-view="3"]{display:block;}
.page-products .xp-table-wrap{overflow-x:auto;}
.page-products .xp-table{
  width:100%;
  border-collapse:collapse;
  min-width:420px;
  font-size:14px;
}
.page-products .xp-table caption{
  text-align:left;
  padding-bottom:10px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mist);
}
.page-products .xp-table th,
.page-products .xp-table td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--line);
  color:var(--silver);
  white-space:nowrap;
}
.page-products .xp-table th{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mist);
  border-bottom:2px solid var(--line);
}
.page-products .xp-table td:first-child,
.page-products .xp-table th:first-child{color:var(--mist);font-family:var(--font-mono);}
.page-products .xp-row--watch td{background:rgba(255,176,32,.08);color:var(--paper);}
.page-products .xp-row--watch td:first-child{color:var(--amber);}
.page-products .xp-num{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--amber);
}
.page-products .xp-row--watch .xp-num{color:var(--paper);}
.page-products .xp-trend{
  display:block;
  width:70px;
  height:8px;
  background:rgba(201,211,208,.14);
  border:1px solid var(--line);
}
.page-products .xp-trend__fill{display:block;height:100%;background:linear-gradient(90deg,var(--lime-deep),var(--amber));}
.page-products .xp-trend__fill--a{width:88%;}
.page-products .xp-trend__fill--b{width:68%;}
.page-products .xp-trend__fill--c{width:46%;}
.page-products .xp-trend__fill--d{width:24%;}

/* steps */
.page-products .xp-steps{
  display:grid;
  gap:10px;
  margin-top:clamp(20px,3vw,28px);
}
.page-products .xp-step{
  border:2px solid var(--line);
  background:rgba(13,42,33,.55);
  padding:0;
}
.page-products .xp-step[open]{border-color:var(--lime-deep);background:rgba(200,255,61,.06);}
.page-products .xp-step summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
}
.page-products .xp-step summary::-webkit-details-marker{display:none;}
.page-products .xp-step summary:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;}
.page-products .xp-step__no{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--lime);
}
.page-products .xp-step__title{
  font-weight:700;
  color:var(--paper);
  font-size:15px;
}
.page-products .xp-step p{
  margin:0;
  padding:0 16px 16px;
  color:var(--silver);
  font-size:14px;
  line-height:1.65;
}

/* timeline */
.page-products .xp-timeline{
  display:grid;
  gap:2px;
  margin:clamp(20px,3vw,28px) 0 0;
  padding:0;
  list-style:none;
  border-left:2px solid var(--line);
}
.page-products .xp-timeline__item{
  display:grid;
  gap:4px 16px;
  padding:14px 0 14px 18px;
  position:relative;
  border-bottom:1px solid rgba(30,74,58,.6);
}
.page-products .xp-timeline__item::before{
  content:"";
  position:absolute;
  left:-6px;
  top:22px;
  width:10px;
  height:10px;
  background:var(--lime);
  border:2px solid var(--ink);
}
.page-products .xp-timeline__year{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--amber);
}
.page-products .xp-timeline__body h3{margin:0 0 6px;color:var(--paper);font-size:16px;}
.page-products .xp-timeline__body p{margin:0;color:var(--silver);font-size:14px;line-height:1.65;}

/* scenes */
.page-products .xp-scenes{
  display:grid;
  gap:14px;
  margin:clamp(20px,3vw,28px) 0 0;
  padding:0;
  list-style:none;
}
.page-products .xp-scene{
  position:relative;
  border:2px solid var(--line);
  background:var(--xp-card);
  padding:18px;
}
.page-products .xp-scene::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:0;
  width:3px;
  height:100%;
  background:linear-gradient(180deg,var(--lime),transparent 80%);
}
.page-products .xp-scene__no{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--lime);
}
.page-products .xp-scene h3{margin:6px 0 8px;color:var(--paper);font-size:17px;}
.page-products .xp-scene p{margin:0;color:var(--silver);font-size:14px;line-height:1.65;}

/* partners */
.page-products .xp-partners{
  display:grid;
  gap:18px;
  margin-top:clamp(20px,3vw,28px);
}
.page-products .xp-partners__main p{margin:0 0 14px;color:var(--silver);font-size:15px;line-height:1.7;}
.page-products .xp-partners__card{
  border:2px solid var(--lime-deep);
  background:rgba(200,255,61,.07);
  padding:18px;
  box-shadow:var(--shadow-hard);
}
.page-products .xp-partners__card .plate{margin-bottom:10px;}
.page-products .xp-partners__card p{color:var(--silver);font-size:14px;line-height:1.6;margin:0 0 16px;}

/* closing */
.page-products .xp-closing{
  border:2px solid var(--line);
  background:linear-gradient(140deg,rgba(13,42,33,.9),rgba(6,23,18,.95));
  padding:clamp(20px,3vw,32px);
}
.page-products .xp-closing h2{margin:0 0 10px;color:var(--paper);}
.page-products .xp-closing>p{margin:0 0 18px;color:var(--silver);font-size:15px;line-height:1.65;max-width:62ch;}
.page-products .xp-closing__links{display:flex;flex-wrap:wrap;gap:10px;}

/* media frames */
.page-products .media-frame{margin:clamp(20px,3vw,28px) 0 0;}
.page-products .media-frame img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  border:2px solid var(--line);
}
.page-products .media-frame__caption{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--mist);
}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .page-products .xp-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .xp-match{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;}
  .page-products .xp-match__no{grid-row:auto;}
  .page-products .xp-match>.tag{grid-column:3;justify-self:end;}
  .page-products .xp-scenes{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:900px){
  .page-products .xp-hero__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:start;
  }
  .page-products .xp-block__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;
  }
  .page-products .xp-block__grid--flip{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  }
  .page-products .xp-timeline__item{grid-template-columns:88px minmax(0,1fr);align-items:baseline;}
  .page-products .xp-partners{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);align-items:start;}
}

@media (min-width:1000px){
  .page-products .xp-layout{
    grid-template-columns:minmax(180px,232px) minmax(0,1fr);
    align-items:start;
  }
  .page-products .xp-index{
    position:sticky;
    top:calc(var(--header-h) + 20px);
  }
  .page-products .xp-flow{gap:clamp(34px,4vw,58px);}
}

@media (prefers-reduced-motion:reduce){
  .page-products .xp-chip,
  .page-products .xp-index__link{transition:none;}
}
<<<END>>>