.page-products{
  --pp-muted-line: rgba(240,235,216,.16);
  --pp-accent-soft: rgba(255,90,43,.12);
  --pp-gap: clamp(24px,4vw,56px);
}

.page-products .pp-intro{
  padding-bottom: clamp(48px,7vw,88px);
}
.page-products .pp-intro__grid{
  display: grid;
  gap: clamp(28px,5vw,64px);
  align-items: start;
}
.page-products .pp-intro__label{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-secondary);
  margin: 0 0 14px;
}
.page-products .pp-intro h1{
  font-family: var(--font-head);
  font-size: clamp(28px,4vw,52px);
  line-height: 1.12;
  letter-spacing: .02em;
  color: var(--c-fg-light);
  margin: 0 0 20px;
  max-width: 13em;
}
.page-products .pp-intro__lead{
  font-size: clamp(15px,1.4vw,18px);
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 46em;
  margin: 0 0 18px;
}
.page-products .pp-intro__topics{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-products .pp-intro__topics li{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-fg);
  background: var(--pp-accent-soft);
  border: 1px solid rgba(255,90,43,.4);
  padding: 6px 10px;
}
.page-products .pp-intro__meta{
  margin-top: 24px;
  color: var(--c-secondary);
}

.page-products .pp-toc-card{
  background: linear-gradient(145deg,var(--c-bg-blue) 0%,var(--c-bg) 100%);
  border: 1px solid var(--pp-muted-line);
  color: var(--c-fg);
  padding: clamp(20px,3vw,32px);
  position: relative;
}
.page-products .pp-toc-card::after{
  content: "INDEX";
  position: absolute;
  right: 16px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--c-accent);
}
.page-products .pp-toc-card__title{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: .18em;
  margin: 0 0 18px;
}
.page-products .pp-toc-card__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.page-products .pp-toc-card__list a{
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 8px;
  border-bottom: 1px dashed var(--pp-muted-line);
  text-decoration: none;
  color: var(--c-fg);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.page-products .pp-toc-card__list a:hover{
  background: var(--pp-accent-soft);
  color: var(--c-fg-light);
}
.page-products .pp-toc-card__list span{
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-size: 13px;
  min-width: 34px;
}

.page-products .pp-section{
  position: relative;
  padding-top: clamp(48px,7vw,92px);
  padding-bottom: clamp(48px,7vw,92px);
}
.page-products .pp-section__inner{
  border-left: 3px solid var(--c-accent);
  padding-left: clamp(14px,2vw,28px);
}
.page-products .pp-section__head{
  margin-bottom: clamp(24px,4vw,44px);
}
.page-products .pp-section__head h2{
  font-family: var(--font-head);
  font-size: clamp(24px,3vw,38px);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--c-fg-light);
  margin: 10px 0 12px;
}
.page-products .pp-section__head .tk-section__intro{
  margin-top: 0;
  max-width: 52em;
}
.page-products .pp-section__layout{
  display: grid;
  gap: var(--pp-gap);
}
.page-products .pp-section__content{
  min-width: 0;
}
.page-products .pp-figure{
  margin: 0;
  min-width: 0;
}
.page-products .pp-figure .tk-visual__img{
  width: 100%;
  height: auto;
  display: block;
}

.page-products .pp-rank h3{
  font-family: var(--font-head);
  font-size: 20px;
  margin: 0 0 12px;
  color: var(--c-fg-light);
}
.page-products .pp-rank__table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.page-products .pp-rank__table th{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
  text-align: left;
  font-weight: 400;
  letter-spacing: .08em;
  padding: 10px 10px 8px 0;
  border-bottom: 1px solid var(--c-accent);
}
.page-products .pp-rank__table td{
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--pp-muted-line);
  color: var(--c-fg);
}
.page-products .pp-rank__table td:first-child{
  font-family: var(--font-mono);
  color: var(--c-accent);
}
.page-products .pp-rank__table tr:hover td{
  background: var(--pp-accent-soft);
}
.page-products .pp-rank__note{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-muted);
}

.page-products .pp-facts{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--pp-muted-line);
  border: 1px solid var(--pp-muted-line);
  margin: 24px 0;
}
.page-products .pp-facts > div{
  background: var(--c-bg);
  padding: 14px;
}
.page-products .pp-facts dt{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-secondary);
  margin-bottom: 6px;
}
.page-products .pp-facts dd{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-fg);
}
.page-products .pp-trust-line{
  border: 1px solid rgba(198,242,78,.35);
  background: rgba(198,242,78,.08);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-fg);
  margin: 0 0 20px;
}

.page-products .tk-glass.pp-steps{
  padding: clamp(20px,3vw,28px);
  border-radius: var(--radius);
  margin-bottom: 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--pp-muted-line);
  backdrop-filter: blur(6px);
}
.page-products .pp-steps h3{
  font-family: var(--font-head);
  font-size: 20px;
  margin: 0 0 16px;
  color: var(--c-fg-light);
}
.page-products .pp-steps__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.page-products .pp-steps__list li{
  display: flex;
  gap: 14px;
  align-items: baseline;
  line-height: 1.6;
  color: var(--c-fg);
  font-size: 14px;
}
.page-products .pp-steps__list span{
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-size: 13px;
  min-width: 22px;
}

.page-products .pp-benefit-grid{
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.page-products .pp-benefit{
  border: 1px solid var(--pp-muted-line);
  padding: 16px;
  background: rgba(42,40,36,.7);
}
.page-products .pp-benefit__icon{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--c-bg);
  background: var(--c-secondary);
  padding: 4px 8px;
  margin-bottom: 10px;
}
.page-products .pp-benefit h4{
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--c-fg-light);
}
.page-products .pp-benefit p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}

.page-products .pp-tabs{
  position: relative;
  border: 1px solid var(--pp-muted-line);
  background: rgba(42,40,36,.65);
  padding: clamp(18px,3vw,26px);
}
.page-products .pp-tabs__radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.page-products .pp-tabs__labels{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.page-products .pp-tabs__label{
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  color: var(--c-muted);
  padding: 8px 12px;
  border: 1px solid var(--pp-muted-line);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.page-products .pp-tabs__label:hover{
  color: var(--c-fg);
  border-color: var(--c-secondary);
}
.page-products .pp-tabs__panel{
  display: none;
}
.page-products .pp-tabs__panel h3{
  font-family: var(--font-head);
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--c-fg-light);
}
.page-products .pp-tabs__panel p{
  color: var(--c-fg);
  line-height: 1.7;
  font-size: 14px;
  margin: 0 0 14px;
}
.page-products .pp-tabs__panel ul{
  margin: 0 0 14px;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--c-muted);
  font-size: 14px;
}
.page-products #pp-tab-south:checked ~ .pp-tabs__labels label[for="pp-tab-south"],
.page-products #pp-tab-east:checked ~ .pp-tabs__labels label[for="pp-tab-east"],
.page-products #pp-tab-north:checked ~ .pp-tabs__labels label[for="pp-tab-north"]{
  background: var(--c-secondary);
  color: var(--c-bg);
  border-color: var(--c-secondary);
}
.page-products #pp-tab-south:checked ~ .pp-tabs__panels .pp-tabs__panel:nth-child(1),
.page-products #pp-tab-east:checked ~ .pp-tabs__panels .pp-tabs__panel:nth-child(2),
.page-products #pp-tab-north:checked ~ .pp-tabs__panels .pp-tabs__panel:nth-child(3){
  display: block;
}

.page-products .pp-venue-list{
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 440px;
}
.page-products .pp-venue-list li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--pp-muted-line);
  font-size: 14px;
  color: var(--c-fg);
}
.page-products .pp-venue-list__status{
  font-family: var(--font-mono);
  color: var(--c-secondary);
  font-size: 13px;
  white-space: nowrap;
}

.page-products .pp-dual-steps{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.page-products .pp-dual-steps li{
  position: relative;
  padding-left: 70px;
  border-bottom: 1px dashed var(--pp-muted-line);
  padding-bottom: 16px;
}
.page-products .pp-dual-steps li:last-child{
  border-bottom: 0;
}
.page-products .pp-dual-steps li > span{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
}
.page-products .pp-dual-steps h3{
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--c-fg-light);
}
.page-products .pp-dual-steps p{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-muted);
}
.page-products .pp-dual__copy{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  background: rgba(240,235,216,.06);
  padding: 16px;
  border-left: 3px solid var(--c-accent);
  margin-bottom: 20px;
}
.page-products .pp-dual__path{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-fg);
  flex: 1 1 240px;
  min-width: 0;
  line-height: 1.6;
}
.page-products .pp-dual__copy-btn{
  cursor: pointer;
}

.page-products .pp-device-grid{
  display: grid;
  gap: 18px;
  margin-bottom: var(--pp-gap);
}
.page-products .pp-device{
  padding: clamp(20px,3vw,30px);
}
.page-products .pp-device h3{
  font-family: var(--font-head);
  font-size: 22px;
  color: var(--c-fg-light);
  margin: 0 0 10px;
}
.page-products .pp-device p{
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 14px;
}
.page-products .pp-device ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-fg);
}

.page-products .pp-bottom-cta{
  margin-top: clamp(32px,5vw,56px);
  padding-top: 28px;
  border-top: 2px solid var(--c-accent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.page-products .pp-bottom-cta p{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 42em;
}
.page-products .pp-bottom-cta .tk-btn{
  flex-shrink: 0;
}

@media (min-width:480px){
  .page-products .pp-facts{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (min-width:640px){
  .page-products .pp-benefit-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (min-width:700px){
  .page-products .pp-device-grid{
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (min-width:860px){
  .page-products .pp-intro__grid{
    grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
  }
  .page-products .pp-section__layout{
    grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
    align-items: start;
  }
  .page-products .pp-section__layout--b{
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  }
  .page-products .pp-section__layout--b .pp-figure{
    order: -1;
  }
  .page-products .pp-section__layout--c{
    grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  }
}