.page-products{
  --pp-line:rgba(143,248,225,.18);
  --pp-card:rgba(11,59,52,.62);
  --pp-card-soft:rgba(46,242,196,.08);
  --pp-amber-soft:rgba(255,177,59,.12);
  color:var(--ok-fog);
  background-color:var(--ok-deep);
  background-image:
    linear-gradient(rgba(143,248,225,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,248,225,.045) 1px, transparent 1px),
    radial-gradient(760px 440px at 88% -6%, rgba(46,242,196,.16), transparent 62%),
    radial-gradient(620px 400px at -10% 26%, rgba(255,177,59,.09), transparent 68%);
  background-size:64px 64px, 64px 64px, auto, auto;
  background-position:0 0, 0 0, 0 0, 0 0;
  overflow-x:clip;
}

.page-products img{
  max-width:100%;
  height:auto;
  display:block;
}

.page-products abbr[title]{
  text-decoration:none;
  border-bottom:1px dashed var(--ok-mist);
  cursor:help;
}

.page-products .ok-breadcrumb{
  padding:clamp(84px,13vw,108px) 0 0;
  font-size:.82rem;
}

.page-products .ok-section{
  padding:clamp(44px,7vw,84px) 0;
}

.page-products .ok-section__num{
  color:var(--ok-amber);
  font-family:var(--ok-font-mono);
  letter-spacing:.08em;
}

.page-products .ok-media{
  border-radius:var(--ok-radius);
  border:1px solid var(--pp-line);
  background:linear-gradient(150deg, rgba(46,242,196,.10), rgba(6,42,38,.9));
}

.page-products .ok-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.page-products .ok-media__label{
  font-family:var(--ok-font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--ok-mist);
}

/* ---------- hero ---------- */
.pp-hero{
  padding:clamp(18px,3vw,32px) 0 clamp(40px,6vw,72px);
}

.pp-hero__grid{
  display:grid;
  gap:clamp(24px,4vw,44px);
  align-items:start;
}

.pp-hero__title{
  margin:14px 0 0;
  font-size:clamp(2.3rem,8.4vw,4.4rem);
  font-weight:900;
  line-height:1.03;
  letter-spacing:-.02em;
}

.pp-hero__title span{
  color:var(--ok-mint);
}

.pp-hero__lead{
  margin-top:18px;
  max-width:54ch;
  color:var(--ok-ink-soft);
}

.pp-hero__jump{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(22px,3.4vw,30px);
}

.pp-hero__facts{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:clamp(26px,4vw,34px) 0 0;
  padding:18px 0 0;
  list-style:none;
  border-top:1px solid var(--pp-line);
}

.pp-fact{
  font-size:.85rem;
  color:var(--ok-ink-soft);
}

.pp-fact__num{
  display:block;
  font-family:var(--ok-font-mono);
  font-size:1.6rem;
  font-weight:500;
  color:var(--ok-amber);
  line-height:1.2;
}

.pp-hero__media{
  margin:0;
}

/* ---------- overview ---------- */
.pp-head{
  max-width:64ch;
}

.pp-split{
  display:grid;
  gap:14px;
  margin-top:clamp(22px,3.4vw,32px);
}

.pp-split__item{
  position:relative;
  padding:clamp(20px,4vw,32px);
  border:1px solid var(--pp-line);
  border-radius:var(--ok-radius);
  background:linear-gradient(155deg, var(--pp-card-soft), rgba(6,42,38,.15) 72%);
}

.pp-split__item::before{
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:2px;
  border-radius:2px;
  background:var(--ok-mint);
}

.page-products .pp-split__item--b{
  background:linear-gradient(155deg, var(--pp-amber-soft), rgba(6,42,38,.15) 72%);
}

.pp-split__item--b::before{
  background:var(--ok-amber);
}

.pp-split__item h3{
  margin:12px 0 8px;
  font-size:clamp(1.35rem,3.6vw,1.85rem);
  font-weight:800;
  letter-spacing:-.01em;
}

.pp-split__item p{
  margin:0;
  color:var(--ok-ink-soft);
  font-size:.95rem;
}

.pp-list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px;
}

.pp-list li{
  position:relative;
  padding-left:18px;
  font-size:.92rem;
  color:var(--ok-ink-soft);
  line-height:1.65;
}

.pp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--ok-mint);
}

.pp-split__item--b .pp-list li::before{
  background:var(--ok-amber);
}

.pp-split__item .ok-btn{
  margin-top:22px;
}

/* ---------- reads ---------- */
.pp-reads{
  display:grid;
  gap:0;
  margin-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--pp-line);
}

.pp-read{
  display:grid;
  gap:6px;
  padding:20px 0;
  border-bottom:1px solid var(--pp-line);
}

.pp-read__type{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
  color:var(--ok-fog);
}

.pp-read__when{
  margin:0;
  font-family:var(--ok-font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ok-amber);
}

.pp-read__body{
  margin:0;
  font-size:.94rem;
  line-height:1.72;
  color:var(--ok-ink-soft);
}

.pp-note{
  margin:22px 0 0;
  padding-left:14px;
  border-left:2px solid var(--ok-mint);
  font-size:.88rem;
  color:var(--ok-ink-soft);
}

/* ---------- panel ---------- */
.pp-two{
  display:grid;
  gap:clamp(20px,4vw,40px);
  align-items:start;
  margin-top:clamp(20px,3vw,30px);
}

.pp-two__text p{
  margin:0 0 14px;
  font-size:.96rem;
  line-height:1.78;
  color:var(--ok-ink-soft);
}

.pp-two__text h3{
  margin:0 0 12px;
  font-size:clamp(1.15rem,2.8vw,1.4rem);
  font-weight:800;
}

.pp-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}

.pp-chip{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid var(--pp-line);
  font-size:.82rem;
  color:var(--ok-ink-soft);
  background:rgba(6,42,38,.55);
}

.pp-chip.is-current{
  border-color:var(--ok-mint);
  color:var(--ok-deep);
  background:var(--ok-mint);
  font-weight:700;
}

.pp-panel__media{
  margin:0;
}

.pp-modes{
  margin-top:clamp(24px,4vw,36px);
  padding:clamp(18px,3.4vw,26px);
  border-radius:var(--ok-radius);
  border:1px solid var(--pp-line);
  background:var(--pp-card);
}

.pp-modes__label{
  margin:0 0 12px;
  font-family:var(--ok-font-mono);
  font-size:.76rem;
  letter-spacing:.1em;
  color:var(--ok-mist);
}

.pp-seg{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--pp-line);
  background:rgba(6,42,38,.75);
}

.pp-seg__item{
  padding:7px 16px;
  border-radius:999px;
  font-size:.85rem;
  color:var(--ok-ink-soft);
  transition:background var(--ok-t), color var(--ok-t);
}

.pp-seg__item.is-current{
  background:var(--ok-mint);
  color:var(--ok-deep);
  font-weight:700;
}

.pp-modes__list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.pp-modes__list li{
  font-size:.9rem;
  line-height:1.7;
  color:var(--ok-ink-soft);
}

.pp-modes__list strong{
  color:var(--ok-fog);
}

.pp-matrix{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:clamp(20px,3vw,28px);
}

.pp-cell{
  padding:18px;
  border-radius:var(--ok-radius-sm);
  border:1px solid var(--pp-line);
  background:var(--pp-card);
  transition:border-color var(--ok-t), transform var(--ok-t);
}

.pp-cell:hover{
  border-color:var(--ok-line-strong);
  transform:translateY(-2px);
}

.pp-cell h3{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:800;
  color:var(--ok-fog);
}

.pp-cell p{
  margin:0;
  font-size:.86rem;
  line-height:1.65;
  color:var(--ok-ink-soft);
}

.pp-cell--wide{
  background:linear-gradient(150deg, var(--pp-amber-soft), rgba(11,59,52,.6));
  border-color:rgba(255,177,59,.3);
}

.pp-cell__num{
  font-family:var(--ok-font-mono);
  font-size:1.9rem;
  font-weight:500;
  color:var(--ok-amber);
  line-height:1;
  margin:0 0 8px !important;
}

/* ---------- entry ---------- */
.pp-steps{
  display:grid;
  gap:12px;
  margin-top:clamp(20px,3vw,28px);
}

.pp-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  padding:18px;
  border-radius:var(--ok-radius-sm);
  border-left:2px solid var(--ok-mint);
  background:rgba(11,59,52,.55);
}

.pp-step__n{
  margin:0;
  font-family:var(--ok-font-mono);
  font-size:1.15rem;
  line-height:1.4;
  color:var(--ok-amber);
}

.pp-step h3{
  margin:0 0 6px;
  font-size:1rem;
  font-weight:800;
}

.pp-step p{
  margin:0;
  font-size:.88rem;
  line-height:1.7;
  color:var(--ok-ink-soft);
  grid-column:2;
}

.pp-acc{
  margin-top:clamp(22px,3.4vw,30px);
}

.pp-acc .ok-acc__btn{
  font-size:.94rem;
  font-weight:700;
}

.pp-acc .ok-acc__panel p{
  margin:0;
  font-size:.9rem;
  line-height:1.75;
  color:var(--ok-ink-soft);
}

/* ---------- metrics ---------- */
.pp-table-wrap{
  margin-top:clamp(20px,3vw,28px);
  border:1px solid var(--pp-line);
  border-radius:var(--ok-radius-sm);
  overflow-x:auto;
}

.pp-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.88rem;
}

.pp-table caption{
  padding:14px 16px;
  text-align:left;
  font-family:var(--ok-font-mono);
  font-size:.76rem;
  letter-spacing:.08em;
  color:var(--ok-mist);
  border-bottom:1px solid var(--pp-line);
}

.pp-table th,
.pp-table td{
  padding:13px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(143,248,225,.1);
  line-height:1.6;
}

.pp-table thead th{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ok-mist);
  background:rgba(6,42,38,.7);
}

.pp-table tbody th{
  font-weight:700;
  color:var(--ok-fog);
  white-space:nowrap;
}

.pp-table tbody td{
  color:var(--ok-ink-soft);
}

.pp-table tbody tr{
  transition:background var(--ok-t);
}

.pp-table tbody tr:hover{
  background:rgba(46,242,196,.07);
}

.pp-two--metrics{
  margin-top:clamp(24px,4vw,36px);
}

.pp-metrics__media{
  margin:0;
}

/* ---------- cadence ---------- */
.pp-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.pp-stat{
  padding:16px;
  border-radius:var(--ok-radius-sm);
  border:1px solid var(--pp-line);
  background:rgba(6,42,38,.6);
}

.pp-stat__num{
  margin:0 0 6px;
  font-family:var(--ok-font-mono);
  font-size:clamp(1.5rem,4vw,2rem);
  font-weight:500;
  color:var(--ok-amber);
  line-height:1;
}

.pp-stat p{
  margin:0;
  font-size:.82rem;
  line-height:1.55;
  color:var(--ok-ink-soft);
}

.pp-links{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.pp-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  color:var(--ok-mint);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color var(--ok-t), color var(--ok-t);
}

.pp-links a::before{
  content:"→";
  font-family:var(--ok-font-mono);
  font-size:.85em;
}

.pp-links a:hover,
.pp-links a:focus-visible{
  border-bottom-color:var(--ok-mint);
  color:var(--ok-mist);
}

.pp-cadence__media{
  margin:clamp(24px,4vw,36px) 0 0;
}

.pp-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:clamp(22px,3.4vw,30px);
  padding:clamp(18px,3.4vw,26px);
  border-radius:var(--ok-radius);
  border:1px solid rgba(46,242,196,.3);
  background:linear-gradient(120deg, rgba(46,242,196,.14), rgba(255,177,59,.1));
}

.pp-cta__text{
  margin:0;
  max-width:46ch;
  font-size:.94rem;
  line-height:1.7;
  color:var(--ok-fog);
}

@media (min-width:640px){
  .pp-hero__facts{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }

  .pp-matrix{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pp-cell--wide{
    grid-column:span 2;
  }

  .pp-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pp-read{
    grid-template-columns:150px minmax(0,1fr);
    align-items:baseline;
    column-gap:20px;
  }

  .pp-read__type{
    grid-row:1;
  }

  .pp-read__when{
    grid-column:1;
    grid-row:2;
  }

  .pp-read__body{
    grid-column:2;
    grid-row:1 / span 2;
  }
}

@media (min-width:900px){
  .pp-hero__grid{
    grid-template-columns:1.05fr .95fr;
    gap:clamp(28px,4vw,56px);
  }

  .pp-split{
    grid-template-columns:1.05fr .95fr;
    gap:16px;
  }

  .pp-two{
    grid-template-columns:1.05fr .95fr;
  }

  .pp-two--metrics{
    grid-template-columns:.9fr 1.1fr;
  }

  .pp-matrix{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .pp-cell--wide{
    grid-column:span 2;
  }

  .pp-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }

  .pp-step{
    grid-template-columns:1fr;
    gap:10px;
    border-left:none;
    border-top:2px solid var(--ok-mint);
    padding:20px;
  }

  .pp-step p{
    grid-column:1;
  }

  .pp-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pp-cadence__media{
    margin-top:clamp(28px,4vw,40px);
  }
}

@media (min-width:1100px){
  .pp-hero__media{
    margin-top:6px;
  }

  .pp-modes{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    column-gap:28px;
  }

  .pp-modes__label{
    margin:10px 0 0;
  }

  .pp-seg{
    grid-column:2;
    justify-self:start;
  }

  .pp-modes__list{
    grid-column:2;
  }
}

@media (prefers-reduced-motion: reduce){
  .pp-cell,
  .pp-chip,
  .pp-seg__item,
  .pp-table tbody tr,
  .pp-links a{
    transition:none;
  }

  .pp-cell:hover{
    transform:none;
  }
}
<<<END>>>