.page-products{
  --p-line:rgba(28,53,50,.14);
  --p-line:rgba(28,53,80,.85);
  --p-panel:rgba(12,27,46,.75);
  --p-gap:18px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  background:
    radial-gradient(1000px 520px at 84% -8%, rgba(53,242,224,.10), transparent 62%),
    radial-gradient(720px 400px at -4% 24%, rgba(255,122,47,.07), transparent 60%),
    linear-gradient(180deg,#07111F 0%,#07111F 45%,#091625 100%);
  padding-bottom:72px;
  overflow-x:hidden;
}
.page-products img{max-width:100%;height:auto;display:block}
.page-products h1,
.page-products h2,
.page-products h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:.01em;
}
.page-products p{margin:0 0 1em}
.page-products a{color:var(--cyan)}

.page-products .crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:26px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--mute);
}
.page-products .crumbs a{color:var(--mute);text-decoration:none}
.page-products .crumbs a:hover{color:var(--cyan)}
.page-products .crumbs span[aria-current]{color:var(--cyan)}

/* ---------- hero ---------- */
.prod-hero{position:relative;padding:26px 0 44px}
.prod-hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.prod-hero__grid{display:grid;gap:30px}
.prod-hero .label{color:var(--cyan);margin-bottom:14px;display:block}
.prod-hero h1{
  font-size:clamp(30px,8.4vw,54px);
  text-wrap:balance;
  margin-bottom:18px;
}
.prod-hero__lead{
  max-width:58ch;
  color:var(--mute);
  font-size:15.5px;
  line-height:1.78;
}
.prod-hero__note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  color:#A8C2D6;
  padding:10px 12px;
  border-left:2px solid var(--green);
  background:rgba(61,220,132,.07);
}
.prod-hero__note .dot{margin-top:8px;flex:none}
.prod-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}

.prod-metrics{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:24px 0 0;
  padding:0;
  background:var(--p-line);
  border:1px solid var(--p-line);
}
.prod-metrics li{
  background:var(--ink);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.prod-metrics__num{
  font-family:var(--font-mono);
  font-size:19px;
  color:var(--paper);
  letter-spacing:.02em;
}
.prod-metrics__cap{font-size:12px;color:var(--mute)}

.prod-tree{
  margin:0;
  position:relative;
  padding:14px;
  border:1px solid var(--line);
  background:linear-gradient(158deg,rgba(12,27,46,.92),rgba(7,17,31,.55));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.prod-tree::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(90deg,rgba(28,53,80,.45) 1px,transparent 1px),
    linear-gradient(rgba(28,53,80,.3) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.55;
  pointer-events:none;
}
.prod-tree svg{position:relative;width:100%;height:auto;display:block}
.prod-tree figcaption{
  position:relative;
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(28,53,80,.7);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--mute);
}

/* ---------- chapter index ---------- */
.prod-index{border-bottom:1px solid var(--line);background:rgba(9,22,37,.78)}
.prod-index ol{
  list-style:none;
  margin:0;
  padding:10px 0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.prod-index ol::-webkit-scrollbar{display:none}
.prod-index a{
  display:inline-block;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:6px 12px;
  border:1px solid var(--line);
  color:var(--mute);
  text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.prod-index a:hover,
.prod-index a[aria-current="true"]{
  color:var(--ink);
  background:var(--cyan);
  border-color:var(--cyan);
}

/* ---------- sections ---------- */
.prod-sec{position:relative;padding:46px 0;border-bottom:1px solid rgba(28,53,80,.55)}
.prod-sec--last{border-bottom:0}
.prod-sec__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.prod-sec__no{
  flex:none;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cyan);
  border:1px solid var(--line);
  padding:3px 8px;
  margin-top:6px;
}
.prod-sec h2{font-size:clamp(21px,5vw,33px);text-wrap:balance}
.prod-sec__lead{max-width:64ch;color:var(--mute);font-size:15.5px;line-height:1.78;margin-bottom:26px}

/* ---------- 01 path ---------- */
.prod-path{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:12px;
}
.prod-path__item{
  position:relative;
  padding:16px 16px 16px 18px;
  border:1px solid var(--p-line);
  background:var(--p-panel);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}
.prod-path__item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--cyan);
}
.prod-path__n{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--orange);
}
.prod-path__item h3{font-size:16px;margin:4px 0 6px}
.prod-path__item p{margin:0;font-size:14px;color:var(--mute);line-height:1.7}

.prod-device{display:grid;gap:18px}
.prod-device__shot{
  margin:0;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.prod-device__shot img{width:100%;aspect-ratio:3/4;object-fit:cover}
.prod-device__shot figcaption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mute);
  letter-spacing:.04em;
}
.prod-device__rows{display:grid;gap:1px;background:var(--p-line);border:1px solid var(--p-line)}
.prod-device__row{
  background:var(--ink);
  padding:14px 16px;
  display:grid;
  gap:6px;
}
.prod-device__tag{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--cyan);
}
.prod-device__row p{margin:0;font-size:14px;color:var(--mute);line-height:1.72}

/* ---------- 02 library ---------- */
.prod-library{display:grid;gap:18px}
.prod-lib-card{
  padding:20px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(12,27,46,.92),rgba(7,17,31,.7));
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
}
.prod-lib-card h3{font-size:18px;margin-bottom:12px}
.prod-lib-card > p{font-size:14px;color:var(--mute);line-height:1.72}
.prod-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.prod-lib-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prod-lib-list li{
  font-size:13.5px;
  color:var(--mute);
  line-height:1.7;
  padding-left:14px;
  position:relative;
}
.prod-lib-list li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:6px;height:6px;
  background:var(--orange);
  transform:rotate(45deg);
}
.prod-lib-list strong{color:var(--paper);font-weight:600}
.prod-lib-shot{
  margin:0;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.prod-lib-shot img{width:100%;aspect-ratio:10/7;object-fit:cover}
.prod-lib-shot figcaption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mute);
}
.prod-lib-foot{display:grid;gap:14px;margin-top:20px}
.prod-lib-foot__item{
  padding:16px;
  border:1px solid var(--p-line);
  background:rgba(9,22,37,.6);
  border-top:2px solid var(--violet);
}
.prod-lib-foot__item h3{font-size:15px;margin-bottom:8px}
.prod-lib-foot__item p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.7}

/* ---------- 03 subscribe ---------- */
.prod-sub{display:grid;gap:20px}
.prod-alerts{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.prod-alerts__item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border:1px solid var(--p-line);
  background:var(--p-panel);
  border-left:2px solid var(--cyan);
}
.prod-alerts__time{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--cyan);
  letter-spacing:.04em;
  min-width:52px;
  padding-top:2px;
}
.prod-alerts__item h3{font-size:15px;margin-bottom:5px}
.prod-alerts__item p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.7}
.prod-sub__notes{display:grid;gap:14px}
.prod-sub__notes h3{font-size:15px;margin-bottom:6px;color:var(--orange)}
.prod-sub__notes p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.72}
.prod-sub__shot{margin:0;border:1px solid var(--line);background:var(--ink-2)}
.prod-sub__shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.prod-sub__shot figcaption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mute);
}

/* ---------- 04 schedule ---------- */
.prod-weeks{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.prod-weeks::-webkit-scrollbar{display:none}
.prod-weeks li{
  flex:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  padding:7px 11px;
  border:1px solid var(--line);
  color:var(--mute);
  background:rgba(9,22,37,.6);
}
.prod-weeks li.is-current{
  color:var(--ink);
  background:var(--green);
  border-color:var(--green);
  font-weight:700;
}
.prod-sch-grid{display:grid;gap:14px}
.prod-sch-card{
  padding:18px;
  border:1px solid var(--p-line);
  background:linear-gradient(170deg,rgba(12,27,46,.9),rgba(7,17,31,.55));
}
.prod-sch-card h3{font-size:15px;margin-bottom:8px}
.prod-sch-card p{margin:0 0 10px;font-size:13.5px;color:var(--mute);line-height:1.72}
.prod-sch-card .btn{margin-top:2px}

/* ---------- 05 version ---------- */
.prod-wide{margin:0 0 24px;border:1px solid var(--line);background:var(--ink-2)}
.prod-wide img{width:100%;aspect-ratio:12/7;object-fit:cover}
.prod-wide--thin img{aspect-ratio:5/3}
.prod-wide figcaption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mute);
  letter-spacing:.04em;
}
.prod-timeline{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:grid;
  gap:16px;
  position:relative;
}
.prod-timeline__item{
  position:relative;
  padding-left:20px;
  border-left:1px solid var(--line);
}
.prod-timeline__item::before{
  content:"";
  position:absolute;left:-5px;top:9px;
  width:9px;height:9px;
  background:var(--ink);
  border:2px solid var(--orange);
  transform:rotate(45deg);
}
.prod-timeline__ver{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--orange);
}
.prod-timeline__item h3{font-size:15px;margin:4px 0 6px}
.prod-timeline__item p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.72}

/* ---------- 06 flow ---------- */
.prod-flow{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:6px}
.prod-flow__item{border:1px solid var(--p-line);background:rgba(9,22,37,.65)}
.prod-flow__item[open]{background:rgba(12,27,46,.9);border-color:rgba(53,242,224,.4)}
.prod-flow__item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--paper);
}
.prod-flow__item summary::-webkit-details-marker{display:none}
.prod-flow__item summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--font-mono);
  color:var(--cyan);
  font-size:16px;
}
.prod-flow__item[open] summary::after{content:"–"}
.prod-flow__n{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cyan);
  border:1px solid var(--line);
  padding:2px 7px;
}
.prod-flow__body{padding:0 16px 16px}
.prod-flow__body p{margin:0 0 10px;font-size:13.5px;color:var(--mute);line-height:1.75}
.prod-flow__back{
  border-left:2px solid var(--orange);
  padding-left:10px;
  color:#A8C2D6 !important;
}
.prod-flow__back a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(255,122,47,.5)}

/* ---------- next ---------- */
.prod-sec--next{padding:44px 0 8px}
.prod-next__title{font-size:clamp(19px,4.4vw,26px);margin-bottom:20px}
.prod-next{display:grid;gap:10px}
.prod-next a{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 18px;
  border:1px solid var(--p-line);
  background:linear-gradient(160deg,rgba(12,27,46,.85),rgba(7,17,31,.5));
  color:var(--paper);
  text-decoration:none;
  font-family:var(--font-display);
  font-size:15px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
}
.prod-next a span{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--mute);
  line-height:1.65;
}
.prod-next a:hover{border-color:var(--cyan);transform:translateY(-2px)}

@media (min-width:720px){
  .prod-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prod-path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-lib-foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prod-sch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .prod-sub__notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-next{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:960px){
  .prod-hero{padding:34px 0 56px}
  .prod-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}
  .prod-hero__actions{margin-top:26px}
  .prod-device{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:22px;align-items:start}
  .prod-library{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
  .prod-sub{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;gap:26px}
  .prod-path{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prod-timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .prod-timeline__item{border-left:0;border-top:1px solid var(--line);padding:18px 0 0 0}
  .prod-timeline__item::before{left:0;top:-5px}
  .prod-sec{padding:60px 0}
  .prod-sec__lead{font-size:16px}
}

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