.page-products{
  --pp-line:1px solid var(--hair);
  --pp-evm-tint:rgba(42,107,255,.09);
  --pp-non-tint:rgba(108,76,241,.10);
  position:relative;
  padding:88px 0 76px;
  background:
    radial-gradient(880px 520px at 84% -6%, rgba(42,107,255,.16), transparent 60%),
    radial-gradient(680px 460px at 0% 24%, rgba(108,76,241,.10), transparent 58%);
}

.page-products .crumb{padding-top:6px;font-size:13px;color:var(--text-2)}
.page-products .crumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.page-products .crumb li+li::before{content:"/";margin-right:8px;color:var(--hair)}
.page-products .crumb a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.page-products .crumb a:hover{color:var(--text);border-color:var(--cyan)}

/* hero */
.page-products .hero{padding:26px 0 0}
.page-products .hero__grid{display:grid;gap:32px}
.page-products .hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  margin:0;padding:5px 12px;border-radius:var(--r-pill);
  border:1px solid var(--hair);background:var(--glass);
  font-size:12px;letter-spacing:.05em;color:var(--text-2);
}
.page-products .hero__eyebrow .mono{color:var(--cyan)}
.page-products .hero h1{
  margin:16px 0 16px;
  font-size:clamp(30px,6.2vw,46px);
  line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--text);
  max-width:16ch;
}
.page-products .hero__lede{margin:0;font-size:16px;line-height:1.78;color:var(--text-2);max-width:58ch}

.page-products .hero__steps{counter-reset:hstep;display:grid;gap:12px;margin:26px 0 0;padding:0;list-style:none}
.page-products .hero__steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.6;color:var(--text)}
.page-products .hero__steps li::before{
  counter-increment:hstep;content:counter(hstep,decimal-leading-zero);
  font-family:var(--mono);font-size:12px;color:var(--cyan);
  display:grid;place-items:center;height:30px;
  border:1px solid var(--hair);border-radius:var(--r-xs);background:var(--slate);
}

.page-products .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.page-products .vercard{
  position:relative;overflow:hidden;
  padding:24px 22px 22px;
  border:var(--pp-line);border-radius:var(--r-lg);
  background:var(--glass);backdrop-filter:blur(14px);
}
.page-products .vercard::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--brand) 60%,transparent);
}
.page-products .vercard__label{margin:0;font-size:12px;letter-spacing:.08em;color:var(--text-2)}
.page-products .vercard__num{
  margin:8px 0 4px;font-size:clamp(48px,12vw,72px);line-height:1;
  font-weight:700;letter-spacing:-.04em;color:var(--text);
}
.page-products .vercard__title{margin:10px 0 14px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-products .vercard__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.page-products .vercard__list li{
  position:relative;padding-left:16px;font-size:14px;line-height:1.6;color:var(--text-2);
}
.page-products .vercard__list li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--brand);
}
.page-products .vercard__note{margin:18px 0 0;padding-top:14px;border-top:var(--pp-line);font-size:12.5px;line-height:1.6;color:var(--text-2)}

/* toc */
.page-products .toc{
  margin-top:40px;
  border-top:var(--pp-line);border-bottom:var(--pp-line);
}
.page-products .toc ol{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.page-products .toc ol::-webkit-scrollbar{display:none}
.page-products .toc li{flex:0 0 auto}
.page-products .toc a{
  position:relative;display:block;padding:14px 20px 14px 0;
  font-size:13px;color:var(--text-2);text-decoration:none;white-space:nowrap;
  transition:color .2s var(--ease);
}
.page-products .toc a:hover{color:var(--text)}
.page-products .toc a[data-current]{color:var(--text);font-weight:600}
.page-products .toc a[data-current]::after{
  content:"";position:absolute;left:0;right:20px;bottom:-1px;height:2px;background:var(--cyan);
}

/* sections */
.page-products .sec{padding:52px 0 0}
.page-products .sec__eyebrow{margin:0 0 10px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--cyan)}
.page-products .sec h2{margin:0 0 12px;font-size:clamp(22px,4vw,32px);line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.page-products .sec__lede{margin:0;font-size:16px;line-height:1.78;color:var(--text-2);max-width:64ch}
.page-products .sec__note{margin:26px 0 0;font-size:14px;line-height:1.78;color:var(--text-2);max-width:68ch}
.page-products .sec__note a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--cyan)}
.page-products .sec__note .mono{color:var(--cyan)}

/* confirm list */
.page-products .entry__grid{display:grid;gap:28px;margin-top:28px}
.page-products .confirm{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.page-products .confirm__item{
  display:grid;grid-template-columns:40px 1fr;gap:16px;
  padding:18px 0;border-top:var(--pp-line);
}
.page-products .confirm__item:last-child{border-bottom:var(--pp-line)}
.page-products .confirm__n{
  display:grid;place-items:center;height:30px;width:34px;
  font-size:12px;color:var(--cyan);
  border:1px solid var(--hair);border-radius:var(--r-xs);background:var(--slate);
}
.page-products .confirm__body h3{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-products .confirm__body p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2)}

/* media */
.page-products .shot{
  margin:28px 0 0;overflow:hidden;
  border:var(--pp-line);border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--slate),var(--void));
}
.page-products .shot img{display:block;width:100%;height:auto;object-fit:cover}
.page-products .shot--tall img{max-height:520px}
.page-products .shot--map{border-color:rgba(34,211,238,.22)}
.page-products .shot__cap{
  margin:0;padding:12px 16px;border-top:var(--pp-line);
  font-size:12.5px;line-height:1.6;color:var(--text-2);
}

/* alert */
.page-products .alert{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  margin:26px 0 0;padding:14px 16px;
  border:1px solid rgba(255,138,61,.32);border-left-width:2px;border-radius:var(--r-sm);
  background:rgba(255,138,61,.06);
  font-size:14px;line-height:1.7;color:var(--text-2);
}
.page-products .alert--quiet{border-color:var(--hair);background:var(--glass)}

/* steps */
.page-products .steps{position:relative;margin-top:30px;display:grid;gap:18px}
.page-products .steps::before{
  content:"";position:absolute;left:15px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--cyan),var(--brand) 55%,transparent);
}
.page-products .step{position:relative;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.page-products .step__idx{
  position:relative;z-index:1;display:grid;place-items:center;
  width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--void);border:var(--pp-line);color:var(--cyan);font-size:12px;
}
.page-products .step__body{
  padding:16px 18px;border:var(--pp-line);border-radius:var(--r-md);
  background:var(--glass);backdrop-filter:blur(12px);
}
.page-products .step--current .step__body{border-color:rgba(34,211,238,.42);box-shadow:0 0 0 1px rgba(34,211,238,.08) inset}
.page-products .step__body h3{margin:0 0 8px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-products .step__body p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.page-products .step__tip{
  margin-top:10px !important;padding-top:10px;border-top:var(--pp-line);
  font-size:13px !important;color:var(--text-2);
}
.page-products .step__tip::before{content:"→ ";font-family:var(--mono);color:var(--cyan)}

/* nets */
.page-products .nets{display:grid;gap:20px;margin-top:28px}
.page-products .netcol{
  padding:20px 18px 14px;border:var(--pp-line);border-radius:var(--r-lg);
  background:var(--slate);
}
.page-products .netcol--evm{background:linear-gradient(180deg,var(--pp-evm-tint),transparent 46%),var(--slate)}
.page-products .netcol--non{background:linear-gradient(180deg,var(--pp-non-tint),transparent 46%),var(--slate)}
.page-products .netcol__head{padding-bottom:14px;border-bottom:var(--pp-line)}
.page-products .netcol__head h3{margin:10px 0 6px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-products .netcol__head p{margin:0;font-size:13px;line-height:1.65;color:var(--text-2)}

.page-products .netlist{margin:0;padding:0;list-style:none;counter-reset:none}
.page-products .netitem{
  position:relative;
  display:grid;grid-template-columns:34px 1fr;column-gap:12px;row-gap:3px;align-items:center;
  padding:11px 10px 11px 8px;border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.page-products .netitem::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:transparent;transition:background .2s var(--ease);
}
.page-products .netitem:hover{border-color:var(--hair);background:rgba(20,30,50,.5)}
.page-products .netitem:hover::before{background:var(--cyan)}
.page-products .netitem__n{
  grid-row:1;display:grid;place-items:center;height:26px;width:26px;
  font-size:11px;color:var(--text-2);border:1px solid var(--hair);border-radius:var(--r-xs);
}
.page-products .netitem__name{grid-row:1;font-size:14px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.page-products .netitem__note{grid-column:2 / -1;grid-row:2;font-size:12.5px;line-height:1.55;color:var(--text-2)}

/* checklist */
.page-products .pf-check{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.page-products .pf-check__item{
  display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;
  padding:16px 16px 16px 14px;
  border:var(--pp-line);border-left:2px solid var(--hair);border-radius:var(--r-sm);
  background:var(--slate);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.page-products .pf-check__item:hover{border-left-color:var(--cyan);background:rgba(13,21,34,.92)}
.page-products .pf-check__item[data-done]{border-left-color:var(--mint)}
.page-products .pf-check__box{
  display:grid;place-items:center;width:26px;height:26px;padding:0;cursor:pointer;
  background:var(--void);border:1px solid var(--hair);border-radius:var(--r-xs);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.page-products .pf-check__box:hover{border-color:var(--cyan)}
.page-products .pf-check__mark{
  width:9px;height:5px;border-left:2px solid var(--void);border-bottom:2px solid var(--void);
  transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .18s var(--ease);
}
.page-products .pf-check__box[aria-checked="true"]{background:var(--mint);border-color:var(--mint)}
.page-products .pf-check__box[aria-checked="true"] .pf-check__mark{opacity:1}
.page-products .pf-check__item .checklist__text{font-size:14.5px;line-height:1.72;color:var(--text-2)}
.page-products .pf-check__item .checklist__text strong{display:block;margin-bottom:4px;font-size:15.5px;font-weight:700;color:var(--text)}

/* split */
.page-products .split{display:grid;gap:20px;margin-top:28px}
.page-products .split__col{
  padding:22px 20px 20px;border:var(--pp-line);border-radius:var(--r-lg);
  background:var(--slate);
}
.page-products .split__col--home{background:linear-gradient(180deg,rgba(63,214,164,.07),transparent 42%),var(--slate)}
.page-products .split__col--org{background:linear-gradient(180deg,var(--pp-non-tint),transparent 42%),var(--slate)}
.page-products .split__col h3{margin:12px 0 10px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.page-products .split__col p{margin:0;font-size:14.5px;line-height:1.75;color:var(--text-2)}
.page-products .split__list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.page-products .split__list li{
  position:relative;padding-left:15px;font-size:13.5px;line-height:1.62;color:var(--text-2);
}
.page-products .split__list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--text-2)}
.page-products .split__link{
  display:inline-block;margin-top:18px;padding-bottom:2px;
  font-size:14px;font-weight:600;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--brand);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.page-products .split__link:hover{color:var(--cyan);border-color:var(--cyan)}

/* blockers */
.page-products .blockers{margin-top:26px;border-top:var(--pp-line)}
.page-products .blocker{border-bottom:var(--pp-line)}
.page-products .blocker summary{
  position:relative;padding:16px 34px 16px 0;cursor:pointer;
  font-size:15.5px;font-weight:600;line-height:1.6;color:var(--text);
  list-style:none;
}
.page-products .blocker summary::-webkit-details-marker{display:none}
.page-products .blocker summary::after{
  content:"+";position:absolute;right:6px;top:15px;
  font-family:var(--mono);font-size:16px;color:var(--cyan);
  transition:transform .2s var(--ease);
}
.page-products .blocker[open] summary::after{content:"–"}
.page-products .blocker[open] summary{color:var(--cyan)}
.page-products .blocker__body{padding:0 0 18px}
.page-products .blocker__body p{margin:0;font-size:14.5px;line-height:1.78;color:var(--text-2);max-width:62ch}

/* more */
.page-products .sec--last{padding-bottom:8px}
.page-products .morelist{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:2px}
.page-products .morelist li{border-top:var(--pp-line)}
.page-products .morelist li:last-child{border-bottom:var(--pp-line)}
.page-products .morelist a{
  display:grid;gap:4px;padding:14px 4px;text-decoration:none;
  transition:padding-left .2s var(--ease);
}
.page-products .morelist a:hover{padding-left:10px}
.page-products .morelist__t{font-size:15.5px;font-weight:600;color:var(--text)}
.page-products .morelist a:hover .morelist__t{color:var(--cyan)}
.page-products .morelist__d{font-size:13px;line-height:1.6;color:var(--text-2)}

@media (min-width:768px){
  .page-products{padding-top:104px}
  .page-products .hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;align-items:start}
  .page-products .entry__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:start}
  .page-products .shot--tall{margin-top:0}
  .page-products .nets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .morelist a{grid-template-columns:220px minmax(0,1fr);align-items:baseline;gap:18px}
}

@media (min-width:1024px){
  .page-products{padding-left:var(--rail)}
  .page-products .sec{padding-top:72px}
  .page-products .toc a{padding-right:28px}
  .page-products .shot--wide{margin-top:34px}
}

@media (min-width:1240px){
  .page-products .netcol{padding:24px 22px 16px}
}

@media (prefers-reduced-motion:reduce){
  .page-products .netitem,
  .page-products .pf-check__box,
  .page-products .morelist a,
  .page-products .blocker summary::after{
    transition:opacity .01ms linear !important;
  }
  .page-products .morelist a:hover{padding-left:4px}
}
</final>