.page-products{
  --tilt-card:-1.2deg;
  --tilt-card-alt:1deg;
  --qr-size:132px;
  --section-gap:clamp(3rem,6vw,5rem);
}
.page-products .page-head{
  padding-block:2rem 1.25rem;
  border-bottom:1px solid var(--line-light);
  position:relative;
}
.page-products .page-head::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  background:var(--fluorescent-green);
  margin-top:1.25rem;
}
.page-products .page-kicker{
  font-family:var(--font-mono);
  font-size:0.8125rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fluorescent-green);
  margin:0 0 0.5rem;
}
.page-products .page-title{
  font-family:var(--font-heading);
  font-size:clamp(1.75rem,2.6vw,2.6rem);
  line-height:1.15;
  color:var(--text-white);
  letter-spacing:0.01em;
  margin:0 0 0.875rem;
  text-transform:uppercase;
}
.page-products .page-lead{
  color:var(--text-dim);
  font-size:1rem;
  line-height:1.85;
  max-width:62ch;
  margin:0;
}
.page-products .quick-index{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem;
  border:1px solid var(--line-light);
  border-top:0;
  background:linear-gradient(180deg,rgba(17,23,48,0.6),rgba(10,14,39,0.9));
  padding:0.875rem 1rem;
  margin-block:0 2.5rem;
}
.page-products .quick-index-title{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--alert-orange);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-right:0.375rem;
}
.page-products .quick-index a{
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:var(--fluorescent-green);
  text-decoration:none;
  padding:0.3rem 0.625rem;
  border:1px solid transparent;
  transition:border-color 160ms ease,background-color 160ms ease,color 160ms ease;
}
.page-products .quick-index a:hover,
.page-products .quick-index a:focus-visible{
  border-color:var(--fluorescent-green);
  background:rgba(0,255,136,0.08);
  color:var(--text-white);
}
.page-products .section-index{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--font-mono);
  font-size:0.8125rem;
  letter-spacing:0.14em;
  color:var(--alert-orange);
  text-transform:uppercase;
  margin-bottom:0.625rem;
}
.page-products .section-index::before{
  content:"";
  width:22px;
  height:2px;
  background:currentColor;
  display:inline-block;
}
.page-products .section-title-lg{
  font-family:var(--font-heading);
  font-size:clamp(1.375rem,2vw,1.9rem);
  line-height:1.25;
  color:var(--text-white);
  margin:0 0 0.75rem;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.page-products .section-desc{
  color:var(--text-dim);
  font-size:0.9375rem;
  line-height:1.8;
  max-width:64ch;
  margin:0;
}
.page-products .section-head{
  margin-bottom:1.75rem;
}
.page-products .inline-tip{
  display:flex;
  align-items:flex-start;
  gap:0.625rem;
  border-left:3px solid var(--data-yellow);
  background:rgba(255,198,0,0.06);
  padding:0.75rem 0.875rem;
  color:var(--text-dim);
  font-size:0.875rem;
  line-height:1.7;
  margin:1.5rem 0 0;
}
.page-products .tip-mark{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--data-yellow);
  letter-spacing:0.1em;
  text-transform:uppercase;
  white-space:nowrap;
  flex:none;
  padding-top:0.125rem;
}
.page-products a{
  color:var(--fluorescent-green);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color 160ms ease;
}
.page-products a:hover,
.page-products a:focus-visible{
  color:var(--text-white);
}
.page-products .login-section{
  background:
    radial-gradient(circle at 8% 18%,rgba(0,255,136,0.05),transparent 26%),
    linear-gradient(180deg,rgba(10,14,39,0.4),rgba(7,10,26,0.6));
  padding-block:var(--section-gap);
  border-block:1px solid var(--line-light);
}
.page-products .login-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.page-products .login-copy{
  order:2;
}
.page-products .phone-frame{
  order:1;
  max-width:320px;
  margin-inline:auto;
  width:100%;
}
.page-products .image-frame img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .step-list{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:0.75rem;
}
.page-products .step-item{
  display:flex;
  gap:0.75rem;
  align-items:flex-start;
}
.page-products .step-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:0.875rem;
  color:var(--deep-night);
  background:var(--fluorescent-green);
  min-width:1.625rem;
  height:1.625rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.page-products .step-text{
  color:var(--text-white);
  font-size:0.9375rem;
  line-height:1.7;
}
.page-products .features-section{
  padding-block:var(--section-gap);
}
.page-products .feature-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.125rem;
  margin-bottom:2rem;
}
.page-products .feature-card{
  background:var(--night-blue);
  border:1px solid var(--line-light);
  border-top:2px solid var(--fluorescent-green);
  padding:1.25rem;
  position:relative;
  transition:transform 180ms ease,border-color 180ms ease,background-color 180ms ease;
}
.page-products .feature-card:hover{
  border-color:var(--fluorescent-green);
  background:linear-gradient(180deg,rgba(17,23,48,0.8),rgba(7,10,26,0.9));
}
.page-products .feature-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:28px;
  height:28px;
  border-top:1px solid var(--alert-orange);
  border-right:1px solid var(--alert-orange);
  opacity:0.7;
}
.page-products .feature-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border:1px solid var(--line-light);
  color:var(--fluorescent-green);
  background:rgba(0,255,136,0.05);
  margin-bottom:1rem;
}
.page-products .feature-card h3{
  font-family:var(--font-heading);
  font-size:1.125rem;
  color:var(--text-white);
  margin:0 0 0.625rem;
  text-transform:uppercase;
  letter-spacing:0.02em;
}
.page-products .feature-card p{
  font-size:0.875rem;
  line-height:1.75;
  color:var(--text-dim);
  margin:0 0 1rem;
}
.page-products .feature-stat{
  display:flex;
  align-items:baseline;
  gap:0.5rem;
  margin:0 0 0.75rem;
}
.page-products .tick{
  font-family:var(--font-mono);
  font-size:1.375rem;
  font-weight:700;
  color:var(--fluorescent-green);
}
.page-products .tick-label{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--text-dim);
  text-transform:uppercase;
}
.page-products .feature-visuals{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
.page-products .filter-flow{
  max-width:620px;
  width:100%;
}
.page-products .stats-chart{
  max-width:820px;
  width:100%;
}
.page-products .compare-section{
  background:linear-gradient(180deg,var(--abyss),rgba(10,14,39,0.3));
  padding-block:var(--section-gap);
  border-block:1px solid var(--line-light);
}
.page-products .compare-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.625rem;
  margin-bottom:1.25rem;
}
.page-products .compare-row{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "feature"
    "match"
    "tv";
  gap:0.25rem 0.75rem;
  background:var(--night-blue);
  border:1px solid var(--line-light);
  padding:0.875rem 1rem;
}
.page-products .compare-header{
  display:none;
}
.page-products .compare-feature{
  grid-area:feature;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:0.875rem;
  color:var(--fluorescent-green);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.page-products .compare-match{
  grid-area:match;
  color:var(--text-white);
  font-size:0.8125rem;
  line-height:1.65;
  position:relative;
  padding-left:0.75rem;
}
.page-products .compare-match::before{
  content:"M";
  position:absolute;
  left:0;
  top:0.125rem;
  font-family:var(--font-mono);
  font-size:0.625rem;
  color:var(--fluorescent-green);
}
.page-products .compare-tv{
  grid-area:tv;
  color:var(--text-dim);
  font-size:0.8125rem;
  line-height:1.65;
  position:relative;
  padding-left:0.75rem;
}
.page-products .compare-tv::before{
  content:"TV";
  position:absolute;
  left:0;
  top:0.125rem;
  font-family:var(--font-mono);
  font-size:0.625rem;
  color:var(--alert-orange);
}
.page-products .compare-frame{
  max-width:720px;
  width:100%;
  margin-block:0 1rem;
}
.page-products .table-note{
  color:var(--text-dim);
  font-size:0.8125rem;
  line-height:1.7;
  max-width:70ch;
}
.page-products .download-section{
  padding-block:var(--section-gap);
}
.page-products .download-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:center;
}
.page-products .download-copy h3{
  font-family:var(--font-heading);
  font-size:1.25rem;
  color:var(--text-white);
  margin:0 0 1rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.page-products .download-note{
  margin:1.25rem 0 0;
  font-size:0.875rem;
  color:var(--text-dim);
  line-height:1.7;
  border-left:3px solid var(--alert-orange);
  padding-left:0.75rem;
}
.page-products .qr-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.875rem;
  padding:1.5rem;
  border:1px solid var(--line-light);
  background:var(--night-blue);
}
.page-products .qr-code{
  width:var(--qr-size);
  height:var(--qr-size);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,1fr);
  gap:3px;
  padding:12px;
  background:var(--text-white);
  box-shadow:0 0 0 4px rgba(0,255,136,0.15);
}
.page-products .qr-cell{
  background:var(--deep-night);
}
.page-products .qr-cell:nth-child(even){
  background:var(--text-white);
}
.page-products .qr-cell:nth-child(5n+1){
  background:var(--fluorescent-green);
}
.page-products .qr-cell:nth-child(3n+7){
  background:var(--alert-orange);
}
.page-products .qr-caption{
  color:var(--text-dim);
  font-size:0.75rem;
  letter-spacing:0.08em;
  margin:0;
}
.page-products .scenes-section{
  padding-block:var(--section-gap);
  border-top:1px solid var(--line-light);
  background:
    radial-gradient(circle at 85% 8%,rgba(255,106,0,0.05),transparent 22%),
    linear-gradient(180deg,rgba(10,14,39,0.5),rgba(7,10,26,0.7));
}
.page-products .scene-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-bottom:1.75rem;
}
.page-products .scene-card{
  background:var(--night-blue);
  border:1px solid var(--line-light);
  padding:1.25rem;
  position:relative;
  transition:transform 180ms ease,border-color 180ms ease;
}
.page-products .scene-card:hover{
  border-color:var(--alert-orange);
  transform:translateY(-2px);
}
.page-products .scene-num{
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:var(--alert-orange);
  letter-spacing:0.12em;
}
.page-products .scene-card h3{
  font-family:var(--font-heading);
  font-size:1.0625rem;
  color:var(--text-white);
  margin:0.5rem 0 0.625rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.page-products .scene-card p{
  font-size:0.875rem;
  line-height:1.75;
  color:var(--text-dim);
  margin:0;
}
.page-products .desktop-frame{
  max-width:1120px;
  width:100%;
  margin:0 0 1rem;
}
.page-products .desktop-caption{
  color:var(--text-dim);
  font-size:0.875rem;
  line-height:1.75;
  max-width:78ch;
  border-left:3px solid var(--fluorescent-green);
  padding-left:0.875rem;
  margin:0 0 1.5rem;
}
.page-products .scene-footer-link{
  color:var(--text-dim);
  font-size:0.875rem;
  line-height:1.7;
  margin:0;
}
@media (min-width:768px){
  .page-products .content-shell{
    padding-inline:1.75rem;
  }
  .page-products .login-grid{
    grid-template-columns:1.35fr 0.72fr;
    gap:2.5rem 3rem;
    align-items:center;
  }
  .page-products .login-copy{
    order:1;
  }
  .page-products .phone-frame{
    order:2;
    max-width:280px;
  }
  .page-products .feature-grid{
    grid-template-columns:1fr 1fr;
    gap:1.25rem;
  }
  .page-products .feature-visuals{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .page-products .feature-filter{
    transform:rotate(var(--tilt-card-alt));
  }
  .page-products .feature-stats{
    transform:rotate(var(--tilt-card));
  }
  .page-products .compare-row{
    grid-template-columns:1fr 1fr 1.2fr;
    grid-template-areas:"feature match tv";
    align-items:center;
    gap:0.75rem;
  }
  .page-products .compare-header{
    display:grid;
    border:1px solid var(--line-light);
    background:transparent;
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:0.75rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .page-products .compare-header span:first-child{
    color:var(--text-white);
  }
  .page-products .download-grid{
    grid-template-columns:1.4fr 0.75fr;
    gap:2.5rem;
  }
  .page-products .scene-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.125rem;
  }
  .page-products .scene-card:nth-child(2){
    transform:rotate(1deg);
  }
  .page-products .scene-card:nth-child(3){
    transform:rotate(-1deg);
  }
  .page-products .qr-block{
    order:2;
  }
  .page-products .download-copy{
    order:1;
  }
}
@media (min-width:1024px){
  .page-products .feature-grid{
    grid-template-columns:repeat(4,1fr);
  }
  .page-products .feature-visuals{
    grid-template-columns:1fr 1.25fr;
    align-items:center;
  }
  .page-products .compare-grid{
    grid-template-columns:1fr;
  }
  .page-products .compare-row{
    padding-block:1rem;
  }
  .page-products .page-hero{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .page-products .quick-index{
    justify-content:flex-start;
  }
  .page-products .desktop-caption{
    font-size:0.9375rem;
  }
}