.page-products{
  --prod-accent-soft:rgba(57,255,20,.12);
  --prod-silver-glow:rgba(192,192,192,.10);
  --prod-card-pad:1.5rem;
  --prod-gap:2.5rem;
  color:var(--color-text);
}
.page-products .prod-hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem 2.5rem;
  padding-block:3.5rem 4.5rem;
  overflow:hidden;
}
.page-products .prod-hero::after{
  content:"";
  position:absolute;
  right:-14%;
  bottom:-24%;
  width:52%;
  height:84%;
  background:
    linear-gradient(148deg,transparent 42%,var(--prod-accent-soft) 42% 50%,transparent 50%),
    repeating-linear-gradient(-45deg,rgba(57,255,20,.05) 0 2px,transparent 2px 18px);
  clip-path:polygon(22% 0,100% 0,84% 100%,0 100%);
  pointer-events:none;
  z-index:0;
}
.page-products .prod-hero>*{
  position:relative;
  z-index:1;
}
.page-products .prod-hero__chapter{
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.page-products .prod-hero__chapter-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(6rem,14vw,11rem);
  line-height:.82;
  letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:2px var(--color-accent);
}
.page-products .prod-hero__chapter-meta{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding-top:1.2rem;
}
.page-products .prod-hero__chapter-line{
  width:44px;
  height:2px;
  background:var(--color-accent);
}
.page-products .prod-hero__chapter-caption{
  font-size:.875rem;
  letter-spacing:.14em;
  color:var(--color-text-dim);
  text-transform:uppercase;
}
.page-products .prod-hero__content{
  max-width:780px;
}
.page-products .prod-hero__title{
  display:block;
  margin-top:1rem;
  line-height:1.02;
}
.page-products .prod-hero__title-main{
  display:block;
  font-size:.58em;
  color:var(--color-silver);
  letter-spacing:.04em;
  margin-bottom:.1rem;
}
.page-products .prod-hero__title-accent{
  display:block;
  background:linear-gradient(120deg,var(--color-text) 20%,#9FE89A 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.page-products .prod-hero__lede{
  margin-top:1.5rem;
  font-family:var(--font-editorial);
  font-size:1.1rem;
  line-height:1.85;
  color:var(--color-text);
  max-width:34em;
}
.page-products .prod-hero__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
  margin-top:2rem;
  max-width:520px;
}
.page-products .stat-pill{
  border:1px solid var(--color-border);
  border-radius:var(--radius-pill);
  background:rgba(14,31,63,.7);
  padding:.9rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.page-products .stat-pill:hover{
  border-color:var(--color-accent);
  transform:translateY(-2px);
}
.page-products .stat-pill strong{
  font-family:var(--font-display);
  font-size:1.8rem;
  line-height:1;
  color:var(--color-accent);
}
.page-products .stat-pill span{
  font-size:.8125rem;
  color:var(--color-text-dim);
}
.page-products .prod-hero__tags{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.5rem;
}
.page-products .hero-index{
  border-left:1px solid var(--color-border);
  padding-left:1.25rem;
  align-self:end;
}
.page-products .hero-index__list{
  list-style:none;
  margin-top:.75rem;
  display:grid;
  gap:.5rem;
}
.page-products .hero-index__item a{
  color:var(--color-text-dim);
  font-size:.9375rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:color .2s var(--ease);
}
.page-products .hero-index__item a:hover{
  color:var(--color-accent);
}
.page-products .matrix-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:2.75rem;
}
.page-products .matrix-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(140deg,var(--color-bg-card),rgba(7,17,38,.9));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--prod-card-pad);
  overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.page-products .matrix-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--color-accent);
  opacity:.9;
  clip-path:polygon(0 0,100% 0,55% 100%,0 100%);
}
.page-products .matrix-card--shoot::before{
  background:var(--color-silver);
}
.page-products .matrix-card--goal::before{
  background:linear-gradient(180deg,var(--color-accent),var(--color-warn));
}
.page-products .matrix-card--ios::before{
  background:var(--color-silver);
  opacity:.55;
}
.page-products .matrix-card:hover{
  transform:translateY(-4px);
  border-color:rgba(57,255,20,.55);
  box-shadow:0 18px 42px rgba(2,10,30,.45);
}
.page-products .matrix-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.page-products .matrix-card__index{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--color-text-dim);
  line-height:1;
}
.page-products .matrix-card__title{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--color-text);
  margin-bottom:.6rem;
}
.page-products .matrix-card__desc{
  font-size:.9375rem;
  line-height:1.7;
  color:var(--color-text-dim);
  margin-bottom:1rem;
}
.page-products .matrix-card__spec{
  display:grid;
  gap:.45rem;
  margin:0 0 1.25rem;
  padding-top:.9rem;
  border-top:1px dashed var(--color-border);
}
.page-products .matrix-card__spec div{
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  font-size:.8125rem;
}
.page-products .matrix-card__spec dt{
  color:var(--color-text-dim);
}
.page-products .matrix-card__spec dd{
  color:var(--color-text);
  text-align:right;
  font-weight:600;
}
.page-products .matrix-card__link{
  margin-top:auto;
  align-self:flex-start;
}
.page-products .matrix-figure{
  margin-top:2rem;
}
.page-products .image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-products figcaption{
  margin-top:.65rem;
  font-size:.875rem;
  color:var(--color-text-dim);
  line-height:1.6;
}
.page-products .prod-ios{
  background:
    radial-gradient(ellipse at 85% 10%,rgba(57,255,20,.06),transparent 42%),
    var(--color-bg-deep);
  border-block:1px solid var(--color-border);
}
.page-products .prod-ios__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  margin-top:2.75rem;
}
.page-products .prod-ios__figure{
  aspect-ratio:3/2;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.page-products .prod-ios__content{
  display:grid;
  align-content:start;
  gap:1.5rem;
}
.page-products .prod-ios__subtitle{
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--color-silver);
  margin-bottom:.25rem;
}
.page-products .step-list{
  list-style:none;
  display:grid;
  gap:.75rem;
}
.page-products .step-list__item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  background:rgba(14,31,63,.6);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:1rem 1.1rem;
  transition:border-color .2s var(--ease);
}
.page-products .step-list__item:hover{
  border-color:var(--color-accent);
}
.page-products .step-list__num{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:var(--radius-pill);
  background:var(--color-accent);
  color:#071126;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9375rem;
}
.page-products .step-list__item p{
  margin:0;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--color-text);
}
.page-products .prod-ios__notice ul{
  margin:.7rem 0 0;
  padding-left:1.1rem;
  display:grid;
  gap:.4rem;
}
.page-products .prod-ios__notice li{
  font-size:.875rem;
  line-height:1.65;
  color:var(--color-text-dim);
}
.page-products .prod-goal{
  background:
    linear-gradient(120deg,transparent 0%,rgba(57,255,20,.035) 50%,transparent 100%),
    var(--color-bg);
}
.page-products .prod-goal__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-top:2.75rem;
}
.page-products .dimension-list{
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem;
}
.page-products .dimension-card{
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:rgba(14,31,63,.72);
  padding:1.1rem 1.25rem;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "num title"
    "num desc";
  column-gap:1rem;
  transition:transform .2s var(--ease),border-color .2s var(--ease);
}
.page-products .dimension-card:hover{
  border-color:var(--color-accent);
  transform:translateX(4px);
}
.page-products .dimension-card__num{
  grid-area:num;
  font-family:var(--font-display);
  font-size:1.5rem;
  line-height:1;
  color:var(--color-accent);
}
.page-products .dimension-card__title{
  grid-area:title;
  font-size:1rem;
  font-weight:700;
  color:var(--color-text);
}
.page-products .dimension-card__desc{
  grid-area:desc;
  margin:.35rem 0 0;
  font-size:.875rem;
  line-height:1.65;
  color:var(--color-text-dim);
}
.page-products .prod-goal__note{
  font-size:.8125rem;
  line-height:1.7;
  margin-top:1rem;
}
.page-products .prod-goal__figure{
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.page-products .prod-shooting{
  background:
    radial-gradient(ellipse at 12% 82%,rgba(57,255,20,.07),transparent 44%),
    var(--color-bg-deep);
  border-block:1px solid var(--color-border);
}
.page-products .shoot-tabs{
  position:relative;
  margin-top:2.75rem;
}
.page-products .shoot-tabs__input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  margin:0;
}
.page-products .shoot-tabs__nav{
  display:flex;
  gap:.5rem;
  margin-bottom:1.25rem;
  border-bottom:1px solid var(--color-border);
  padding-bottom:.75rem;
}
.page-products .shoot-tabs__label{
  display:inline-flex;
  align-items:center;
  padding:.55rem 1.25rem;
  border-radius:var(--radius-pill);
  background:rgba(14,31,63,.7);
  border:1px solid var(--color-border);
  color:var(--color-text-dim);
  font-size:.875rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  user-select:none;
}
.page-products .shoot-tabs__label:hover{
  color:var(--color-text);
  border-color:var(--color-silver);
}
.page-products .shoot-tabs__panel{
  display:none;
}
.page-products #tab-modules:checked ~ .shoot-tabs__nav label[for="tab-modules"],
.page-products #tab-coverage:checked ~ .shoot-tabs__nav label[for="tab-coverage"]{
  background:var(--color-accent);
  color:#071126;
  border-color:var(--color-accent);
}
.page-products #tab-modules:checked ~ .shoot-tabs__panel--modules,
.page-products #tab-coverage:checked ~ .shoot-tabs__panel--coverage{
  display:block;
}
.page-products .module-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem;
}
.page-products .module-item{
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-accent);
  border-radius:var(--radius-md);
  background:rgba(14,31,63,.62);
  padding:1rem 1.15rem;
}
.page-products .module-item__tag{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--color-text);
}
.page-products .module-item p{
  margin:.4rem 0 0;
  font-size:.875rem;
  line-height:1.6;
  color:var(--color-text-dim);
}
.page-products .coverage-table{
  display:grid;
  gap:1rem;
}
.page-products .coverage-row{
  display:grid;
  grid-template-columns:7.5rem 1fr auto;
  align-items:center;
  gap:.85rem;
  padding:.75rem 1rem;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:rgba(14,31,63,.55);
  transition:border-color .2s var(--ease);
}
.page-products .coverage-row:hover{
  border-color:var(--color-accent);
}
.page-products .coverage-row__label{
  font-size:.875rem;
  font-weight:600;
  color:var(--color-text);
}
.page-products .coverage-row__bar{
  position:relative;
  display:block;
  height:14px;
  border-radius:var(--radius-pill);
  background:rgba(192,192,192,.14);
  overflow:visible;
}
.page-products .coverage-row__bar i{
  display:block;
  height:100%;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--color-accent),rgba(57,255,20,.45));
}
.page-products .coverage-row__tip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  background:#071126;
  border:1px solid var(--color-accent);
  border-radius:var(--radius-md);
  color:var(--color-text);
  font-size:.75rem;
  padding:.3rem .6rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  z-index:2;
}
.page-products .coverage-row:hover .coverage-row__tip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.page-products .coverage-row__value{
  font-family:var(--font-data);
  font-size:.8125rem;
  color:var(--color-silver);
  white-space:nowrap;
}
.page-products .shoot-figure{
  margin-top:2rem;
  aspect-ratio:3/2;
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.page-products .scenario-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-top:2.75rem;
}
.page-products .scenario-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.page-products .scenario-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(135deg,rgba(14,31,63,.85),rgba(7,17,38,.9));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease);
}
.page-products .scenario-card::after{
  content:"";
  position:absolute;
  right:-28px;
  top:-28px;
  width:88px;
  height:88px;
  background:conic-gradient(from 90deg at 50% 50%,rgba(57,255,20,.2),transparent 55%);
  clip-path:polygon(100% 0,0 100%,100% 100%);
}
.page-products .scenario-card:hover{
  transform:translateY(-3px);
  border-color:rgba(57,255,20,.55);
}
.page-products .scenario-card__num{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--color-accent);
  line-height:1;
}
.page-products .scenario-card__title{
  font-family:var(--font-display);
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--color-text);
  margin:.6rem 0 .45rem;
}
.page-products .scenario-card__desc{
  font-size:.875rem;
  line-height:1.7;
  color:var(--color-text-dim);
  margin-bottom:1.2rem;
}
.page-products .scenario-card__link{
  margin-top:auto;
  align-self:flex-start;
}
.page-products .scenario-figure{
  aspect-ratio:3/4;
  border-radius:var(--radius-lg);
  overflow:hidden;
}

@media (min-width:720px){
  .page-products .matrix-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .page-products .prod-ios__layout{
    grid-template-columns:1fr 1.05fr;
    align-items:start;
  }
  .page-products .prod-goal__layout{
    grid-template-columns:1fr 1.25fr;
    align-items:start;
  }
  .page-products .module-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .page-products .scenario-layout{
    grid-template-columns:1.35fr .85fr;
    align-items:start;
  }
  .page-products .scenario-grid{
    grid-template-columns:1fr;
  }
}

@media (min-width:1080px){
  .page-products .prod-hero{
    grid-template-columns:minmax(200px,320px) 1fr minmax(220px,280px);
    align-items:end;
    min-height:min(640px,calc(100vh - var(--header-h)));
  }
  .page-products .matrix-grid{
    grid-template-columns:repeat(4,1fr);
  }
  .page-products .module-grid{
    grid-template-columns:repeat(5,1fr);
  }
  .page-products .module-item{
    padding:1.15rem 1rem;
  }
  .page-products .dimension-list{
    grid-template-columns:repeat(2,1fr);
  }
  .page-products .prod-goal__note{
    grid-column:1/-1;
  }
  .page-products .scenario-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .page-products .stat-pill:hover,
  .page-products .matrix-card:hover,
  .page-products .dimension-card:hover,
  .page-products .scenario-card:hover,
  .page-products .module-item:hover{
    transform:none;
  }
}