.page-products{
  --pd-phone-w:250px;
  --pd-phone-h:520px;
  --pd-notch:var(--by-notch,18px);
  --pd-ease:var(--by-ease,cubic-bezier(.22,1,.36,1));
  overflow-x:hidden;
}
.page-products .pd-hero{
  position:relative;
  margin-top:calc(-1 * var(--by-header-h));
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(105deg,transparent 38%,rgba(230,57,70,.16) 38.5%,transparent 39%,transparent 58%,rgba(255,215,0,.09) 58.5%,transparent 59%),
    radial-gradient(ellipse at 82% 20%,rgba(29,53,87,.6),transparent 58%),
    var(--by-bg);
  padding:calc(var(--by-header-h) + 56px) 0 64px;
  overflow:hidden;
}
.page-products .pd-hero__slant{
  position:absolute;
  top:0;
  right:-12%;
  width:70%;
  height:100%;
  background:repeating-linear-gradient(-18deg,transparent 0,transparent 18px,rgba(230,57,70,.07) 18px,rgba(230,57,70,.07) 20px);
  pointer-events:none;
  transform:skewX(-8deg);
}
.page-products .pd-hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:48px;
}
.page-products .pd-hero__content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.page-products .pd-hero__content .by-title--display{
  font-family:Impact,"Arial Black",var(--by-font-head);
  font-size:clamp(2.6rem,7vw,4.8rem);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:-.02em;
  margin:.5rem 0 1rem;
}
.page-products .pd-hero__content .by-lead{
  max-width:34rem;
  color:var(--by-gray);
  font-size:1.05rem;
  margin:0 0 1.75rem;
}
.page-products .pd-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2.5rem;
}
.page-products .pd-hero__stats{
  display:flex;
  gap:2.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:1.5rem;
}
.page-products .pd-hero-stat{
  display:flex;
  flex-direction:column;
}
.page-products .pd-hero-stat .by-stat__value{
  font-family:var(--by-font-num);
  font-size:2.1rem;
  font-weight:700;
  color:var(--by-white);
  line-height:1;
}
.page-products .pd-hero-stat .by-stat__label{
  color:var(--by-gray);
  font-size:.85rem;
  margin-top:.35rem;
}
.page-products .pd-unit{
  font-size:.6em;
  margin-left:.1em;
  color:var(--by-red);
}
.page-products .pd-hero__device{
  display:flex;
  justify-content:center;
  perspective:1200px;
}
.page-products .pd-phone{
  width:var(--pd-phone-w);
  min-height:var(--pd-phone-h);
  background:linear-gradient(160deg,#121A2A,#0A0F1A 70%);
  border:2px solid rgba(255,255,255,.14);
  border-radius:26px;
  position:relative;
  padding:14px 10px 18px;
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(230,57,70,.18),0 0 80px rgba(230,57,70,.1);
  transition:transform .6s var(--pd-ease);
}
.page-products .pd-phone:hover{
  transform:rotateY(-8deg) rotateX(3deg) translateY(-4px);
}
.page-products .pd-phone__notch{
  width:88px;
  height:14px;
  background:#050B14;
  border-radius:0 0 12px 12px;
  margin:-14px auto 8px;
}
.page-products .pd-phone__screen{
  background:linear-gradient(180deg,#0D1424,#080D18);
  border-radius:16px;
  flex:1;
  display:flex;
  flex-direction:column;
  padding:12px;
  min-height:440px;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.page-products .pd-phone__status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--by-font-head);
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--by-white);
  margin-bottom:1.5rem;
}
.page-products .pd-phone__live{
  background:var(--by-red);
  color:#fff;
  font-family:var(--by-font-num);
  font-size:.62rem;
  padding:2px 7px;
  letter-spacing:.14em;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.page-products .pd-phone__match{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:1.1rem 0;
}
.page-products .pd-phone__teams{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--by-font-head);
  font-weight:700;
  color:var(--by-gray);
  font-size:.82rem;
  text-transform:uppercase;
}
.page-products .pd-phone__vs{
  font-family:var(--by-font-num);
  font-size:1.55rem;
  color:var(--by-white);
}
.page-products .pd-phone__cards{
  margin-top:1.1rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.page-products .pd-phone__card-row{
  display:flex;
  align-items:center;
  gap:.45rem;
}
.page-products .pd-phone__time{
  font-family:var(--by-font-num);
  color:var(--by-gray);
  font-size:.75rem;
}
.page-products .pd-card-mini{
  width:18px;
  height:24px;
  border-radius:3px;
  display:inline-block;
}
.page-products .pd-card-mini--red{
  background:var(--by-red);
  box-shadow:0 0 10px rgba(230,57,70,.55);
}
.page-products .pd-card-mini--yellow{
  background:var(--by-gold);
  box-shadow:0 0 8px rgba(255,215,0,.4);
}
.page-products .pd-phone__footer{
  margin-top:auto;
  font-family:var(--by-font-num);
  font-size:.66rem;
  color:rgba(255,255,255,.45);
  text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:.85rem;
}
.page-products .pd-breadcrumb{
  padding-top:1.5rem;
  padding-bottom:0;
}
.page-products .pd-section{
  padding:4.5rem 0;
  position:relative;
}
.page-products .pd-section:nth-of-type(even){
  background:linear-gradient(180deg,var(--by-bg),rgba(26,31,41,.45),var(--by-bg));
}
.page-products .pd-features .by-section-head{
  margin-bottom:2.5rem;
}
.page-products .pd-features__tabs .by-tablist{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.page-products .by-tab{
  appearance:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.16);
  color:var(--by-gray);
  font-family:var(--by-font-head);
  font-weight:700;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:.6rem 1.1rem;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  cursor:pointer;
  transition:background .3s var(--by-ease),color .3s var(--by-ease),border-color .3s var(--by-ease);
}
.page-products .by-tab:hover{
  border-color:var(--by-red);
  color:var(--by-white);
}
.page-products .by-tab[aria-selected="true"]{
  background:var(--by-red);
  border-color:var(--by-red);
  color:#fff;
}
.page-products .pd-features__panel{
  margin-bottom:1.25rem;
}
.page-products .pd-feature{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  background:linear-gradient(135deg,rgba(26,31,41,.72),rgba(10,15,26,.5));
  border-left:3px solid var(--by-red);
  padding:1.6rem 1.4rem;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:background .4s var(--by-ease);
}
.page-products .pd-feature:hover{
  background:linear-gradient(135deg,rgba(26,31,41,.95),rgba(10,15,26,.7));
}
.page-products .pd-feature__content h3{
  font-family:var(--by-font-head);
  font-weight:900;
  font-size:1.35rem;
  text-transform:uppercase;
  color:var(--by-white);
  margin-bottom:.7rem;
}
.page-products .pd-feature__content p{
  color:var(--by-gray);
  line-height:1.7;
  font-size:.95rem;
  margin-bottom:1rem;
}
.page-products .pd-feature__facts{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.page-products .pd-feature__facts li{
  position:relative;
  padding-left:1.35rem;
  color:var(--by-gray);
  font-size:.9rem;
}
.page-products .pd-feature__facts li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:14px;
  height:2px;
  background:var(--by-red);
  transform:skewX(-30deg);
}
.page-products .pd-feature__visual{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
}
.page-products .pd-feature__visual img{
  max-width:180px;
  height:auto;
  border:1px solid rgba(255,255,255,.14);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.page-products .pd-mini-table{
  width:100%;
  max-width:340px;
  background:rgba(5,11,20,.65);
  border:1px solid rgba(255,255,255,.09);
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.page-products .pd-mini-table__row{
  display:grid;
  grid-template-columns:60px 1fr 60px;
  padding:.65rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.88rem;
  color:var(--by-gray);
}
.page-products .pd-mini-table__row:last-child{
  border-bottom:none;
}
.page-products .pd-mini-table__row--head{
  background:rgba(230,57,70,.16);
  color:var(--by-white);
  font-family:var(--by-font-head);
  font-weight:700;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.08em;
}
.page-products .pd-mini-table__row .num{
  font-family:var(--by-font-num);
  color:var(--by-white);
}
.page-products .pd-lineup{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:1rem;
  width:100%;
  max-width:380px;
}
.page-products .pd-lineup__divider{
  background:linear-gradient(180deg,transparent,var(--by-red),transparent);
  width:1px;
}
.page-products .pd-lineup__side{
  padding:.4rem;
}
.page-products .pd-lineup__side ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.page-products .pd-lineup__side li{
  font-size:.8rem;
  color:var(--by-gray);
  display:flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,255,255,.04);
  padding:.3rem .5rem;
}
.page-products .pd-lineup__side li .num{
  font-family:var(--by-font-num);
  color:var(--by-white);
}
.page-products .pd-lineup__tag{
  display:inline-block;
  font-family:var(--by-font-head);
  font-weight:900;
  font-size:.7rem;
  text-transform:uppercase;
  padding:.18rem .6rem;
  margin-bottom:.5rem;
}
.page-products .pd-lineup__tag--red{
  background:var(--by-red);
  color:#fff;
}
.page-products .pd-lineup__tag--blue{
  background:var(--by-blue);
  color:#fff;
}
.page-products .pd-index-mini{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  width:100%;
  max-width:360px;
}
.page-products .pd-index-mini__item{
  display:flex;
  align-items:center;
  gap:.75rem;
  background:rgba(5,11,20,.6);
  border:1px solid rgba(255,255,255,.08);
  padding:.6rem .9rem;
  font-size:.88rem;
  color:var(--by-gray);
}
.page-products .pd-index-mini__item .by-tag{
  font-size:.7rem;
}
.page-products .pd-tablet{
  background:
    radial-gradient(ellipse at 15% 50%,rgba(29,53,87,.4),transparent 55%),
    var(--by-bg);
}
.page-products .pd-tablet__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
.page-products .pd-tablet__media{
  position:relative;
}
.page-products .pd-tablet__media::before{
  content:"";
  position:absolute;
  inset:auto -1.5rem -1.5rem auto;
  width:70%;
  height:70%;
  background:linear-gradient(135deg,transparent 45%,rgba(230,57,70,.22) 45%,rgba(230,57,70,.22) 47%,transparent 47%);
  pointer-events:none;
}
.page-products .pd-tablet__media img{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
}
.page-products .pd-tablet__content .by-lead{
  color:var(--by-gray);
  margin-bottom:1.75rem;
}
.page-products .pd-compare{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:2rem;
}
.page-products .pd-compare__item{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.page-products .pd-compare__label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--by-font-head);
  font-weight:700;
  font-size:.85rem;
  color:var(--by-white);
  text-transform:uppercase;
}
.page-products .pd-compare__mode{
  font-family:var(--by-font-num);
  font-size:.72rem;
  color:var(--by-red);
  border:1px solid rgba(230,57,70,.4);
  padding:.1rem .5rem;
}
.page-products .pd-compare__bar{
  height:10px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.page-products .pd-compare__bar span{
  display:block;
  height:100%;
  white-space:nowrap;
  font-size:0;
}
.page-products .pd-compare__bar--phone{
  width:62%;
  background:linear-gradient(90deg,var(--by-blue),rgba(29,53,87,.4));
}
.page-products .pd-compare__bar--tablet{
  width:100%;
  background:linear-gradient(90deg,var(--by-red),rgba(230,57,70,.55));
}
.page-products .pd-download__head{
  text-align:center;
  margin-bottom:2.5rem;
}
.page-products .pd-download__steps{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  max-width:860px;
  margin:0 auto;
}
.page-products .pd-step{
  position:relative;
  background:linear-gradient(160deg,rgba(26,31,41,.8),rgba(5,11,20,.6));
  border:1px solid rgba(255,255,255,.09);
  padding:1.6rem 1.4rem 1.4rem;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  transition:border-color .3s ease;
}
.page-products .pd-step:hover{
  border-color:rgba(230,57,70,.6);
}
.page-products .pd-step__num{
  font-family:var(--by-font-num);
  font-size:2rem;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px var(--by-red);
  display:block;
  margin-bottom:.5rem;
  line-height:1;
}
.page-products .pd-step h3{
  font-family:var(--by-font-head);
  font-weight:800;
  text-transform:uppercase;
  font-size:1.05rem;
  color:var(--by-white);
  margin-bottom:.5rem;
}
.page-products .pd-step p{
  color:var(--by-gray);
  font-size:.9rem;
}
.page-products .pd-download__note{
  max-width:760px;
  margin:2rem auto 0;
}
.page-products .pd-download__note a{
  color:var(--by-gold);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-products .pd-history__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
.page-products .pd-timeline{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
}
.page-products .pd-timeline::before{
  content:"";
  position:absolute;
  left:15px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--by-red),rgba(230,57,70,.2),var(--by-gold));
}
.page-products .pd-timeline__item{
  position:relative;
  padding-left:52px;
  padding-bottom:2rem;
}
.page-products .pd-timeline__item:last-child{
  padding-bottom:0;
}
.page-products .pd-timeline__item::before{
  content:"";
  position:absolute;
  left:8px;
  top:4px;
  width:16px;
  height:16px;
  background:var(--by-bg);
  border:3px solid var(--by-red);
  transform:rotate(45deg);
  z-index:1;
}
.page-products .pd-timeline__item--last::before{
  border-color:var(--by-gold);
}
.page-products .pd-timeline__year{
  font-family:var(--by-font-num);
  font-weight:700;
  font-size:1.15rem;
  color:var(--by-red);
  display:block;
  margin-bottom:.3rem;
}
.page-products .pd-timeline__item--last .pd-timeline__year{
  color:var(--by-gold);
}
.page-products .pd-timeline__body h3{
  font-family:var(--by-font-head);
  font-weight:800;
  font-size:1.05rem;
  text-transform:uppercase;
  color:var(--by-white);
  margin-bottom:.35rem;
}
.page-products .pd-timeline__body p{
  color:var(--by-gray);
  font-size:.9rem;
  margin:0;
}
.page-products .pd-history__media img{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  clip-path:polygon(0 14px,14px 0,100% 0,calc(100% - 14px) 100%,100% calc(100% - 14px),0 100%);
}
.page-products .pd-migration{
  background:
    linear-gradient(108deg,transparent 28%,rgba(29,53,87,.32) 28.5%,transparent 29%),
    var(--by-bg);
}
.page-products .pd-migration__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
.page-products .pd-migration__media img{
  display:block;
  width:100%;
  max-width:580px;
  height:auto;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 55px rgba(0,0,0,.5);
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
}
.page-products .pd-migration__content .by-lead,
.page-products .pd-migration__content p{
  color:var(--by-gray);
  margin-bottom:1rem;
}
.page-products .pd-steps{
  list-style:none;
  counter-reset:step;
  padding:0;
  margin:1.5rem 0 2rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.page-products .pd-steps li{
  counter-increment:step;
  position:relative;
  padding-left:2.6rem;
  color:var(--by-gray);
  font-size:.95rem;
  line-height:1.5;
}
.page-products .pd-steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  font-family:var(--by-font-num);
  font-weight:700;
  font-size:.9rem;
  color:var(--by-red);
  background:rgba(230,57,70,.12);
  border:1px solid rgba(230,57,70,.35);
  width:1.9rem;
  height:1.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.page-products .pd-steps a{
  color:var(--by-white);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--by-red);
}
.page-products .pd-tech__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.page-products .pd-tech__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.page-products .pd-stat-item{
  position:relative;
  background:linear-gradient(145deg,rgba(26,31,41,.85),rgba(5,11,20,.7));
  border:1px solid rgba(255,255,255,.08);
  padding:1.4rem 1rem 1.2rem;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
}
.page-products .pd-stat-item::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:34px;
  height:3px;
  background:var(--by-red);
  transform:skewX(-40deg);
}
.page-products .pd-stat-item .by-stat__value{
  font-family:var(--by-font-num);
  font-weight:700;
  font-size:1.8rem;
  color:var(--by-white);
  line-height:1.1;
  display:block;
}
.page-products .pd-stat-item .by-stat__label{
  display:block;
  color:var(--by-gray);
  font-size:.78rem;
  margin-top:.45rem;
  line-height:1.4;
}
.page-products .pd-tech__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:900px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 45px rgba(0,0,0,.4);
}
@media (min-width:640px){
  .page-products .pd-download__steps{
    grid-template-columns:repeat(3,1fr);
  }
  .page-products .pd-tech__stats{
    grid-template-columns:repeat(4,1fr);
  }
}
@media (min-width:768px){
  .page-products .pd-hero__inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:3rem;
  }
  .page-products .pd-hero__content{
    flex:1.1;
  }
  .page-products .pd-hero__device{
    flex:.9;
  }
  .page-products .pd-feature{
    grid-template-columns:1.2fr .8fr;
    align-items:center;
  }
  .page-products .pd-feature__visual{
    min-height:220px;
  }
  .page-products .pd-feature__visual img{
    max-width:220px;
  }
  .page-products .pd-tablet__grid{
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
  }
  .page-products .pd-history__grid,
  .page-products .pd-migration__grid{
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
  }
  .page-products .pd-tech__grid{
    grid-template-columns:1fr 1.1fr;
    align-items:center;
  }
}
@media (min-width:1024px){
  .page-products .pd-hero{
    padding-top:calc(var(--by-header-h) + 72px);
  }
  .page-products .pd-hero__content .by-title--display{
    font-size:5.2rem;
  }
  .page-products .pd-section{
    padding:5.5rem 0;
  }
  .page-products .pd-features__tabs .by-tablist{
    gap:1rem;
  }
  .page-products .pd-tablet__media img{
    max-width:640px;
  }
  .page-products .pd-phone{
    width:270px;
    min-height:560px;
  }
}
@media (prefers-reduced-motion:reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .page-products .pd-phone:hover{
    transform:none;
  }
}
