.page-products{
  --p-gap:clamp(16px,2.4vw,28px);
  --p-card:rgba(11,43,36,.74);
  --p-card-soft:rgba(11,43,36,.46);
  background:
    radial-gradient(1000px 520px at 88% -12%,rgba(53,242,208,.16),transparent 66%),
    radial-gradient(760px 460px at 0% 16%,rgba(255,106,42,.09),transparent 70%),
    var(--bg);
  color:var(--text);
  overflow-x:clip;
}

.page-products h1,
.page-products h2,
.page-products h3{
  font-family:var(--font-display);
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0;
}

.page-products p{margin:0;}
.page-products ul,
.page-products ol{list-style:none;margin:0;padding:0;}
.page-products figure{margin:0;}
.page-products img{display:block;max-width:100%;height:auto;}
.page-products a{text-decoration:none;}
.page-products .p-mono{font-family:var(--font-data);font-variant-numeric:tabular-nums;}

.page-products .breadcrumbs{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--text-muted);
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:clamp(18px,3vw,32px);
}
.page-products .breadcrumbs a{color:var(--mist);}
.page-products .breadcrumbs a:hover{color:var(--cyan);}

.page-products .p-eyebrow{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--cyan);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.page-products .p-eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--cyan);
  display:block;
}

.page-products h2{font-size:clamp(28px,4.6vw,46px);font-weight:900;}
.page-products h3{font-size:clamp(18px,2.2vw,22px);font-weight:800;}

.page-products .prose{
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.65;
  color:var(--text-muted);
  max-width:34em;
}

/* ---------- hero ---------- */
.page-products .p-hero{padding:clamp(28px,4vw,48px) 0 8px;}

.page-products .hero-grid{
  display:grid;
  gap:clamp(24px,3vw,40px);
  align-items:end;
}

.page-products .hero-copy h1{
  font-size:clamp(34px,8.2vw,84px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.035em;
  margin-bottom:20px;
  background:linear-gradient(96deg,var(--paper) 34%,var(--cyan) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.page-products .hero-lead{
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.7;
  color:var(--text-muted);
  max-width:36em;
}

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

.page-products .hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(14px,3vw,34px);
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.page-products .hero-facts li{display:flex;flex-direction:column;gap:2px;}
.page-products .p-num{
  font-family:var(--font-data);
  font-size:clamp(26px,3.4vw,38px);
  font-weight:600;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.page-products .hero-facts li span:last-child{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--gray);
}

.page-products .hero-visual{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--ink-800);
  box-shadow:var(--shadow);
  clip-path:polygon(0 0,100% 2.4%,100% 100%,0 97.6%);
}
.page-products .hero-visual img{width:100%;height:clamp(220px,34vw,380px);object-fit:cover;}
.page-products .hero-visual figcaption{
  position:absolute;
  left:16px;
  bottom:14px;
  right:16px;
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mist);
  background:rgba(4,22,18,.72);
  border:1px solid var(--line);
  border-radius:var(--pill);
  padding:8px 14px;
}

/* ---------- flow strip ---------- */
.page-products .flow-strip{
  display:grid;
  gap:10px;
  margin-top:clamp(26px,4vw,44px);
  padding:clamp(16px,2.4vw,22px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,rgba(53,242,208,.10),rgba(11,43,36,.66) 46%,rgba(255,106,42,.10));
}
.page-products .flow-strip li{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"n t" "n d";
  gap:2px 12px;
  padding:12px 12px 12px 0;
  border-bottom:1px dashed var(--line);
}
.page-products .flow-strip li:last-child{border-bottom:0;padding-bottom:0;}
.page-products .flow-num{
  grid-area:n;
  font-family:var(--font-data);
  font-size:13px;
  font-weight:600;
  color:var(--ink-950);
  background:var(--cyan);
  border-radius:var(--pill);
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  align-self:center;
}
.page-products .flow-title{
  grid-area:t;
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
}
.page-products .flow-desc{
  grid-area:d;
  font-size:13px;
  line-height:1.55;
  color:var(--text-muted);
}

/* ---------- section shell ---------- */
.page-products .p-section{
  padding:clamp(46px,7vw,86px) 0;
  border-top:1px solid var(--line);
  margin-top:clamp(32px,5vw,56px);
}
.page-products .p-section--data{
  background:linear-gradient(180deg,rgba(4,22,18,.92),rgba(7,17,14,.96));
  border-top-color:var(--line-strong);
}
.page-products .p-section--review{
  background:radial-gradient(700px 340px at 12% 0%,rgba(245,213,71,.08),transparent 70%);
}
.page-products .p-section--flow{
  border-bottom:1px solid var(--line);
}

.page-products .p-head{
  display:grid;
  gap:12px;
  margin-bottom:clamp(24px,3.4vw,40px);
}
.page-products .p-head-note{
  font-size:14px;
  line-height:1.65;
  color:var(--text-muted);
  max-width:38em;
}

/* ---------- tool map ---------- */
.page-products .map-rail{
  display:grid;
  gap:12px;
}
.page-products .map-rail li{
  position:relative;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--p-card-soft);
  display:grid;
  gap:8px;
}
.page-products .map-idx{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
}
.page-products .map-rail p{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
}
.page-products .map-rail a{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mist);
  border-bottom:1px solid var(--line-strong);
  justify-self:start;
  padding-bottom:2px;
}
.page-products .map-rail a:hover{color:var(--cyan);border-color:var(--cyan);}
.page-products .map-rail li:nth-child(even){background:rgba(4,22,18,.72);}

/* ---------- split blocks ---------- */
.page-products .split{
  display:grid;
  gap:clamp(24px,3.4vw,44px);
  align-items:center;
}
.page-products .split-body h2{margin-bottom:16px;}
.page-products .split-shot{
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--ink-800);
}
.page-products .split-shot img{width:100%;height:clamp(190px,28vw,320px);object-fit:cover;}
.page-products .split-shot figcaption{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--gray);
  padding:12px 16px;
  border-top:1px solid var(--line);
}

.page-products .scene-list{
  display:grid;
  gap:12px;
  margin:22px 0;
}
.page-products .scene-list li{
  font-size:14px;
  line-height:1.6;
  color:var(--text-muted);
  padding-left:16px;
  border-left:2px solid var(--teal);
}
.page-products .scene-list strong{
  color:var(--paper);
  display:block;
  font-size:13px;
  letter-spacing:.06em;
  margin-bottom:2px;
  font-family:var(--font-data);
}

.page-products .tag-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ---------- lineup ---------- */
.page-products .lineup-wrap{display:grid;gap:clamp(20px,3vw,32px);}
.page-products .lineup-cards{display:grid;gap:12px;}
.page-products .lineup-card{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--p-card);
  display:grid;
  gap:8px;
  align-content:start;
}
.page-products .lineup-card h3{font-size:18px;}
.page-products .lineup-card p{font-size:13.5px;line-height:1.6;color:var(--text-muted);}
.page-products .lineup-card .tag{justify-self:start;}
.page-products .lineup-shot{
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--ink-800);
}
.page-products .lineup-shot img{width:100%;height:clamp(180px,26vw,260px);object-fit:cover;}
.page-products .lineup-shot figcaption{
  font-family:var(--font-data);
  font-size:11px;
  color:var(--gray);
  padding:12px 16px;
  border-top:1px solid var(--line);
}

/* ---------- index ---------- */
.page-products .index-layout{display:grid;gap:clamp(20px,3vw,32px);}
.page-products .index-main{display:grid;gap:22px;}

.page-products .dim-row{display:grid;gap:10px;}
.page-products .dim{
  display:grid;
  gap:2px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  border-radius:var(--radius-md);
  background:rgba(4,22,18,.6);
}
.page-products .dim-k{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--cyan);
}
.page-products .dim-v{font-size:13.5px;color:var(--text-muted);}

.page-products .seg-tabs{position:relative;}
.page-products .seg-tabs input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.page-products .seg-labels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.page-products .seg-labels label{
  cursor:pointer;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.06em;
  min-height:44px;
  padding:10px 18px;
  display:inline-flex;
  align-items:center;
  border-radius:var(--pill);
  border:1px solid var(--line-strong);
  color:var(--text-muted);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.page-products .seg-tabs input:focus-visible ~ .seg-labels label{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}
.page-products #venue-foot:checked ~ .seg-labels label[for="venue-foot"],
.page-products #venue-basket:checked ~ .seg-labels label[for="venue-basket"]{
  background:var(--cyan);
  border-color:var(--cyan);
  color:var(--ink-950);
}

.page-products .seg-panel{display:none;}
.page-products #venue-foot:checked ~ .seg-panels .panel-foot{display:block;}
.page-products #venue-basket:checked ~ .seg-panels .panel-basket{display:block;}

.page-products .metric-list{
  display:grid;
  gap:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--p-card);
}
.page-products .p-metric-name{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--mist);
  margin-bottom:8px;
}
.page-products .p-barline{
  display:grid;
  grid-template-columns:18px 1fr 58px;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.page-products .p-side{
  font-family:var(--font-data);
  font-size:11px;
  color:var(--gray);
}
.page-products .p-bar{
  height:8px;
  border-radius:var(--pill);
  background:rgba(143,163,155,.18);
  overflow:hidden;
  display:block;
}
.page-products .p-bar i{
  display:block;
  height:100%;
  border-radius:var(--pill);
  background:var(--cyan);
}
.page-products .p-bar--away i{background:var(--teal);}
.page-products .p-val{
  font-family:var(--font-data);
  font-size:12px;
  color:var(--paper);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.page-products .index-side{display:grid;gap:14px;align-content:start;}
.page-products .side-shot{
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:var(--ink-800);
}
.page-products .side-shot img{width:100%;height:clamp(160px,22vw,210px);object-fit:cover;}
.page-products .side-shot figcaption{
  font-family:var(--font-data);
  font-size:11px;
  color:var(--gray);
  padding:12px 16px;
  border-top:1px solid var(--line);
}

.page-products .acc{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:rgba(4,22,18,.62);
  padding:0 16px;
}
.page-products .acc summary{
  cursor:pointer;
  list-style:none;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--paper);
}
.page-products .acc summary::-webkit-details-marker{display:none;}
.page-products .acc summary::after{
  content:"+";
  font-family:var(--font-data);
  color:var(--cyan);
  font-size:16px;
}
.page-products .acc[open] summary::after{content:"–";}
.page-products .acc summary:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}
.page-products .acc-body{
  padding:0 0 16px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--text-muted);
  border-top:1px dashed var(--line);
  padding-top:12px;
}
.page-products .acc-list{display:grid;gap:8px;}
.page-products .acc-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13.5px;
}
.page-products .acc-list li span:last-child{color:var(--cyan);}

/* ---------- battle report layers ---------- */
.page-products .layer-stack{display:grid;gap:12px;margin:22px 0;}
.page-products .layer-stack li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:16px;
  border-radius:var(--radius-md);
  background:var(--p-card-soft);
  border:1px solid var(--line);
}
.page-products .layer-stack li:nth-child(1){border-left:3px solid var(--cyan);}
.page-products .layer-stack li:nth-child(2){border-left:3px solid var(--yellow);}
.page-products .layer-stack li:nth-child(3){border-left:3px solid var(--orange);}
.page-products .layer-no{
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--gray);
  padding-top:3px;
}
.page-products .layer-stack h3{font-size:17px;margin-bottom:4px;}
.page-products .layer-stack p{font-size:13.5px;line-height:1.6;color:var(--text-muted);}
.page-products .inline-link{margin-top:18px;}

/* ---------- review ---------- */
.page-products .review-grid{display:grid;gap:12px;}
.page-products .review-card{
  position:relative;
  padding:20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--p-card);
  display:grid;
  gap:8px;
  align-content:start;
}
.page-products .review-idx{
  font-size:12px;
  color:var(--ink-950);
  background:var(--yellow);
  border-radius:var(--pill);
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  font-weight:600;
}
.page-products .review-card h3{font-size:18px;}
.page-products .review-card p{font-size:13.5px;line-height:1.6;color:var(--text-muted);}

.page-products .notice{
  margin-top:clamp(20px,3vw,30px);
  padding:clamp(20px,3vw,30px);
  border-radius:var(--radius-xl);
  border:1px solid rgba(255,106,42,.42);
  background:linear-gradient(135deg,rgba(255,106,42,.14),rgba(11,43,36,.8) 58%);
  display:grid;
  gap:14px;
}
.page-products .notice-head{display:flex;align-items:center;gap:10px;}
.page-products .notice-head h3{font-size:clamp(18px,2.4vw,24px);}
.page-products .notice p{
  font-size:14px;
  line-height:1.7;
  color:rgba(243,248,245,.82);
  max-width:52em;
}
.page-products .notice-actions{display:flex;flex-wrap:wrap;gap:10px;}

/* ---------- steps ---------- */
.page-products .steps{display:grid;gap:14px;}
.page-products .steps li{
  position:relative;
  padding:22px 20px 22px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:rgba(4,22,18,.66);
  display:grid;
  gap:8px;
}
.page-products .step-num{
  font-family:var(--font-data);
  font-size:clamp(38px,6vw,58px);
  font-weight:600;
  line-height:.9;
  color:transparent;
  -webkit-text-stroke:1px var(--cyan);
  letter-spacing:-.02em;
}
.page-products .steps h3{font-size:clamp(18px,2.4vw,24px);}
.page-products .steps p{font-size:13.5px;line-height:1.65;color:var(--text-muted);}

.page-products .cta-band{
  margin-top:clamp(24px,3.4vw,40px);
  padding:clamp(22px,3vw,34px);
  border-radius:var(--radius-xl);
  border:1px solid var(--line-strong);
  background:linear-gradient(110deg,rgba(53,242,208,.14),rgba(11,43,36,.86) 52%,rgba(255,106,42,.16));
  display:grid;
  gap:18px;
  align-items:center;
}
.page-products .cta-band h3{font-size:clamp(19px,2.6vw,26px);margin-bottom:8px;}
.page-products .cta-band p{font-size:14px;line-height:1.65;color:var(--text-muted);max-width:44em;}
.page-products .cta-band .btn{justify-self:start;}

/* ---------- breakpoints ---------- */
@media (min-width:620px){
  .page-products .flow-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .flow-strip li{
    grid-template-columns:auto 1fr;
    border-bottom:0;
    border-right:1px dashed var(--line);
    padding:4px 14px;
  }
  .page-products .flow-strip li:last-child{border-right:0;padding-right:0;}
  .page-products .lineup-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .dim-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .review-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .cta-band{grid-template-columns:1fr auto;}
  .page-products .cta-band .btn{justify-self:end;}
}

@media (min-width:900px){
  .page-products .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);}
  .page-products .p-head{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);align-items:end;}
  .page-products .map-rail{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
  .page-products .map-rail li{padding:18px 16px;}
  .page-products .map-rail li:nth-child(even){transform:translateY(18px);}
  .page-products .map-rail li::after{
    content:"";
    position:absolute;
    right:-9px;
    top:32px;
    width:8px;
    height:1px;
    background:var(--line-strong);
  }
  .page-products .map-rail li:last-child::after{display:none;}
  .page-products .split{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);}
  .page-products .split--reverse .split-body{order:2;}
  .page-products .split--reverse .split-shot{order:1;}
  .page-products .lineup-wrap{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);align-items:start;}
  .page-products .lineup-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .lineup-card:nth-child(2){transform:translateY(16px);}
  .page-products .lineup-card:nth-child(4){transform:translateY(16px);}
  .page-products .index-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:start;}
  .page-products .dim-row{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .metric-list{padding:22px;gap:16px;}
  .page-products .review-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .review-card:nth-child(2){transform:translateY(14px);}
  .page-products .review-card:nth-child(4){transform:translateY(14px);}
  .page-products .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .page-products .steps li:nth-child(2){transform:translateY(16px);}
}

@media (prefers-reduced-motion:reduce){
  .page-products .map-rail li:nth-child(even),
  .page-products .lineup-card:nth-child(2),
  .page-products .lineup-card:nth-child(4),
  .page-products .review-card:nth-child(2),
  .page-products .review-card:nth-child(4),
  .page-products .steps li:nth-child(2){transform:none;}
  .page-products .seg-labels label{transition:none;}
}
<<<PAGE_CSS_END>>>