.page-products{
  --pp-gap:clamp(1.1rem,2.6vw,2rem);
  --pp-shadow:rgba(185,234,242,.42);
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--font-body);
  line-height:1.72;
  overflow-x:clip;
}

.page-products .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:0;
  padding:1.1rem 0 .4rem;
  list-style:none;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--c-mist);
}
.page-products .breadcrumb__item + .breadcrumb__item::before{
  content:"/";
  margin-right:.45rem;
  color:var(--c-mist);
}
.page-products .breadcrumb__link{
  color:var(--c-night);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.page-products .breadcrumb__link:hover,
.page-products .breadcrumb__link:focus-visible{
  color:var(--c-ink);
  border-bottom-color:var(--c-lime);
}

/* ---------- hero ---------- */
.page-products .tools-hero{
  position:relative;
  overflow:hidden;
  background:var(--c-deep);
  color:var(--c-paper);
  border-bottom:1px solid var(--line-light);
}
.page-products .tools-hero::before{
  content:"";
  position:absolute;
  top:-18%;
  right:-14%;
  width:min(560px,88vw);
  height:min(560px,88vw);
  background:linear-gradient(150deg,rgba(185,234,242,.24),rgba(42,27,85,.62));
  clip-path:polygon(22% 0,100% 0,100% 78%);
  pointer-events:none;
}
.page-products .tools-hero::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:38%;
  height:3px;
  background:var(--c-lime);
}
.page-products .tools-hero__inner{
  position:relative;
  z-index:1;
  padding:clamp(2.4rem,7vw,4.4rem) 0 clamp(2.2rem,5vw,3.4rem);
}
.page-products .tools-hero__kicker{
  margin:0 0 .9rem;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--c-ice);
}
.page-products .tools-hero__title{
  margin:0;
  max-width:19ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step-4);
  line-height:.98;
  letter-spacing:-.01em;
}
.page-products .tools-hero__lede{
  margin:1.2rem 0 0;
  max-width:56ch;
  font-size:var(--step-0);
  color:rgba(246,243,234,.86);
}
.page-products .tools-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1.6rem;
}
.page-products .tools-hero__stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 1.2rem;
  margin:clamp(1.7rem,4vw,2.4rem) 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--line-light);
}
.page-products .tools-hero__stats dt{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-ice);
  opacity:.8;
}
.page-products .tools-hero__stats dd{
  margin:.2rem 0 0;
  font-size:clamp(1.2rem,3vw,1.6rem);
  color:var(--c-lime);
}

/* ---------- filter bar ---------- */
.page-products .tools-filter{
  background:var(--c-night);
  border-bottom:1px solid var(--line-light);
}
.page-products .tools-filter__row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  padding-top:.9rem;
  padding-bottom:.9rem;
}
.page-products .tools-filter__chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .78rem;
  border:1px solid var(--line-ice);
  color:var(--c-paper);
  font-size:.86rem;
  text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-products .tools-filter__chip .mono{
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--c-lime);
}
.page-products .tools-filter__chip:hover,
.page-products .tools-filter__chip:focus-visible{
  background:var(--c-lime);
  border-color:var(--c-lime);
  color:var(--c-ink);
}
.page-products .tools-filter__chip:hover .mono,
.page-products .tools-filter__chip:focus-visible .mono{
  color:var(--c-ink);
}

/* ---------- shared block rhythm ---------- */
.page-products .tools-block{
  padding:clamp(2.6rem,6vw,4.4rem) 0;
}
.page-products .tools-block--paper{
  background:var(--c-paper);
  color:var(--c-ink);
}
.page-products .tools-block--night{
  background:var(--c-night);
  color:var(--c-paper);
}
.page-products .tools-block--indigo{
  background:var(--c-indigo);
  color:var(--c-paper);
}
.page-products .section-head{
  display:grid;
  gap:.3rem;
  margin-bottom:clamp(1.4rem,3vw,2.1rem);
  padding-bottom:1rem;
  border-bottom:1px solid var(--line-dark);
}
.page-products .tools-block--night .section-head,
.page-products .tools-block--indigo .section-head{
  border-bottom-color:var(--line-light);
}
.page-products .section-index{
  font-size:clamp(2.2rem,7vw,3.6rem);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--c-mist);
}
.page-products .tools-block--night .section-index,
.page-products .tools-block--indigo .section-index{
  color:var(--c-lime);
}
.page-products .section-kicker{
  margin:0;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-mist);
}
.page-products .tools-block--night .section-kicker,
.page-products .tools-block--indigo .section-kicker{
  color:var(--c-ice);
  opacity:.8;
}
.page-products .section-title{
  margin:0;
  max-width:24ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--step-2);
  line-height:1.06;
}
.page-products .tools-lead{
  margin:0 0 clamp(1.3rem,3vw,1.9rem);
  max-width:62ch;
  font-size:var(--step-0);
}

/* ---------- split layouts ---------- */
.page-products .tools-split{
  display:grid;
  gap:var(--pp-gap);
  align-items:start;
}
.page-products .tools-split__text p{
  margin:0 0 1rem;
  max-width:38ch;
}
.page-products .tools-split__figure{
  margin:0;
}
.page-products .figure{
  margin:0;
}
.page-products .figure__media{
  overflow:hidden;
  border:1px solid var(--line-mid);
  background:var(--c-night);
}
.page-products .figure__media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .figure__caption{
  margin-top:.55rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--c-mist);
}
.page-products .tools-block--night .figure__caption,
.page-products .tools-block--indigo .figure__caption{
  color:var(--c-ice);
  opacity:.75;
}
.page-products .plate{
  position:relative;
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--c-ink);
  padding:clamp(1rem,2.4vw,1.6rem);
  box-shadow:7px 7px 0 var(--pp-shadow);
}

/* ---------- fields list ---------- */
.page-products .tools-fields{
  display:grid;
  gap:.55rem;
  margin:0 0 1.1rem;
  padding:0;
  list-style:none;
}
.page-products .tools-fields li{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  padding-bottom:.5rem;
  border-bottom:1px dashed var(--line-dark);
  font-size:.95rem;
}
.page-products .tools-fields__no{
  flex:0 0 auto;
  min-width:1.9rem;
  padding:.05rem .3rem;
  font-size:.66rem;
  text-align:center;
  background:var(--c-lime);
  color:var(--c-ink);
}
.page-products .tools-note{
  margin:0;
  padding-left:.9rem;
  border-left:3px solid var(--c-wine);
  font-size:.92rem;
  color:var(--c-night);
}

/* ---------- subscribe ---------- */
.page-products .tools-grid3{
  display:grid;
  gap:var(--pp-gap);
}
.page-products .cond-card{
  display:grid;
  gap:.5rem;
  align-content:start;
  padding:1.1rem;
  background:rgba(6,26,43,.55);
  border:1px solid var(--line-ice);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-products .cond-card:hover,
.page-products .cond-card:focus-within{
  transform:translateY(-3px);
  border-color:var(--c-lime);
}
.page-products .cond-card__no{
  font-size:.66rem;
  letter-spacing:.16em;
  color:var(--c-lime);
}
.page-products .cond-card__title{
  margin:0;
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.15;
}
.page-products .cond-card p{
  margin:0;
  font-size:.92rem;
  color:rgba(246,243,234,.82);
}
.page-products .tools-sub__aside{
  display:grid;
  gap:var(--pp-gap);
  margin-top:clamp(1.4rem,3vw,2rem);
  align-items:start;
}
.page-products .tools-sub__plate p{
  margin:0 0 .5rem;
  font-size:.8rem;
  letter-spacing:.04em;
}
.page-products .tools-sub__plate-title{
  margin-bottom:.8rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line-dark);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-wine);
}
.page-products .tools-sub__plate-note{
  margin:.9rem 0 0;
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:0;
  color:var(--c-night);
}
.page-products .tools-sub__figure{
  margin:0;
}

/* ---------- desktop ways ---------- */
.page-products .tools-ways{
  display:grid;
  gap:1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .tools-ways li{
  padding:1rem 0 1rem 1rem;
  border-left:2px solid var(--line-mid);
  transition:border-color var(--dur) var(--ease);
}
.page-products .tools-ways li:hover{
  border-left-color:var(--c-lime);
}
.page-products .tools-ways h3{
  margin:0 0 .35rem;
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.2;
}
.page-products .tools-ways p{
  margin:0;
  max-width:36ch;
  font-size:.92rem;
  color:var(--c-night);
}

/* ---------- version table ---------- */
.page-products .vtable{
  display:grid;
  gap:.6rem;
  margin-top:clamp(1.6rem,4vw,2.4rem);
}
.page-products .vtable__row{
  display:grid;
  gap:.3rem;
  padding:.9rem 1rem;
  background:var(--c-paper);
  border:1px solid var(--line-dark);
}
.page-products .vtable__row--head{
  display:none;
}
.page-products .vtable__cell{
  font-size:.9rem;
  line-height:1.6;
}
.page-products .vtable__cell--key{
  font-family:var(--font-display);
  font-size:1.08rem;
  font-weight:700;
  color:var(--c-ink);
}
.page-products .vtable__lbl{
  display:block;
  margin-bottom:.1rem;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.12em;
  color:var(--c-mist);
}
.page-products .tools-after{
  margin:clamp(1.2rem,3vw,1.8rem) 0 0;
  max-width:58ch;
  font-size:.92rem;
  color:var(--c-night);
}

/* ---------- version rhythm ---------- */
.page-products .tools-version{
  display:grid;
  gap:var(--pp-gap);
  align-items:start;
}
.page-products .tools-version__strips{
  display:grid;
  gap:.7rem;
}
.page-products .vstrip{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.3rem .8rem;
  padding:.75rem .9rem;
  border:1px solid var(--line-light);
  background:rgba(6,26,43,.35);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-products .vstrip:hover{
  border-color:var(--c-lime);
  background:rgba(6,26,43,.6);
}
.page-products .vstrip__num{
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  line-height:1.1;
  color:var(--c-lime);
}
.page-products .vstrip__label{
  font-size:.82rem;
  color:rgba(246,243,234,.82);
}
.page-products .tools-version__text p{
  margin:0 0 1rem;
  max-width:40ch;
  font-size:.95rem;
  color:rgba(246,243,234,.88);
}
.page-products .tools-link{
  display:inline-block;
  color:var(--c-paper);
  font-size:.9rem;
  text-decoration:none;
  border-bottom:1px solid var(--c-lime);
  padding-bottom:.15rem;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-products .tools-link:hover,
.page-products .tools-link:focus-visible{
  color:var(--c-lime);
}
.page-products .tools-version__figure{
  margin-top:clamp(1.4rem,3vw,2rem);
}

/* ---------- scenes ---------- */
.page-products .tools-scene__figure{
  margin:0 0 clamp(1.4rem,3vw,2rem);
}
.page-products .scene-card{
  display:grid;
  gap:.55rem;
  align-content:start;
  padding:1.1rem;
  background:var(--c-paper);
  border:1px solid var(--c-ink);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.page-products .scene-card:hover,
.page-products .scene-card:focus-within{
  transform:translateY(-3px);
  box-shadow:6px 8px 0 var(--pp-shadow);
}
.page-products .scene-card .tag{
  justify-self:start;
}
.page-products .scene-card h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.18;
}
.page-products .scene-card p{
  margin:0;
  font-size:.92rem;
  color:var(--c-night);
}
.page-products .scene-card__path{
  padding-top:.6rem;
  border-top:1px dashed var(--line-dark);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--c-mist);
}

/* ---------- closing ---------- */
.page-products .tools-next{
  padding-top:clamp(1rem,3vw,2rem);
}
.page-products .tools-next__inner{
  display:grid;
  gap:var(--pp-gap);
  align-items:start;
  padding-top:clamp(1.6rem,4vw,2.6rem);
  padding-bottom:clamp(2rem,5vw,3.4rem);
  border-top:1px solid var(--line-dark);
}
.page-products .tools-next__title{
  margin:0 0 .8rem;
  font-family:var(--font-display);
  font-size:var(--step-2);
  line-height:1.08;
}
.page-products .tools-next__main p{
  margin:0;
  max-width:52ch;
  font-size:var(--step-0);
  color:var(--c-night);
}
.page-products .tools-next__links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.3rem;
}
.page-products .tools-next__card p{
  margin:0;
}
.page-products .tools-next__card-title{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-wine);
}
.page-products .tools-next__mail{
  margin:.4rem 0 .9rem;
  font-family:var(--font-mono);
  font-size:clamp(.95rem,2.6vw,1.1rem);
  word-break:break-all;
  color:var(--c-ink);
}
.page-products .tools-next__note{
  margin-top:.9rem;
  padding-top:.8rem;
  border-top:1px dashed var(--line-dark);
  font-size:.82rem;
  line-height:1.65;
  color:var(--c-night);
}

/* ---------- focus ---------- */
.page-products a:focus-visible,
.page-products button:focus-visible{
  outline:2px solid var(--c-lime);
  outline-offset:3px;
}

/* ---------- breakpoints ---------- */
@media (min-width:720px){
  .page-products .tools-hero__stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-products .tools-split{
    grid-template-columns:1.05fr .95fr;
    gap:clamp(1.4rem,3vw,2.6rem);
  }
  .page-products .tools-split--reverse .tools-split__figure{
    order:-1;
  }
  .page-products .tools-grid3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .tools-sub__aside{
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .page-products .tools-fields{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem 1.2rem;
  }
  .page-products .tools-version{
    grid-template-columns:.95fr 1.05fr;
    gap:clamp(1.4rem,3vw,2.6rem);
  }
  .page-products .vstrip{
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
  }
  .page-products .tools-next__inner{
    grid-template-columns:1.35fr .85fr;
    gap:clamp(1.4rem,3vw,2.6rem);
  }
}

@media (min-width:900px){
  .page-products .vtable{
    gap:0;
    border:1px solid var(--c-ink);
  }
  .page-products .vtable__row{
    grid-template-columns:1.15fr 1.5fr 1.4fr .95fr;
    gap:1rem;
    padding:.85rem 1rem;
    border:0;
    border-bottom:1px solid var(--line-dark);
    background:transparent;
    align-items:start;
  }
  .page-products .vtable__row:last-child{
    border-bottom:0;
  }
  .page-products .vtable__row--head{
    display:grid;
    background:var(--c-ink);
    color:var(--c-paper);
    border-bottom:0;
  }
  .page-products .vtable__row--head .vtable__cell{
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .page-products .vtable__lbl{
    display:none;
  }
  .page-products .vtable__row:not(.vtable__row--head):hover{
    background:rgba(185,234,242,.16);
  }
  .page-products .tools-hero__title{
    max-width:17ch;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    transition-duration:.01ms;
    animation-duration:.01ms;
  }
  .page-products .cond-card:hover,
  .page-products .scene-card:hover{
    transform:none;
  }
}
<<<END>>>