.page-products{
  --pp-line:var(--wire);
  --pp-gap:clamp(1rem,2.4vw,2rem);
  --pp-pad:clamp(2.6rem,6vw,5rem);
  --pp-mist-2:#C6D4E4;
  background:var(--ink-900);
  color:var(--paper);
  font-family:var(--font-body);
  overflow-x:hidden;
}
.page-products h1,
.page-products h2,
.page-products h3{
  font-family:var(--font-display);
  font-weight:900;
  margin:0;
}
.page-products h1{
  font-size:clamp(2.05rem,6.4vw,4rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.page-products h2{
  font-size:clamp(1.5rem,3.6vw,2.4rem);
  line-height:1.14;
  letter-spacing:-.01em;
}
.page-products h3{
  font-size:clamp(1.02rem,2vw,1.28rem);
  line-height:1.35;
}
.page-products p{
  margin:0;
  line-height:1.8;
  font-size:clamp(.94rem,1.3vw,1rem);
}
.page-products a{ color:inherit; }
.page-products .pp-mono{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.04em;
}

/* breadcrumbs */
.page-products .breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:clamp(1rem,2.2vw,1.6rem) 0 0;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--mist);
}
.page-products .breadcrumbs li:not(:last-child)::after{
  content:"/";
  margin-left:.5rem;
  color:var(--wire);
}
.page-products .breadcrumbs a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--ease),color var(--ease);
}
.page-products .breadcrumbs a:hover,
.page-products .breadcrumbs a:focus-visible{
  color:var(--amber);
  border-bottom-color:var(--amber);
}

/* shared bits inside this page */
.page-products .eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 .9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.page-products .eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--amber);
  display:block;
}
.page-products .pp-eyebrow--ink{ color:var(--wine); }
.page-products .pp-eyebrow--ink::before{ background:var(--wine); }

.page-products .pp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.7rem 1.5rem;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:0;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.page-products .btn--primary.pp-btn{
  background:var(--sapphire);
  color:var(--paper);
  border-color:var(--sapphire);
}
.page-products .btn--primary.pp-btn:hover,
.page-products .btn--primary.pp-btn:focus-visible{
  background:var(--sapphire-bright);
  border-color:var(--sapphire-bright);
}
.page-products .btn--ghost.pp-btn{
  background:transparent;
  color:var(--paper);
  border-color:var(--wire);
}
.page-products .btn--ghost.pp-btn:hover,
.page-products .btn--ghost.pp-btn:focus-visible{
  border-color:var(--amber);
  color:var(--amber);
}

.page-products .pp-sec{
  padding-block:var(--pp-pad);
  border-top:1px solid var(--pp-line);
}
.page-products .pp-head{
  max-width:62ch;
  margin-bottom:clamp(1.6rem,3.4vw,2.6rem);
}
.page-products .pp-head__lead{
  margin-top:1rem;
  color:var(--pp-mist-2);
}

/* hero */
.page-products .pp-hero{
  display:grid;
  gap:clamp(1.8rem,4vw,3rem);
  padding-block:clamp(1.6rem,4vw,2.6rem) clamp(2.4rem,5vw,4rem);
}
.page-products .pp-hero__lead{
  margin-top:1.2rem;
  max-width:48ch;
  color:var(--pp-mist-2);
  font-size:clamp(.98rem,1.5vw,1.08rem);
}
.page-products .pp-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.8rem;
}
.page-products .pp-hero__facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.6rem;
  margin:1.8rem 0 0;
  padding:1rem 0 0;
  border-top:1px solid var(--pp-line);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--mist);
}
.page-products .pp-hero__facts li{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.page-products .pp-hero__facts .pp-mono{
  color:var(--amber);
  font-size:.95rem;
}

.page-products .pp-device{
  position:relative;
  margin:0;
  padding:.85rem .85rem 2.4rem;
  border:1px solid var(--pp-line);
  background:linear-gradient(165deg,rgba(36,87,255,.2),rgba(6,19,33,.2) 58%,rgba(58,36,96,.22));
}
.page-products .pp-device__rule{
  position:absolute;
  top:.85rem;
  left:.85rem;
  right:.85rem;
  height:3px;
  background:repeating-linear-gradient(90deg,var(--wire) 0 6px,transparent 6px 12px);
  pointer-events:none;
}
.page-products .pp-device img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--pp-line);
}
.page-products .pp-device__pin{
  position:absolute;
  right:.85rem;
  bottom:2.6rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .8rem;
  background:var(--ink-900);
  border:1px solid var(--amber);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--amber);
}
.page-products .pp-device__star{
  font-size:.9rem;
  line-height:1;
}
.page-products .pp-device figcaption{
  position:absolute;
  left:.85rem;
  right:.85rem;
  bottom:.75rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--mist);
  line-height:1.5;
}

/* downloads */
.page-products .pp-downloads{ background:var(--ink-800); }
.page-products .pp-dl{
  display:grid;
  gap:var(--pp-gap);
}
.page-products .pp-dl__card{
  border:1px solid var(--pp-line);
  background:rgba(6,19,33,.7);
  padding:clamp(1.1rem,2.6vw,1.9rem);
  display:flex;
  flex-direction:column;
  gap:.9rem;
  transition:border-color var(--ease),transform var(--ease);
}
.page-products .pp-dl__card:hover{ border-color:var(--amber); }
.page-products .pp-dl__card--ios{ border-left:3px solid var(--sapphire); }
.page-products .pp-dl__card--web{ border-left:3px solid var(--lime); }
.page-products .pp-dl__kicker{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mist);
}
.page-products .pp-dl__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  font-size:.93rem;
  line-height:1.7;
  color:var(--pp-mist-2);
}
.page-products .pp-dl__list li{
  position:relative;
  padding-left:1.1rem;
}
.page-products .pp-dl__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:1px;
  background:var(--amber);
}
.page-products .pp-dl__mark{
  margin:0;
  border:1px solid var(--pp-line);
  padding:.85rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  background:radial-gradient(circle at 70% 20%,rgba(244,183,64,.16),transparent 65%);
}
.page-products .pp-dl__mark img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:1/1;
}
.page-products .pp-dl__mark figcaption{
  font-family:var(--font-mono);
  font-size:.7rem;
  line-height:1.6;
  color:var(--mist);
}

/* v3 track */
.page-products .pp-v3__track{
  display:grid;
  gap:1px;
  background:var(--pp-line);
  border:1px solid var(--pp-line);
}
.page-products .pp-v3__slab{
  padding:clamp(1.1rem,2.8vw,2rem);
  display:flex;
  flex-direction:column;
  gap:.75rem;
  min-height:220px;
  transition:background var(--ease);
}
.page-products .pp-v3__slab p{
  color:var(--pp-mist-2);
  font-size:.93rem;
  line-height:1.8;
}
.page-products .pp-v3__num{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--paper);
  opacity:.72;
}
.page-products .pp-v3__slab--blue{
  background:linear-gradient(160deg,rgba(36,87,255,.42),rgba(6,19,33,.94));
  border-top:3px solid var(--sapphire);
}
.page-products .pp-v3__slab--indigo{
  background:linear-gradient(160deg,rgba(58,36,96,.62),rgba(6,19,33,.94));
  border-top:3px solid var(--indigo);
}
.page-products .pp-v3__slab--amber{
  background:linear-gradient(160deg,rgba(244,183,64,.26),rgba(6,19,33,.94));
  border-top:3px solid var(--amber);
}
.page-products .pp-v3__figure{
  margin:var(--pp-gap) 0 0;
  border:1px solid var(--pp-line);
  padding:.7rem;
}
.page-products .pp-v3__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .pp-v3__figure figcaption{
  margin-top:.7rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.04em;
  color:var(--mist);
}

/* steps */
.page-products .pp-scale{
  display:block;
  width:100%;
  height:auto;
  color:var(--amber);
  margin-bottom:1.2rem;
}
.page-products .pp-steps{
  display:grid;
  gap:1px;
  background:var(--pp-line);
  border:1px solid var(--pp-line);
}
.page-products .pp-step{
  background:var(--ink-900);
  padding:clamp(1.1rem,2.6vw,1.8rem);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  border-left:2px solid transparent;
  transition:border-color var(--ease),background var(--ease);
}
.page-products .pp-step:hover{
  border-left-color:var(--amber);
  background:var(--ink-800);
}
.page-products .pp-step p{
  color:var(--pp-mist-2);
  font-size:.92rem;
}
.page-products .pp-step__num{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--amber);
}

/* revisit */
.page-products .pp-revisit{ background:var(--ink-800); }
.page-products .pp-revisit__grid{
  display:grid;
  gap:clamp(1.4rem,3.2vw,2.6rem);
}
.page-products .pp-revisit__figure{
  margin:0;
  border:1px solid var(--pp-line);
  padding:.7rem;
  align-self:start;
}
.page-products .pp-revisit__figure img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio:1/1;
}
.page-products .pp-revisit__lead{
  margin-top:1rem;
  color:var(--pp-mist-2);
  max-width:46ch;
}
.page-products .pp-sort{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.6rem 0 1rem;
}
.page-products .pp-sort__tab{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.08em;
  padding:.42rem .85rem;
  border:1px solid var(--pp-line);
  color:var(--mist);
  transition:border-color var(--ease),color var(--ease),background var(--ease);
  cursor:default;
}
.page-products .pp-sort__tab:hover{
  border-color:var(--amber);
  color:var(--amber);
}
.page-products .pp-sort__tab.is-current{
  border-color:var(--amber);
  background:rgba(244,183,64,.12);
  color:var(--amber);
}
.page-products .pp-monolist{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--pp-line);
}
.page-products .pp-monolist li{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.4rem 1rem;
  padding:.7rem .2rem;
  border-bottom:1px solid var(--pp-line);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.03em;
}
.page-products .pp-monolist__meta{ color:var(--mist); }
.page-products .pp-revisit__notes{
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.page-products .pp-revisit__notes li{
  position:relative;
  padding-left:1.1rem;
  font-size:.9rem;
  line-height:1.75;
  color:var(--pp-mist-2);
}
.page-products .pp-revisit__notes li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:8px;
  height:1px;
  background:var(--lime);
}

/* compat */
.page-products .pp-compat__banner{
  margin:0 0 var(--pp-gap);
  border:1px solid var(--pp-line);
  overflow:hidden;
}
.page-products .pp-compat__banner img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:cover;
  opacity:.68;
}
.page-products .pp-spec{
  width:100%;
  border-collapse:collapse;
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--pp-line);
}
.page-products .pp-spec__caption{
  text-align:left;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--mist);
  padding-bottom:.8rem;
}
.page-products .pp-spec th,
.page-products .pp-spec td{
  text-align:left;
  vertical-align:top;
  padding:.85rem .6rem;
  border-bottom:1px solid var(--pp-line);
  font-size:.92rem;
  line-height:1.7;
}
.page-products .pp-spec th{
  width:30%;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--amber);
}
.page-products .pp-spec td{ color:var(--pp-mist-2); }

.page-products .pp-trouble{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--pp-line);
}
.page-products .pp-trouble li{ border-bottom:1px solid var(--pp-line); }
.page-products .pp-trouble summary{
  cursor:pointer;
  padding:.95rem .2rem .95rem 1.6rem;
  position:relative;
  font-weight:600;
  font-size:.96rem;
  transition:color var(--ease);
}
.page-products .pp-trouble summary::-webkit-details-marker{ display:none; }
.page-products .pp-trouble summary::before{
  content:"+";
  position:absolute;
  left:0;
  top:.95rem;
  font-family:var(--font-mono);
  color:var(--amber);
  font-weight:400;
}
.page-products .pp-trouble details[open] summary::before{ content:"–"; }
.page-products .pp-trouble summary:hover{ color:var(--amber); }
.page-products .pp-trouble p{
  margin:0 0 1rem;
  padding-left:1.6rem;
  color:var(--pp-mist-2);
  font-size:.92rem;
}

.page-products .pp-copybar{
  margin-top:clamp(1.6rem,3vw,2.2rem);
  border:1px solid var(--pp-line);
  border-left:3px solid var(--amber);
  background:var(--ink-800);
  padding:clamp(1rem,2.4vw,1.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.page-products .pp-copybar__text{
  max-width:50ch;
  color:var(--pp-mist-2);
  font-size:.9rem;
}
.page-products .pp-copy{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:transparent;
  border:1px solid var(--wire);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.04em;
  padding:.6rem 1rem;
  cursor:pointer;
  border-radius:0;
  transition:border-color var(--ease),color var(--ease);
}
.page-products .pp-copy:hover,
.page-products .pp-copy:focus-visible{
  border-color:var(--amber);
  color:var(--amber);
}
.page-products .copy__state{ color:var(--lime); font-size:.72rem; }

/* qa */
.page-products .pp-qa{
  background:var(--sand);
  color:var(--ink-900);
}
.page-products .pp-qa h2{ color:var(--ink-900); }
.page-products .pp-qa .pp-head__lead{ color:#4A5A6E; }
.page-products .pp-faq{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgba(44,74,107,.4);
}
.page-products .pp-faq li{
  border-bottom:1px solid rgba(44,74,107,.4);
  padding:clamp(1rem,2.4vw,1.5rem) 0;
  display:grid;
  gap:.6rem;
}
.page-products .pp-faq h3{
  color:var(--ink-900);
  font-size:clamp(1rem,1.9vw,1.15rem);
}
.page-products .pp-faq p{
  color:#3E4E60;
  font-size:.94rem;
  max-width:70ch;
}
.page-products .pp-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:clamp(1.6rem,3vw,2.2rem);
}
.page-products .pp-links a{
  display:inline-block;
  padding:.6rem 1rem;
  border:1px solid rgba(44,74,107,.55);
  color:var(--ink-900);
  text-decoration:none;
  font-size:.86rem;
  font-weight:600;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.page-products .pp-links a:hover,
.page-products .pp-links a:focus-visible{
  background:var(--sapphire);
  border-color:var(--sapphire);
  color:var(--paper);
}

@media (min-width:760px){
  .page-products .pp-dl{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .page-products .pp-dl__mark{
    grid-column:1 / -1;
    flex-direction:row;
    align-items:center;
    gap:1.2rem;
  }
  .page-products .pp-dl__mark img{
    width:180px;
    flex:0 0 180px;
  }
  .page-products .pp-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-products .pp-faq li{
    grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
    gap:1.4rem;
    align-items:start;
  }
  .page-products .pp-spec th{ width:24%; }
}

@media (min-width:920px){
  .page-products .pp-hero{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.86fr);
    align-items:start;
  }
  .page-products .pp-v3__track{
    grid-template-columns:1.18fr 1fr .84fr;
  }
  .page-products .pp-revisit__grid{
    grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
    align-items:start;
  }
  .page-products .pp-dl{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 260px;
    align-items:start;
  }
  .page-products .pp-dl__mark{
    grid-column:auto;
    flex-direction:column;
    align-items:stretch;
  }
  .page-products .pp-dl__mark img{
    width:100%;
    flex:none;
  }
  .page-products .pp-compat__banner img{ max-height:260px; }
}

@media (min-width:1200px){
  .page-products .pp-hero__copy{ padding-right:1.5rem; }
  .page-products .pp-v3__slab{ min-height:250px; }
}
<<<END>>>