.page-products{
  --pv-gap: clamp(20px, 3.2vw, 40px);
  --pv-sec: clamp(46px, 6.5vw, 92px);
  background: var(--paper);
  color: var(--char);
}

.page-products .crumbs{margin:18px 0 0}
.page-products .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:12.5px;letter-spacing:.04em;color:var(--moss)}
.page-products .crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.page-products .crumbs a{color:var(--green-900);text-decoration:none;border-bottom:1px solid transparent}
.page-products .crumbs a:hover{border-bottom-color:var(--cyan)}

/* ---------- hero ---------- */
.pv-hero{
  display:grid;
  gap:var(--pv-gap);
  padding-block:clamp(22px,3.6vw,40px) clamp(26px,4vw,48px);
}
.pv-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--amber-deep);
  text-transform:uppercase;
}
.pv-kicker__idx{
  color:var(--paper);
  background:var(--green-900);
  padding:3px 6px;
  letter-spacing:.06em;
}
.pv-hero h1{
  margin:0 0 20px;
  font-size:clamp(36px, 8.4vw, 78px);
  line-height:.98;
  letter-spacing:-.015em;
  font-weight:800;
  color:var(--green-900);
}
.pv-hero__intro{
  max-width:56ch;
  margin:0 0 26px;
  font-size:16px;
  line-height:1.72;
  color:var(--char);
}
.pv-hero__actions{display:flex;flex-wrap:wrap;gap:12px}

.pv-board{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,3vw,32px);
  background:var(--green-900);
  color:var(--paper);
  clip-path:polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
}
.pv-board::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.pv-board>*{position:relative;z-index:1}
.pv-board__title{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}
.pv-board__list{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 14px;
}
.pv-board__item{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--green-600)}
.pv-board__num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(28px,4.6vw,40px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.pv-board__item--alt .pv-board__num{color:var(--amber)}
.pv-board__unit,.pv-board__plus{font-size:.48em;font-weight:700;margin-left:2px;letter-spacing:0}
.pv-board__label{font-size:12.5px;color:rgba(244,241,233,.72);letter-spacing:.04em}
.pv-board__spark{display:block;width:100%;height:auto;margin:0 0 10px;opacity:.9}
.pv-board__foot{
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--green-600);
  font-size:11.5px;
  letter-spacing:.05em;
  color:rgba(244,241,233,.62);
  font-family:var(--font-mono);
}

/* ---------- jump nav ---------- */
.pv-jumpnav{padding-bottom:8px}
.pv-jump{
  list-style:none;
  display:flex;
  gap:8px;
  margin:0;
  padding:0 0 14px;
  overflow-x:auto;
  scrollbar-width:thin;
  border-bottom:1px solid var(--line);
}
.pv-jump__link{
  display:inline-block;
  white-space:nowrap;
  padding:8px 15px;
  font-size:13px;
  font-weight:600;
  color:var(--green-900);
  text-decoration:none;
  background:var(--paper);
  border:1px solid var(--line);
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.pv-jump__link:hover,
.pv-jump__link[aria-current="true"]{
  background:var(--paper-200);
  border-color:var(--green-900);
}

/* ---------- section frame ---------- */
.page-products .pv-section{padding-block:var(--pv-sec)}
.page-products .section-head{margin-bottom:clamp(20px,3vw,32px);max-width:760px}
.page-products .section-head__index{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--amber-deep);
}
.page-products .section-head__title{
  margin:10px 0 0;
  font-size:clamp(24px,3.6vw,36px);
  line-height:1.24;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--green-900);
}
.page-products .section-head__lead{
  margin:14px 0 0;
  font-size:15.5px;
  line-height:1.72;
  color:var(--moss);
}

/* ---------- figures ---------- */
.pv-fig{margin:0}
.pv-fig img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
}
.pv-fig figcaption{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--moss);
}
.pv-fig--wide{margin-bottom:clamp(22px,3.4vw,36px)}
.pv-fig--wide img{clip-path:polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%)}
.pv-fig--phone{max-width:300px}
.pv-fig--phone img{object-fit:contain;background:var(--paper-200)}
.pv-fig--snap img{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%)}
.pv-fig--band{margin-top:clamp(22px,3.4vw,34px)}
.pv-fig--band img{border-color:var(--paper-200)}

/* ---------- catalog ---------- */
.pv-catalog{display:grid;gap:var(--pv-gap)}
.pv-tree{min-width:0}
.pv-node{
  background:var(--paper);
  border:1px solid var(--line);
  transition:border-color .22s var(--ease);
}
.pv-node+.pv-node{margin-top:8px}
.pv-node[open]{border-color:var(--green-600)}
.pv-node__summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  font-size:16px;
  font-weight:700;
  color:var(--green-900);
}
.pv-node__summary::-webkit-details-marker{display:none}
.pv-node__summary::after{
  content:"+";
  margin-left:6px;
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  color:var(--green-600);
  transition:transform .2s var(--ease);
}
.pv-node[open] .pv-node__summary::after{content:"–";color:var(--amber-deep)}
.pv-node__idx{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--amber-deep);
  letter-spacing:.06em;
}
.pv-node__name{flex:0 0 auto}
.pv-node__count{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--moss);
  font-variant-numeric:tabular-nums;
}
.pv-node__list{
  list-style:none;
  margin:0 0 14px 16px;
  padding:4px 16px 0 22px;
  border-left:1px dashed var(--line);
  display:grid;
  gap:4px;
}
.pv-node__list li{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:5px 0;
  font-size:14.5px;
  line-height:1.5;
  color:var(--char);
  border-bottom:1px solid var(--paper-200);
}
.pv-node__list li:last-child{border-bottom:0}
.pv-node__code{
  flex:0 0 54px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--green-600);
  letter-spacing:.04em;
}
.pv-tree__note{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.65;
  color:var(--moss);
  letter-spacing:.03em;
}

.pv-side{display:grid;gap:10px;align-content:start}
.pv-side__title{
  margin:0 0 2px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-900);
}
.pv-mini{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px 16px;
  text-decoration:none;
  color:inherit;
  background:var(--paper-200);
  border:1px solid var(--line);
  clip-path:polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%);
  transition:transform .24s var(--ease), background .24s var(--ease);
}
.pv-mini:hover{transform:translateY(-2px);background:var(--paper)}
.pv-mini__fmt{
  align-self:flex-start;
  padding:2px 7px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--cyan);
  background:var(--green-900);
}
.pv-mini__fmt--amber{color:var(--green-950);background:var(--amber)}
.pv-mini__fmt--ghost{color:var(--paper);background:var(--green-600)}
.pv-mini__name{font-size:14.5px;font-weight:700;color:var(--green-900)}
.pv-mini__meta{font-size:12.5px;line-height:1.6;color:var(--moss)}
.pv-side__note{margin:4px 0 0;font-size:12px;color:var(--moss);line-height:1.6}
.pv-side__note a{color:var(--green-900);text-decoration:none;border-bottom:1px solid var(--cyan)}

/* ---------- snapshot ---------- */
.pv-flow{
  list-style:none;
  margin:0 0 clamp(24px,3.6vw,40px);
  padding:0;
  display:grid;
  gap:14px;
}
.pv-flow__step{
  position:relative;
  padding:16px 16px 16px 0;
  border-left:2px solid var(--line);
  padding-left:18px;
}
.pv-flow__num{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--amber-deep);
  margin-bottom:6px;
}
.pv-flow__title{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--green-900)}
.pv-flow__step p{margin:0;font-size:14.5px;line-height:1.7;color:var(--char)}
.pv-flow__step--end{border-left-color:var(--amber)}

.pv-snap{display:grid;gap:var(--pv-gap)}
.pv-snap__h{margin:0 0 10px;font-size:20px;font-weight:800;color:var(--green-900)}
.pv-snap__p{margin:0 0 18px;font-size:14.5px;line-height:1.72;color:var(--char)}
.pv-fields{margin:0;display:grid;gap:0}
.pv-fields__row{
  display:grid;
  grid-template-columns:minmax(96px,132px) 1fr;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--paper-200);
}
.pv-fields__row:last-child{border-bottom:1px solid var(--paper-200)}
.pv-fields dt{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--green-600);
  letter-spacing:.02em;
  word-break:break-word;
}
.pv-fields dd{margin:0;font-size:13.5px;line-height:1.62;color:var(--moss)}

/* ---------- mobile ---------- */
.pv-mobile{display:grid;gap:var(--pv-gap);align-items:start}
.pv-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pv-steps__item{
  padding:16px 18px;
  background:var(--paper-200);
  clip-path:polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%);
}
.pv-steps__num{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--amber-deep);
  margin-bottom:6px;
}
.pv-steps__item h3{margin:0 0 8px;font-size:16.5px;font-weight:800;color:var(--green-900)}
.pv-steps__item p{margin:0;font-size:14px;line-height:1.7;color:var(--char)}
.pv-mobile__tip{
  margin:18px 0 0;
  padding-left:14px;
  border-left:3px solid var(--cyan);
  font-size:13.5px;
  line-height:1.7;
  color:var(--moss);
}

/* ---------- downloads ---------- */
.pv-downloads{
  background:var(--green-900);
  color:var(--paper);
  padding:clamp(24px,4vw,48px);
  clip-path:polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
}
.pv-downloads .section-head__index{color:var(--cyan)}
.pv-downloads .section-head__title{color:var(--paper)}
.pv-downloads .section-head__lead{color:rgba(244,241,233,.74)}
.pv-downloads__grid{display:grid;gap:clamp(22px,3.2vw,36px);align-items:start}
.pv-tablewrap{min-width:0;overflow-x:auto}
.pv-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  color:var(--paper);
}
.pv-table th{
  text-align:left;
  padding:10px 12px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  border-bottom:1px solid var(--green-600);
  white-space:nowrap;
}
.pv-table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(244,241,233,.14);
  vertical-align:top;
  line-height:1.6;
}
.pv-table tbody tr:last-child td{border-bottom:0}
.pv-table td:first-child{font-weight:700;color:var(--paper)}
.pv-fmt{
  display:inline-block;
  padding:2px 7px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
}
.pv-fmt--cyan{color:var(--green-950);background:var(--cyan)}
.pv-fmt--amber{color:var(--green-950);background:var(--amber)}
.pv-fmt--ghost{color:var(--paper);background:var(--green-600)}
.pv-downloads__aside{display:grid;gap:14px;align-content:start}
.pv-downloads__aside .pv-fig img{border-color:var(--green-600)}
.pv-downloads__aside .pv-fig figcaption{color:rgba(244,241,233,.6)}
.pv-downloads__stat{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--green-600);
}
.pv-downloads__stat-num{
  font-family:var(--font-mono);
  font-size:clamp(26px,3.4vw,36px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.pv-downloads__stat-label{font-size:12.5px;letter-spacing:.04em;color:rgba(244,241,233,.7)}
.pv-downloads__note{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:rgba(244,241,233,.7);
}
.pv-downloads__aside .btn{justify-self:start}

/* ---------- subscribe ---------- */
.pv-sub{display:grid;gap:14px}
.pv-sub__card{
  padding:20px;
  background:var(--paper-200);
  border-top:3px solid var(--green-600);
  clip-path:polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%);
}
.pv-sub__card--alt{border-top-color:var(--amber)}
.pv-sub__tag{
  display:inline-block;
  margin-bottom:10px;
  padding:2px 8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--cyan);
  background:var(--green-900);
}
.pv-sub__tag--amber{color:var(--green-950);background:var(--amber)}
.pv-sub__card h3{margin:0 0 10px;font-size:17px;font-weight:800;color:var(--green-900)}
.pv-sub__card p{margin:0 0 10px;font-size:14px;line-height:1.7;color:var(--char)}
.pv-sub__meta{margin:0;font-size:12.5px;color:var(--moss);line-height:1.6}
.pv-sub__meta a{color:var(--green-900);text-decoration:none;border-bottom:1px solid var(--cyan)}

.pv-chips{margin-top:clamp(20px,3vw,30px)}
.pv-chips__title{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-900);
}
.pv-chips__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pv-chips__item{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:8px 14px;
  font-size:13.5px;
  font-weight:600;
  color:var(--green-900);
  background:var(--paper);
  border:1px solid var(--line);
}
.pv-chips__item span{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--amber-deep);
  font-variant-numeric:tabular-nums;
}
.pv-chips__item--more{border-style:dashed;color:var(--moss)}

/* ---------- next ---------- */
.pv-next{padding-block:0 var(--pv-sec)}
.pv-next__inner{
  display:grid;
  gap:20px;
  padding:clamp(22px,3.2vw,34px);
  background:var(--paper-200);
  border-left:4px solid var(--amber);
}
.pv-next__title{margin:0 0 10px;font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--green-900)}
.pv-next__text{margin:0;max-width:58ch;font-size:14.5px;line-height:1.72;color:var(--char)}
.pv-next__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .pv-flow{grid-template-columns:repeat(3,1fr);gap:0}
  .pv-flow__step{border-left:0;padding:26px 22px 0 0}
  .pv-flow__step::before{
    content:"";
    position:absolute;
    top:-6px;
    left:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 0 4px var(--paper);
  }
  .pv-flow__step--end::before{background:var(--amber)}
  .pv-flow__step+.pv-flow__step{padding-left:22px;border-left:1px solid var(--paper-200)}
  .pv-sub{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  .pv-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .pv-catalog{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr)}
  .pv-snap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
  .pv-mobile{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .pv-downloads__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .pv-next__inner{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}

@media (min-width:1100px){
  .pv-hero{padding-block:clamp(30px,3.4vw,52px) clamp(34px,4vw,60px)}
  .pv-board{position:sticky;top:calc(var(--bar-h) + 16px)}
}

@media (max-width:639px){
  .pv-tablewrap{overflow:visible}
  .pv-table thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .pv-table,.pv-table tbody,.pv-table tr,.pv-table td{display:block;width:100%}
  .pv-table tr{
    padding:14px 0;
    border-bottom:1px solid rgba(244,241,233,.16);
  }
  .pv-table tr:last-child{border-bottom:0}
  .pv-table td{
    display:flex;
    gap:12px;
    padding:3px 0;
    border-bottom:0;
    font-size:13.5px;
  }
  .pv-table td::before{
    content:attr(data-label);
    flex:0 0 64px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;
    color:rgba(0,229,195,.85);
    padding-top:2px;
  }
  .pv-fields__row{grid-template-columns:1fr;gap:4px}
  .pv-fig--phone{max-width:240px;margin-inline:auto}
  .pv-board__list{gap:14px 10px}
}
<<<END>>>