.page-products{
  --products-console-bg:#081426;
  --products-console-line:rgba(0,230,138,.18);
  --products-console-grid:rgba(0,230,138,.05);
  background:var(--color-bg);
  padding-bottom:3rem;
}

.page-products .breadcrumbs{
  max-width:var(--container);
  margin:0 auto;
  padding:1rem var(--gutter) 0;
}

.page-products .console-hero{
  background-color:var(--products-console-bg);
  background-image:
    linear-gradient(var(--products-console-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--products-console-grid) 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--color-on-deep);
  margin:1rem var(--gutter) 0;
  padding:clamp(2rem,6vw,4rem) clamp(1.25rem,4vw,3rem) clamp(2.5rem,5vw,3.75rem);
  position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%);
}

.page-products .console-eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--color-acid);
  text-transform:uppercase;
  margin:0 0 .75rem;
}

.page-products .console-hero h1{
  font-family:var(--font-head);
  font-size:clamp(2.25rem,6vw,4rem);
  line-height:1.05;
  color:var(--color-on-deep);
  margin:0 0 .75rem;
}

.page-products .console-lead{
  max-width:56ch;
  font-size:1rem;
  line-height:1.8;
  color:rgba(245,241,232,.85);
  margin:0 0 1.5rem;
}

.page-products .console-command{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:rgba(0,0,0,.3);
  border:1px solid var(--products-console-line);
  font-family:var(--font-mono);
  font-size:.875rem;
  color:var(--color-acid);
  padding:.75rem 1rem;
  border-radius:2px;
  margin-bottom:2rem;
  max-width:100%;
  overflow-x:auto;
}

.page-products .cmd-prompt{
  color:var(--color-orange);
  font-weight:700;
  flex-shrink:0;
}

.page-products .cmd-text{
  white-space:nowrap;
}

.page-products .cmd-cursor{
  width:8px;
  height:1.1em;
  background:var(--color-acid);
  animation:products-blink 1s steps(2) infinite;
  flex-shrink:0;
}

@keyframes products-blink{
  50%{opacity:0;}
}

.page-products .console-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:rgba(245,241,232,.12);
  border:1px solid rgba(245,241,232,.12);
  margin-bottom:1.75rem;
}

.page-products .stat-block{
  background:rgba(8,20,38,.88);
  padding:1rem 1.25rem;
}

.page-products .stat-block .stat-num{
  display:block;
  font-family:var(--font-mono);
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:700;
  color:var(--color-acid);
  line-height:1.2;
}

.page-products .stat-block dt,
.page-products .stat-block dd{
  margin:0;
}

.page-products .stat-block dd{
  font-size:.8125rem;
  color:rgba(245,241,232,.7);
  letter-spacing:.04em;
}

.page-products .category-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}

.page-products .category-strip li{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-on-deep);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  padding:.35rem .75rem;
  letter-spacing:.04em;
}

.page-products .platform-section{
  padding:0 var(--gutter);
  max-width:var(--container);
  margin:3.5rem auto 0;
}

.page-products .section-head{
  margin-bottom:1.75rem;
}

.page-products .section-kicker{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--color-orange);
  text-transform:uppercase;
  margin:0 0 .35rem;
}

.page-products .section-head h2{
  font-family:var(--font-head);
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  line-height:1.15;
  color:var(--color-ink);
  margin:0;
}

.page-products .section-note{
  font-size:.875rem;
  color:var(--color-dim);
  margin:.6rem 0 0;
  max-width:62ch;
  line-height:1.6;
}

.page-products .features-layout{
  display:grid;
  gap:2rem;
  align-items:center;
}

.page-products .feature-list{
  display:grid;
  gap:1rem;
}

.page-products .feature-card{
  background:var(--color-panel);
  border:1px solid var(--color-line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  padding:1.5rem 1.25rem;
  transition:transform .18s ease, box-shadow .18s ease;
}

.page-products .feature-card:nth-child(even){
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
}

.page-products .feature-card:hover{
  transform:translateY(-4px);
}

.page-products .feature-index{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-dim);
  display:block;
  margin-bottom:.35rem;
  letter-spacing:.08em;
}

.page-products .feature-card h3{
  font-family:var(--font-head);
  font-size:1.125rem;
  letter-spacing:.02em;
  color:var(--color-ink);
  margin:0 0 .5rem;
}

.page-products .feature-card p{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--color-ink);
  opacity:.85;
  margin:0;
}

.page-products .screenshot-wrap{
  margin:0;
  background:var(--color-bg-deep);
  border:1px solid var(--color-line);
  padding:.75rem;
}

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

.page-products .screenshot-wrap figcaption{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:rgba(245,241,232,.7);
  padding-top:.6rem;
  letter-spacing:.03em;
}

.page-products .dimensions-layout{
  display:grid;
  gap:2rem;
  align-items:center;
}

.page-products .field-table-wrap{
  overflow-x:auto;
  background:var(--color-panel);
  border:1px solid var(--color-line);
}

.page-products .field-table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-size:.9375rem;
}

.page-products .field-table caption{
  background:var(--color-bg-deep);
  color:var(--color-on-deep);
  text-align:left;
  font-family:var(--font-head);
  font-size:1rem;
  letter-spacing:.02em;
  padding:.85rem 1.25rem;
  border-bottom:1px solid var(--color-line);
}

.page-products .field-table th{
  font-family:var(--font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:left;
  background:rgba(245,241,232,.8);
  padding:.75rem 1.25rem;
  border-bottom:1px solid var(--color-line);
  color:var(--color-dim);
  white-space:nowrap;
}

.page-products .field-table td{
  padding:.75rem 1.25rem;
  border-bottom:1px solid rgba(200,192,184,.6);
  color:var(--color-ink);
}

.page-products .field-table tbody tr:last-child td{
  border-bottom:none;
}

.page-products .mono-cell{
  font-family:var(--font-mono);
}

.page-products .heatmap-wrap{
  margin:0;
}

.page-products .heatmap-wrap img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--color-line);
}

.page-products .heatmap-wrap figcaption,
.page-products .version-visual figcaption{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-dim);
  margin-top:.5rem;
  letter-spacing:.03em;
}

.page-products .query-console{
  background-color:var(--products-console-bg);
  background-image:
    linear-gradient(var(--products-console-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--products-console-grid) 1px,transparent 1px);
  background-size:24px 24px;
  border:1px solid rgba(0,230,138,.25);
  padding:1.5rem clamp(1rem,3vw,2rem);
}

.page-products .query-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.25rem;
}

.page-products .toolbar-label{
  font-family:var(--font-mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--color-orange);
}

.page-products .filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.page-products .tag{
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:rgba(245,241,232,.8);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  padding:.35rem .8rem;
  letter-spacing:.03em;
  transition:background .15s ease, color .15s ease;
}

.page-products .tag.is-active{
  color:#0B1D3A;
  background:var(--color-acid);
  border-color:var(--color-acid);
  font-weight:700;
}

.page-products .toolbar-count{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:rgba(245,241,232,.6);
  margin-left:auto;
}

.page-products .match-table-wrap{
  overflow-x:auto;
}

.page-products .match-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.875rem;
}

.page-products .match-table th{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(245,241,232,.6);
  text-align:left;
  padding:.7rem .9rem;
  border-bottom:1px solid rgba(245,241,232,.2);
  white-space:nowrap;
}

.page-products .sort-mark{
  color:var(--color-acid);
  margin-left:.2rem;
}

.page-products .match-table td{
  color:rgba(245,241,232,.9);
  padding:.75rem .9rem;
  border-bottom:1px solid rgba(245,241,232,.08);
  white-space:nowrap;
}

.page-products .match-table tbody tr{
  transition:background .15s ease;
}

.page-products .match-table tbody tr:hover{
  background:rgba(0,230,138,.08);
}

.page-products .score-highlight{
  font-family:var(--font-mono);
  color:var(--color-acid);
  font-weight:700;
}

.page-products .scenario-grid{
  display:grid;
  gap:1.25rem;
}

.page-products .scenario-card{
  background:var(--color-panel);
  border:1px solid var(--color-line);
  padding:1.5rem;
  transition:transform .18s ease;
}

.page-products .scenario-card:hover{
  transform:translateY(-3px);
}

.page-products .scenario-card-wide{
  display:grid;
  gap:1rem;
}

.page-products .scenario-copy{
  min-width:0;
}

.page-products .scenario-code{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-acid);
  background:rgba(0,230,138,.1);
  border:1px solid rgba(0,230,138,.2);
  padding:.2rem .5rem;
  display:inline-block;
  margin-bottom:.6rem;
  letter-spacing:.04em;
}

.page-products .scenario-card h3{
  font-family:var(--font-head);
  font-size:1.25rem;
  color:var(--color-ink);
  margin:0 0 .5rem;
}

.page-products .scenario-card p{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--color-ink);
  opacity:.85;
  margin:0;
}

.page-products .scenario-card img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--color-line);
}

.page-products .scenario-card-wide img{
  max-width:260px;
  margin:0 auto;
  border:6px solid var(--color-bg-deep);
  border-radius:12px;
}

.page-products .versions-layout{
  display:grid;
  gap:2rem;
  align-items:center;
}

.page-products .version-timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 1.75rem;
  position:relative;
}

.page-products .version-timeline::before{
  content:"";
  position:absolute;
  left:8px;
  top:.25rem;
  bottom:.25rem;
  width:2px;
  background:var(--color-line);
}

.page-products .version-item{
  position:relative;
  padding:0 0 1.75rem;
}

.page-products .version-item::before{
  content:"";
  position:absolute;
  left:calc(-1.75rem + 2px);
  top:.35rem;
  width:12px;
  height:12px;
  background:var(--color-bg);
  border:2px solid var(--color-orange);
  transform:rotate(45deg);
}

.page-products .version-marker{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-orange);
  display:inline-block;
  margin-bottom:.3rem;
  font-weight:700;
  letter-spacing:.05em;
}

.page-products .version-content h3{
  font-family:var(--font-head);
  font-size:1.125rem;
  color:var(--color-ink);
  margin:0 0 .4rem;
}

.page-products .version-content p{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--color-ink);
  opacity:.85;
  margin:0;
}

.page-products .version-visual{
  margin:0;
}

.page-products .version-visual img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--color-line);
}

.page-products .platform-cta{
  max-width:var(--container);
  margin:3.5rem auto 0;
  padding:1.75rem var(--gutter);
  background:var(--color-bg-deep);
}

.page-products .cta-inner p{
  margin:.35rem 0;
  font-size:.9375rem;
  line-height:1.7;
  color:rgba(245,241,232,.85);
}

.page-products .cta-inner a{
  color:var(--color-acid);
  text-decoration:none;
  border-bottom:1px solid rgba(0,230,138,.4);
}

.page-products .cta-inner a:hover{
  color:var(--color-orange);
  border-bottom-color:var(--color-orange);
}

@media (min-width:900px){
  .page-products .console-stats{
    grid-template-columns:repeat(4,1fr);
  }

  .page-products .features-layout{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }

  .page-products .feature-list{
    grid-template-columns:repeat(2,1fr);
  }

  .page-products .dimensions-layout{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }

  .page-products .scenario-grid{
    grid-template-columns:repeat(2,1fr);
    align-items:start;
  }

  .page-products .scenario-card-wide{
    grid-column:1 / -1;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
  }

  .page-products .versions-layout{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .feature-card,
  .page-products .scenario-card,
  .page-products .match-table tbody tr,
  .page-products .cmd-cursor{
    transition:none;
    animation:none;
  }

  .page-products .feature-card:hover,
  .page-products .scenario-card:hover{
    transform:none;
  }
}