.page-products{
  --ps-hair:1px solid var(--line);
  --ps-dash:1px dashed rgba(59,68,74,.85);
  --ps-gap:clamp(16px,2.4vw,28px);
}

/* ---------- breadcrumbs ---------- */
.page-products .breadcrumbs{padding-top:clamp(14px,2vw,24px);}
.page-products .breadcrumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft);}
.page-products .breadcrumbs__item::after{content:"/";margin-left:8px;color:var(--line);}
.page-products .breadcrumbs__item:last-child::after{content:"";}
.page-products .breadcrumbs__link{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.page-products .breadcrumbs__link:hover,.page-products .breadcrumbs__link:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan);}
.page-products .breadcrumbs__link[aria-current="page"]{color:var(--ink);}

/* ---------- hero ---------- */
.page-products .hero{
  position:relative;
  padding-block:clamp(24px,4vw,44px) clamp(34px,5vw,68px);
  border-bottom:var(--ps-hair);
  background:
    linear-gradient(180deg,rgba(25,227,209,.07),transparent 48%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(59,68,74,.32) 79px 80px);
}
.page-products .hero__grid{display:grid;gap:clamp(24px,3.6vw,44px);}
.page-products .hero__eyebrow{margin:0;font-size:11.5px;letter-spacing:.16em;color:var(--teal);text-transform:uppercase;}
.page-products .hero__title{
  margin:16px 0 0;
  font-family:var(--font-display);
  font-size:clamp(32px,6.2vw,68px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--ink);
  text-wrap:balance;
}
.page-products .hero__title .hl{color:var(--cyan);}
.page-products .hero__lede{
  margin:18px 0 0;
  max-width:56ch;
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.8;
  color:var(--ink-soft);
}
.page-products .hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.page-products .hero__chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--line);background:rgba(21,26,29,.7);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-products .hero__chip:hover,.page-products .hero__chip:focus-visible{border-color:var(--cyan);color:var(--cyan);background:var(--panel-2);}
.page-products .hero__chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

.page-products .hero__panel{
  border:var(--ps-hair);
  background:var(--panel);
  padding:16px 16px 6px;
  align-self:start;
}
.page-products .hero__panel-title{margin:0 0 10px;font-size:11px;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase;}
.page-products .hero__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:13px 6px;
  border-bottom:var(--ps-dash);
  color:var(--ink);text-decoration:none;
  transition:background var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.page-products .hero__row:last-child{border-bottom:0;}
.page-products .hero__row:hover,.page-products .hero__row:focus-visible{background:var(--panel-2);padding-left:10px;}
.page-products .hero__row:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.page-products .hero__row-id{font-family:var(--font-mono);font-size:12px;color:var(--teal);}
.page-products .hero__row:hover .hero__row-id{color:var(--cyan);}
.page-products .hero__row-text{font-size:14px;line-height:1.5;color:var(--ink-soft);}
.page-products .hero__row:hover .hero__row-text{color:var(--ink);}
.page-products .hero__row-go{font-family:var(--font-mono);color:var(--line);transition:color var(--dur) var(--ease);}
.page-products .hero__row:hover .hero__row-go{color:var(--orange);}

/* ---------- section frame ---------- */
.page-products .ps-sec{padding-block:clamp(40px,6vw,80px);scroll-margin-top:88px;}
.page-products .ps-sec + .ps-sec{border-top:var(--ps-hair);}
.page-products .sec-head{display:grid;gap:10px;margin-bottom:clamp(20px,3vw,34px);max-width:72ch;}
.page-products .sec-idx{margin:0;font-size:11.5px;letter-spacing:.16em;color:var(--teal);text-transform:uppercase;}
.page-products .sec-h{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(25px,3.6vw,44px);
  font-weight:700;line-height:1.1;color:var(--ink);
  text-wrap:balance;
}
.page-products .sec-sub{margin:0;font-size:15px;line-height:1.8;color:var(--ink-soft);}

/* ---------- figures ---------- */
.page-products .ps-fig{margin:0;padding:10px;border:var(--ps-hair);background:var(--panel);display:grid;gap:9px;}
.page-products .ps-fig img{display:block;width:100%;height:auto;object-fit:cover;}
.page-products .ps-fig figcaption{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;line-height:1.6;color:var(--ink-soft);}
.page-products .ps-fig--wide{margin-top:var(--ps-gap);}

/* ---------- paths ---------- */
.page-products .paths__wrap{display:grid;gap:var(--ps-gap);}
.page-products .tree{display:grid;gap:12px;align-content:start;}
.page-products .tree__node{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;
  padding:16px 16px 16px 14px;
  border:var(--ps-hair);background:var(--panel);
  color:var(--ink);text-decoration:none;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-products .tree__node:hover,.page-products .tree__node:focus-visible{border-color:var(--cyan);background:var(--panel-2);transform:translateX(3px);}
.page-products .tree__node:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.page-products .tree__node:not(:last-child)::after{content:"";position:absolute;left:29px;bottom:-12px;width:1px;height:12px;background:var(--line);}
.page-products .tree__id{
  font-family:var(--font-mono);font-size:12px;line-height:1;
  padding:7px 8px;border:1px solid var(--line);color:var(--cyan);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-products .tree__node:hover .tree__id{background:var(--cyan);color:#07211e;border-color:var(--cyan);}
.page-products .tree__name{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.01em;}
.page-products .tree__desc{display:block;margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--ink-soft);}
.page-products .tree__go{font-family:var(--font-mono);color:var(--teal);transition:color var(--dur) var(--ease);}
.page-products .tree__node:hover .tree__go{color:var(--orange);}

/* ---------- screen / sizer ---------- */
.page-products .screen__grid{display:grid;gap:var(--ps-gap);}
.page-products .dims{display:grid;gap:1px;background:var(--line);border:var(--ps-hair);margin-bottom:clamp(18px,2.4vw,26px);}
.page-products .dim{background:var(--panel);padding:14px 16px;}
.page-products .dim__k{display:block;font-size:11px;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;margin-bottom:6px;}
.page-products .dim__v{display:block;font-size:14px;line-height:1.7;color:var(--ink-soft);}

.page-products .sizer{position:relative;border:var(--ps-hair);background:var(--panel);padding:clamp(14px,2vw,22px);}
.page-products .sizer__radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;}
.page-products .sizer__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.page-products .sizer__tags label{
  display:inline-flex;align-items:center;min-height:44px;padding:0 13px;
  border:1px solid var(--line);background:var(--bg);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);
  cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-products .sizer__tags label:hover{color:var(--ink);border-color:var(--cyan);}
.page-products #ps-all:checked ~ .sizer__tags label[for="ps-all"],
.page-products #ps-a:checked ~ .sizer__tags label[for="ps-a"],
.page-products #ps-b:checked ~ .sizer__tags label[for="ps-b"],
.page-products #ps-c:checked ~ .sizer__tags label[for="ps-c"]{
  background:var(--cyan);border-color:var(--cyan);color:#07211e;font-weight:600;
}
.page-products #ps-all:focus-visible ~ .sizer__tags label[for="ps-all"],
.page-products #ps-a:focus-visible ~ .sizer__tags label[for="ps-a"],
.page-products #ps-b:focus-visible ~ .sizer__tags label[for="ps-b"],
.page-products #ps-c:focus-visible ~ .sizer__tags label[for="ps-c"]{
  outline:2px solid var(--cyan);outline-offset:3px;
}

.page-products .sizer__table{overflow-x:auto;}
.page-products .sizer__table table{width:100%;min-width:600px;border-collapse:collapse;font-size:13.5px;}
.page-products .sizer__table caption{text-align:left;padding-bottom:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;}
.page-products .sizer__table th{
  text-align:left;padding:10px 12px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--ink-soft);text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.page-products .sizer__table td{padding:11px 12px;line-height:1.6;color:var(--ink-soft);border-bottom:1px solid rgba(59,68,74,.55);}
.page-products .sizer__table td:first-child{color:var(--ink);font-weight:600;}
.page-products .sizer__table tbody tr:nth-child(even){background:rgba(34,40,44,.5);}
.page-products #ps-a:checked ~ .sizer__table tbody tr[data-size]:not([data-size="a"]),
.page-products #ps-b:checked ~ .sizer__table tbody tr[data-size]:not([data-size="b"]),
.page-products #ps-c:checked ~ .sizer__table tbody tr[data-size]:not([data-size="c"]){display:none;}

.page-products .screen__aside{display:grid;gap:var(--ps-gap);align-content:start;}
.page-products .note-card{border:var(--ps-hair);border-left:3px solid var(--teal);background:var(--panel);padding:16px 18px;}
.page-products .note-card__k{margin:0;font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;}
.page-products .note-card__v{margin:8px 0 0;font-family:var(--font-display);font-size:20px;line-height:1.35;color:var(--ink);}
.page-products .note-card__s{margin:8px 0 0;font-size:13px;line-height:1.7;color:var(--ink-soft);}

/* ---------- switch steps ---------- */
.page-products .switch__grid{display:grid;gap:var(--ps-gap);}
.page-products .steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;}
.page-products .steps__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;}
.page-products .steps__num{
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--orange);color:#160A03;
  font-family:var(--font-mono);font-size:14px;font-weight:700;
}
.page-products .steps__item:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:-18px;width:1px;background:var(--cyan);opacity:.45;}
.page-products .steps__body h3{
  margin:6px 0 6px;font-family:var(--font-display);
  font-size:clamp(18px,2.1vw,23px);font-weight:600;line-height:1.3;color:var(--ink);
}
.page-products .steps__body p{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-soft);}

.page-products .fallback{
  display:grid;gap:14px;margin-top:clamp(22px,3vw,34px);
  padding:18px 18px 20px;border:var(--ps-hair);background:var(--panel);
}
.page-products .fallback__text{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink-soft);}
.page-products .fallback__links{display:flex;flex-wrap:wrap;gap:10px;}

.page-products .ps-strip{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;
  margin-top:clamp(24px,3vw,38px);
  padding:14px 18px;
  background:var(--panel-2);border-left:3px solid var(--orange);
}
.page-products .ps-strip p{margin:0;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;line-height:1.6;color:var(--ink);}
.page-products .ps-strip a{font-family:var(--font-mono);font-size:12.5px;color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(25,227,209,.4);padding-bottom:2px;}
.page-products .ps-strip a:hover,.page-products .ps-strip a:focus-visible{color:var(--orange);border-bottom-color:var(--orange);}

/* ---------- login checklist ---------- */
.page-products .login__grid{display:grid;gap:var(--ps-gap);}
.page-products .checklist{list-style:none;margin:0;padding:0;}
.page-products .checklist__item{position:relative;border-bottom:var(--ps-dash);}
.page-products .checklist__item:first-child{border-top:var(--ps-dash);}
.page-products .checklist__input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;}
.page-products .checklist__label{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 6px;cursor:pointer;
  font-size:14.5px;line-height:1.7;color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.page-products .checklist__label::before{
  content:"";flex:none;width:16px;height:16px;margin-top:4px;
  border:1px solid var(--line);background:var(--bg);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.page-products .checklist__label:hover::before{border-color:var(--cyan);}
.page-products .checklist__input:checked + .checklist__label{color:var(--ink-soft);}
.page-products .checklist__input:checked + .checklist__label::before{background:var(--cyan);border-color:var(--cyan);box-shadow:inset 0 0 0 3px var(--panel);}
.page-products .checklist__input:focus-visible + .checklist__label::before{outline:2px solid var(--cyan);outline-offset:3px;}

.page-products .materials{margin-top:clamp(20px,2.6vw,30px);padding:18px;border:var(--ps-hair);background:var(--panel);}
.page-products .materials__title{margin:0;font-size:11px;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;}
.page-products .materials__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;}
.page-products .materials__list li{position:relative;padding-left:16px;font-size:14px;line-height:1.7;color:var(--ink-soft);}
.page-products .materials__list li::before{content:"·";position:absolute;left:2px;color:var(--cyan);font-weight:700;}
.page-products .materials__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}

/* ---------- pace ---------- */
.page-products .pace__grid{
  display:grid;gap:1px;background:var(--line);border:var(--ps-hair);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin-bottom:var(--ps-gap);
}
.page-products .stat{background:var(--panel);padding:18px 16px 20px;}
.page-products .stat__num{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1;color:var(--cyan);}
.page-products .stat__unit{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin-left:6px;}
.page-products .stat__label{display:block;margin-top:10px;font-size:13px;line-height:1.65;color:var(--ink-soft);}

.page-products .pace__notes{display:grid;gap:14px;}
.page-products .pace__note{border-left:2px solid var(--line);padding:2px 0 2px 14px;}
.page-products .pace__note-k{margin:0;font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;}
.page-products .pace__note-v{margin:7px 0 0;font-size:14px;line-height:1.75;color:var(--ink-soft);}

/* ---------- scenes ---------- */
.page-products .scenes{display:grid;gap:14px;}
.page-products .scene{
  display:flex;flex-direction:column;gap:12px;
  padding:20px 18px 22px;border:var(--ps-hair);background:var(--panel);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-products .scene:hover{border-color:var(--teal);background:var(--panel-2);}
.page-products .scene .tag{align-self:flex-start;}
.page-products .scene__title{margin:0;font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.3;color:var(--ink);}
.page-products .scene__list{margin:0;padding-left:17px;font-size:13.5px;line-height:1.8;color:var(--ink-soft);}
.page-products .scene__list li::marker{color:var(--teal);}
.page-products .scene__link{
  margin-top:auto;align-self:flex-start;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;
  color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(25,227,209,.35);padding-bottom:2px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.page-products .scene__link:hover,.page-products .scene__link:focus-visible{color:var(--orange);border-bottom-color:var(--orange);}

/* ---------- closing ---------- */
.page-products .closing{
  display:grid;gap:20px;
  padding:clamp(22px,3.4vw,38px);
  border:1px solid var(--orange);
  background:linear-gradient(140deg,rgba(255,107,26,.14),transparent 62%),var(--panel);
}
.page-products .closing__title{margin:0;font-family:var(--font-display);font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.2;color:var(--ink);}
.page-products .closing__text{margin:12px 0 0;max-width:56ch;font-size:14.5px;line-height:1.8;color:var(--ink-soft);}
.page-products .closing__actions{display:flex;flex-wrap:wrap;gap:10px;}
.page-products .closing__actions .btn{flex:1 1 200px;justify-content:center;text-align:center;}

/* ---------- responsive ---------- */
@media (min-width:720px){
  .page-products .dims{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .scenes{grid-template-columns:repeat(3,minmax(0,1fr));}
  .page-products .pace__notes{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:960px){
  .page-products .hero__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start;}
  .page-products .paths__wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;}
  .page-products .screen__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;}
  .page-products .switch__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;}
  .page-products .login__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;}
  .page-products .closing{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:center;}
  .page-products .ps-fig--paths{margin-top:0;}
}

@media (prefers-reduced-motion:reduce){
  .page-products *,
  .page-products *::before,
  .page-products *::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}
<<<END>>>