.page-products{
  --pp-accent:#00FFA3;
  --pp-alert:#FF5E3A;
  --pp-surface:#1A2540;
  --pp-soft:#101A30;
  --pp-line:#3A4A6E;
  --pp-text:#E6E9F0;
  --pp-dim:#A0A8C0;
  --pp-bg:#0B0F1E;
  display:block;
  color:var(--pp-text);
  font-family:var(--jbo-body);
  background:
    radial-gradient(1000px 480px at 88% 0%, rgba(0,255,163,.05), transparent 62%),
    linear-gradient(180deg, var(--pp-bg) 0%, var(--pp-soft) 100%);
  overflow-x:hidden;
}
.page-products h1,
.page-products h2,
.page-products h3{
  font-family:var(--jbo-heading);
  line-height:1.16;
  letter-spacing:.02em;
  margin:0;
}
.page-products a:focus-visible,
.page-products summary:focus-visible,
.page-products label:focus-visible{
  outline:2px solid var(--pp-accent);
  outline-offset:2px;
  border-radius:4px;
}
.page-products > section{
  position:relative;
  padding:44px 0;
}
.page-products .pp-hero{
  padding-top:28px;
  background:
    radial-gradient(640px 320px at 82% 12%, rgba(0,255,163,.07), transparent 70%),
    linear-gradient(160deg, rgba(16,26,48,.55), rgba(11,15,30,.95));
}
.page-products .pp-hero::after{
  content:"";
  display:block;
  height:3px;
  margin-top:44px;
  background:linear-gradient(90deg, var(--pp-accent) 0%, var(--pp-line) 45%, transparent 92%);
  transform:skewX(-28deg);
  transform-origin:left center;
}
.page-products .pp-crumb{
  margin-bottom:22px;
  color:var(--pp-dim);
  font-size:.85rem;
}
.page-products .pp-crumb a{
  color:var(--pp-accent);
  text-decoration:none;
}
.page-products .pp-crumb a:hover{
  text-decoration:underline;
}
.page-products .pp-hero__grid{
  display:grid;
  gap:28px;
}
.page-products .pp-hero h1{
  font-size:2.05rem;
  margin:12px 0 14px;
  color:var(--pp-text);
}
.page-products .pp-hero__lead{
  font-size:1.02rem;
  font-weight:600;
  line-height:1.6;
  color:var(--pp-accent);
  margin:0 0 14px;
}
.page-products .pp-hero__body{
  color:var(--pp-dim);
  line-height:1.8;
  font-size:.94rem;
  margin:0 0 24px;
  max-width:58ch;
}
.page-products .pp-hero__quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.page-products .pp-hero__quick a{
  display:inline-block;
  padding:6px 14px;
  border:1px solid var(--pp-line);
  border-radius:999px;
  color:var(--pp-dim);
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  transition:color .25s ease,border-color .25s ease;
}
.page-products .pp-hero__quick a:hover{
  color:var(--pp-accent);
  border-color:var(--pp-accent);
}
.page-products .pp-hero__stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.page-products .pp-stat{
  background:linear-gradient(145deg, rgba(26,37,64,.7), rgba(16,26,48,.5));
  border:1px solid var(--pp-line);
  border-left:3px solid var(--pp-accent);
  border-radius:var(--jbo-radius);
  padding:14px 16px;
  transition:transform .25s ease,border-color .25s ease;
}
.page-products .pp-stat:hover{
  transform:translateY(-2px);
  border-color:var(--pp-accent);
}
.page-products .pp-stat__num{
  display:block;
  font-size:1.32rem;
  font-weight:700;
  color:var(--pp-accent);
  line-height:1.2;
  margin-bottom:2px;
}
.page-products .pp-stat__label{
  color:var(--pp-dim);
  font-size:.78rem;
  letter-spacing:.06em;
}
.page-products .pp-hero__figure{
  margin:0;
}
.page-products .pp-hero__img{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--pp-line);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.page-products .pp-hero__figure figcaption{
  margin-top:10px;
  color:var(--pp-dim);
  font-size:.8rem;
  text-align:center;
}
.page-products .pp-mobile{
  background:
    linear-gradient(125deg, rgba(255,94,58,.035), transparent 42%);
}
.page-products .pp-mobile__grid{
  display:grid;
  gap:26px;
}
.page-products .pp-phone{
  order:1;
  margin:0;
}
.page-products .pp-phone__frame{
  position:relative;
  max-width:250px;
  margin:0 auto;
  padding:12px 8px 18px;
  border-radius:34px;
  background:linear-gradient(150deg, #1A2540, #0B0F1E);
  border:1px solid var(--pp-line);
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
}
.page-products .pp-phone__frame::before{
  content:"";
  display:block;
  width:64px;
  height:5px;
  border-radius:3px;
  background:var(--pp-line);
  margin:0 auto 12px;
}
.page-products .pp-phone__img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
  object-fit:cover;
}
.page-products .pp-phone__caption{
  text-align:center;
  color:var(--pp-dim);
  font-size:.8rem;
  margin-top:10px;
}
.page-products .pp-mobile__content{
  order:2;
}
.page-products .pp-mobile h2{
  font-size:1.62rem;
  margin:10px 0 14px;
  color:var(--pp-text);
}
.page-products .pp-mobile__lead{
  font-size:1rem;
  line-height:1.6;
  color:var(--pp-text);
  margin:0 0 12px;
}
.page-products .pp-mobile__body{
  color:var(--pp-dim);
  line-height:1.8;
  font-size:.94rem;
  margin:0 0 22px;
}
.page-products .pp-mobile__points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .pp-mobile__points li{
  position:relative;
  padding-left:24px;
  color:var(--pp-dim);
  font-size:.9rem;
  line-height:1.6;
}
.page-products .pp-mobile__points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:13px;
  height:4px;
  border-radius:2px;
  background:var(--pp-accent);
  transform:skewX(-22deg);
}
.page-products .pp-mobile__points strong{
  color:var(--pp-text);
}
.page-products .pp-callout{
  order:3;
  border-left:3px solid var(--pp-accent);
  background:linear-gradient(135deg, rgba(0,255,163,.07), rgba(16,26,48,.55));
  padding:16px 18px;
  border-radius:0 var(--jbo-radius) var(--jbo-radius) 0;
  font-size:.9rem;
  line-height:1.75;
  color:var(--pp-text);
}
.page-products .pp-callout p{
  margin:10px 0 0;
}
.page-products .pp-panel{
  background:
    linear-gradient(315deg, rgba(0,255,163,.05), transparent 46%);
}
.page-products .pp-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, transparent 10%, var(--pp-accent) 55%, transparent 90%);
  opacity:.7;
}
.page-products .pp-panel h2,
.page-products .pp-download h2,
.page-products .pp-version h2,
.page-products .pp-method h2{
  font-size:1.62rem;
  margin:10px 0 14px;
  color:var(--pp-text);
}
.page-products .pp-panel__lead,
.page-products .pp-download__lead,
.page-products .pp-version__lead,
.page-products .pp-method__lead{
  font-size:1rem;
  line-height:1.65;
  color:var(--pp-text);
  margin:0 0 12px;
  max-width:60ch;
}
.page-products .pp-panel__body{
  color:var(--pp-dim);
  line-height:1.8;
  font-size:.94rem;
  margin:0 0 26px;
  max-width:62ch;
}
.page-products .pp-panel__figure{
  margin:0 0 26px;
}
.page-products .pp-panel__figure img,
.page-products .pp-download__figure img,
.page-products .pp-version__figure img{
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--pp-line);
}
.page-products .pp-panel__figure figcaption,
.page-products .pp-download__figure figcaption,
.page-products .pp-version__figure figcaption{
  margin-top:8px;
  color:var(--pp-dim);
  font-size:.8rem;
}
.page-products .pp-panel__modules{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}
.page-products .pp-module{
  position:relative;
  border:1px solid var(--pp-line);
  border-radius:var(--jbo-radius);
  background:linear-gradient(145deg, rgba(26,37,64,.75), rgba(16,26,48,.5));
  padding:18px 18px 18px 58px;
  transition:border-color .25s ease, transform .25s ease;
}
.page-products .pp-module:hover{
  border-color:var(--pp-accent);
  transform:translateY(-3px);
}
.page-products .pp-module__num{
  position:absolute;
  left:16px;
  top:18px;
  font-weight:700;
  font-size:.88rem;
  color:var(--pp-accent);
}
.page-products .pp-module h3{
  font-size:.95rem;
  margin:0 0 6px;
  color:var(--pp-text);
}
.page-products .pp-module p{
  margin:0;
  color:var(--pp-dim);
  font-size:.88rem;
  line-height:1.65;
}
.page-products .pp-download{
  background:
    linear-gradient(240deg, rgba(0,255,163,.05), transparent 55%);
}
.page-products .pp-download__head{
  margin-bottom:24px;
}
.page-products .pp-download__lead{
  color:var(--pp-dim);
}
.page-products .pp-download__layout{
  display:grid;
  gap:24px;
}
.page-products .pp-resources{
  display:grid;
  gap:14px;
  align-content:start;
}
.page-products .pp-resource{
  border:1px solid var(--pp-line);
  border-radius:var(--jbo-radius);
  background:var(--pp-soft);
  padding:18px;
  transition:border-color .25s ease;
}
.page-products .pp-resource:hover{
  border-color:var(--pp-accent);
}
.page-products .pp-resource__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.page-products .pp-resource__type{
  font-size:.78rem;
  color:var(--pp-accent);
  border:1px solid rgba(0,255,163,.4);
  padding:2px 8px;
  border-radius:4px;
  letter-spacing:.08em;
}
.page-products .pp-resource h3{
  font-size:1rem;
  margin:0 0 6px;
  color:var(--pp-text);
}
.page-products .pp-resource p{
  margin:0;
  color:var(--pp-dim);
  font-size:.88rem;
  line-height:1.68;
}
.page-products .pp-resources__note{
  color:var(--pp-dim);
  font-size:.84rem;
  line-height:1.65;
  margin:2px 0 8px;
}
.page-products .pp-version{
  background:
    linear-gradient(160deg, rgba(16,26,48,.75), rgba(11,15,30,.95));
}
.page-products .pp-version__head{
  margin-bottom:26px;
}
.page-products .pp-version__lead{
  color:var(--pp-dim);
}
.page-products .pp-version__layout{
  display:grid;
  gap:26px;
}
.page-products .pp-version__current{
  border:1px solid rgba(0,255,163,.35);
  background:linear-gradient(135deg, rgba(0,255,163,.13), rgba(16,26,48,.55));
  border-radius:10px;
  padding:22px;
  margin-bottom:22px;
}
.page-products .pp-version__label{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.2em;
  color:var(--pp-dim);
  margin-bottom:8px;
}
.page-products .pp-version__num{
  display:block;
  font-size:2.2rem;
  font-weight:700;
  color:var(--pp-accent);
  line-height:1.1;
  margin-bottom:10px;
}
.page-products .pp-version__desc{
  margin:0;
  color:var(--pp-text);
  font-size:.92rem;
  line-height:1.72;
}
.page-products .pp-version__history h3{
  font-size:1rem;
  margin:0 0 12px;
  color:var(--pp-text);
}
.page-products .pp-version__item{
  border:1px solid var(--pp-line);
  border-radius:var(--jbo-radius);
  background:var(--pp-soft);
  margin-bottom:10px;
}
.page-products .pp-version__item summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  font-size:.94rem;
  font-weight:600;
  color:var(--pp-text);
  transition:border-color .25s ease;
}
.page-products .pp-version__item summary::-webkit-details-marker{
  display:none;
}
.page-products .pp-version__item summary:hover{
  background:rgba(0,255,163,.04);
}
.page-products .pp-version__item summary::after{
  content:"+";
  margin-left:auto;
  color:var(--pp-accent);
  font-family:var(--jbo-mono);
  font-weight:700;
  font-size:1rem;
}
.page-products .pp-version__item[open] summary::after{
  content:"–";
}
.page-products .pp-version__item p{
  margin:0;
  padding:0 16px 14px;
  color:var(--pp-dim);
  font-size:.88rem;
  line-height:1.65;
}
.page-products .pp-version__item p a{
  color:var(--pp-accent);
  text-decoration:none;
}
.page-products .pp-version__item p a:hover{
  text-decoration:underline;
}
.page-products .pp-version__layout .jbo-btn{
  margin-top:4px;
}
.page-products .pp-method{
  background:
    radial-gradient(720px 360px at 18% 92%, rgba(0,255,163,.055), transparent 68%);
}
.page-products .pp-method__head{
  margin-bottom:24px;
}
.page-products .pp-method__lead{
  color:var(--pp-dim);
}
.page-products .pp-tabs{
  position:relative;
}
.page-products .pp-tabs__radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.page-products .pp-tabs__nav{
  display:flex;
  gap:6px;
  margin-bottom:14px;
  border-bottom:1px solid var(--pp-line);
  overflow-x:auto;
}
.page-products .pp-tabs__label{
  flex:0 0 auto;
  padding:10px 20px;
  cursor:pointer;
  border:1px solid var(--pp-line);
  border-bottom:none;
  border-radius:8px 8px 0 0;
  background:var(--pp-soft);
  color:var(--pp-dim);
  font-size:.86rem;
  font-weight:600;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.page-products .pp-tabs__label:hover{
  color:var(--pp-text);
  border-color:var(--pp-accent);
}
.page-products .pp-tabs__panels{
  border:1px solid var(--pp-line);
  border-radius:0 8px 8px 8px;
  background:linear-gradient(145deg, var(--pp-soft), rgba(11,15,30,.65));
  overflow:hidden;
}
.page-products .pp-tabs__panel{
  display:none;
  padding:20px;
}
.page-products .pp-tabs__panel h3{
  font-size:1rem;
  margin:0 0 8px;
  color:var(--pp-text);
}
.page-products .pp-tabs__panel p{
  color:var(--pp-dim);
  font-size:.9rem;
  line-height:1.72;
  margin:0 0 20px;
}
.page-products #pp-method-mobile:checked ~ .pp-tabs__nav label[for="pp-method-mobile"],
.page-products #pp-method-standard:checked ~ .pp-tabs__nav label[for="pp-method-standard"],
.page-products #pp-method-data:checked ~ .pp-tabs__nav label[for="pp-method-data"]{
  background:var(--pp-accent);
  color:var(--pp-bg);
  border-color:var(--pp-accent);
}
.page-products #pp-method-mobile:checked ~ .pp-tabs__panels .pp-tabs__panel:nth-child(1),
.page-products #pp-method-standard:checked ~ .pp-tabs__panels .pp-tabs__panel:nth-child(2),
.page-products #pp-method-data:checked ~ .pp-tabs__panels .pp-tabs__panel:nth-child(3){
  display:block;
}
.page-products .pp-method__footnote{
  margin-top:18px;
  color:var(--pp-dim);
  font-size:.85rem;
  line-height:1.65;
}
.page-products .pp-method__footnote a{
  color:var(--pp-accent);
  text-decoration:none;
}
.page-products .pp-method__footnote a:hover{
  text-decoration:underline;
}

@media (min-width:768px){
  .page-products > section{
    padding:76px 0;
  }
  .page-products .pp-hero{
    padding-top:40px;
  }
  .page-products .pp-hero h1{
    font-size:2.7rem;
  }
  .page-products .pp-hero__grid{
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:48px;
  }
  .page-products .pp-hero__stats{
    grid-template-columns:repeat(4,1fr);
  }
  .page-products .pp-hero__figure{
    margin:0;
  }
  .page-products .pp-mobile__grid{
    grid-template-columns:1fr 280px;
    gap:24px 48px;
    align-items:start;
  }
  .page-products .pp-mobile__content{
    grid-column:1;
    grid-row:1;
    order:1;
  }
  .page-products .pp-phone{
    grid-column:2;
    grid-row:1 / span 2;
    order:2;
  }
  .page-products .pp-callout{
    grid-column:1;
    grid-row:2;
    order:3;
  }
  .page-products .pp-panel__figure img{
    max-height:520px;
    object-fit:cover;
  }
  .page-products .pp-panel__modules{
    grid-template-columns:repeat(2,1fr);
  }
  .page-products .pp-download__layout{
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
  }
  .page-products .pp-version__layout{
    grid-template-columns:1fr .85fr;
    gap:48px;
    align-items:start;
  }
  .page-products .pp-version__figure{
    margin:0;
    position:sticky;
    top:24px;
  }
  .page-products .pp-tabs__nav{
    gap:10px;
  }
}