.page-products{
  --pp-body:rgba(243,247,252,.8);
  --pp-dim:rgba(243,247,252,.6);
  --pp-panel:rgba(22,38,74,.55);
  color:var(--paper);
  font-family:var(--font-body);
  overflow-x:clip;
}
.page-products .pp-block{padding:44px 0}
.page-products .pp-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin:0;
}
.page-products .pp-kicker::before{content:"";width:22px;height:2px;background:var(--signal);display:block}
.page-products h2{
  font-family:var(--font-display);font-size:clamp(1.6rem,5.4vw,2.5rem);
  line-height:1.08;letter-spacing:-.01em;margin:12px 0 0;color:var(--paper);
}
.page-products h3{
  font-family:var(--font-display);font-size:1.15rem;line-height:1.25;
  margin:8px 0 6px;color:var(--paper);
}
.page-products .pp-text{
  color:var(--pp-body);font-size:16px;line-height:1.75;
  max-width:64ch;margin:14px 0 0;
}
.page-products .data{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.page-products .pp-link-row{margin:20px 0 0}
.page-products .pp-link{
  display:inline-block;font-family:var(--font-mono);font-size:13px;
  color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(59,240,140,.4);
  padding-bottom:2px;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.page-products .pp-link:hover,.page-products .pp-link:focus-visible{color:var(--amber-soft);border-color:var(--amber-soft)}

/* hero */
.page-products .pp-hero{
  position:relative;padding:24px 0 10px;
  background:
    radial-gradient(120% 90% at 94% 4%,rgba(59,240,140,.16),transparent 60%),
    radial-gradient(90% 80% at 2% 0%,rgba(255,138,60,.14),transparent 62%);
}
.page-products .pp-hero__grid{display:grid;gap:26px}
.page-products .pp-hero h1{
  font-family:var(--font-display);font-size:clamp(2.05rem,8vw,4.2rem);
  line-height:1.02;letter-spacing:-.02em;margin:14px 0 0;color:var(--paper);
}
.page-products .pp-hero__lead{
  color:var(--pp-body);font-size:16px;line-height:1.75;margin:16px 0 0;max-width:60ch;
}
.page-products .pp-jump{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 0;
}
.page-products .pp-jump a{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;
  color:var(--paper);text-decoration:none;background:rgba(30,52,99,.28);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.page-products .pp-jump a:hover,.page-products .pp-jump a:focus-visible{
  border-color:var(--signal);color:var(--signal);background:rgba(59,240,140,.1);
}
.page-products .pp-hero__figure{
  margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(150deg,var(--blue-700),var(--blue-900));
}
.page-products .pp-hero__figure img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
}
.page-products .pp-hero__cap{
  font-family:var(--font-mono);font-size:12px;color:var(--metal);
  padding:10px 14px;border-top:1px solid var(--line-soft);letter-spacing:.04em;
}

/* scenes */
.page-products .pp-scenes__grid{display:grid;gap:14px;margin-top:24px}
.page-products .pp-scene{
  display:block;position:relative;padding:20px 18px;
  border:1px solid var(--line);border-left:3px solid var(--signal);
  background:linear-gradient(160deg,rgba(22,38,74,.92),rgba(14,26,51,.94));
  text-decoration:none;color:inherit;
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}
.page-products .pp-scene:hover,.page-products .pp-scene:focus-visible{
  border-color:var(--signal);border-left-color:var(--amber);
  background:linear-gradient(160deg,rgba(30,52,99,.95),rgba(16,29,56,.95));
  transform:translateY(-3px);
}
.page-products .pp-scene__when{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  color:var(--amber);text-transform:uppercase;
}
.page-products .pp-scene p{color:var(--pp-body);font-size:15px;line-height:1.7;margin:0}
.page-products .pp-scene__go{
  display:inline-block;margin-top:14px;font-family:var(--font-mono);
  font-size:13px;color:var(--signal);
}

/* phone */
.page-products .pp-phone__grid{display:grid;gap:26px;align-items:start}
.page-products .pp-phone__figure{
  margin:0;max-width:300px;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:linear-gradient(180deg,var(--blue-600),var(--blue-900));
}
.page-products .pp-phone__figure img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
}
.page-products .pp-phone__cap{
  font-family:var(--font-mono);font-size:12px;color:var(--metal);
  padding:10px 12px;border-top:1px solid var(--line-soft);line-height:1.5;
}
.page-products .pp-specs{
  list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line-soft);
}
.page-products .pp-specs li{
  display:grid;gap:4px;padding:13px 0;border-bottom:1px solid var(--line-soft);
}
.page-products .pp-specs__v{
  color:var(--signal);font-size:15px;letter-spacing:.02em;
}
.page-products .pp-specs__k{color:var(--pp-dim);font-size:14px;line-height:1.65}

/* tablet */
.page-products .pp-tablet__head{display:grid;gap:8px}
.page-products .pp-tablet__grid{display:grid;gap:18px;margin-top:24px}
.page-products .pp-tablet__figure{
  margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--blue-700),var(--blue-900));
}
.page-products .pp-tablet__figure img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
}
.page-products .pp-tablet__cap{
  font-family:var(--font-mono);font-size:12px;color:var(--metal);
  padding:10px 14px;border-top:1px solid var(--line-soft);
}
.page-products .pp-match-list{display:grid;gap:12px}
.page-products .pp-match{
  border:1px solid var(--line);background:rgba(30,52,99,.32);
  padding:16px 15px;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.page-products .pp-match:hover{border-color:var(--line-strong);background:rgba(30,52,99,.5)}
.page-products .pp-match__row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
}
.page-products .pp-match__home{color:var(--amber)}
.page-products .pp-match__vs{color:var(--metal);font-size:12px}
.page-products .pp-match__away{color:var(--paper)}
.page-products .pp-match__note{color:var(--pp-dim);font-size:14px;line-height:1.7;margin:10px 0 0}

/* desktop */
.page-products .pp-desktop__grid{display:grid;gap:24px;align-items:start}
.page-products .pp-rows{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line-soft)}
.page-products .pp-row{
  display:grid;gap:4px;padding:13px 0;border-bottom:1px solid var(--line-soft);
}
.page-products .pp-row__k{color:var(--amber);font-size:14px}
.page-products .pp-row__v{color:var(--pp-body);font-size:14px;line-height:1.7}
.page-products .pp-fold{
  margin-top:22px;border:1px solid var(--line);background:rgba(30,52,99,.3);
}
.page-products .pp-fold__sum{
  cursor:pointer;list-style:none;padding:14px 16px;
  font-family:var(--font-mono);font-size:13px;color:var(--signal);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.page-products .pp-fold__sum::-webkit-details-marker{display:none}
.page-products .pp-fold__sum::after{content:"+";font-size:16px;color:var(--metal)}
.page-products .pp-fold[open] .pp-fold__sum::after{content:"–";color:var(--signal)}
.page-products .pp-fold__sum:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.page-products .pp-fold__body{padding:0 16px 16px;border-top:1px solid var(--line-soft)}
.page-products .pp-fold__body p{color:var(--pp-body);font-size:14px;line-height:1.75;margin:12px 0 0}
.page-products .pp-desktop__figure{
  margin:0;border:1px solid var(--line);overflow:hidden;border-radius:var(--r);
  background:linear-gradient(160deg,var(--blue-700),var(--blue-900));
}
.page-products .pp-desktop__figure img{
  display:block;width:100%;height:auto;aspect-ratio:14/9;object-fit:cover;
}
.page-products .pp-desktop__cap{
  font-family:var(--font-mono);font-size:12px;color:var(--metal);
  padding:10px 14px;border-top:1px solid var(--line-soft);
}

/* remind */
.page-products .pp-remind__grid{display:grid;gap:12px;margin-top:24px}
.page-products .pp-tier{
  border:1px solid var(--line);border-top:2px solid var(--blue-600);
  background:linear-gradient(170deg,rgba(22,38,74,.85),rgba(11,21,39,.9));
  padding:18px 16px 20px;
}
.page-products .pp-tier--48,.page-products .pp-tier--6,.page-products .pp-tier--30{
  border-top-color:rgba(255,138,60,.55);
}
.page-products .pp-tier--6{border-top-color:var(--amber)}
.page-products .pp-tier__when{font-family:var(--font-mono);font-size:14px;color:var(--amber);margin:0}
.page-products .pp-tier__track{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  margin:16px 0 4px;height:14px;
}
.page-products .pp-tier__track::before{
  content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;
  background:var(--line-strong);
}
.page-products .pp-tier__dot{
  position:relative;width:10px;height:10px;border-radius:50%;
  background:var(--blue-800);border:1px solid var(--line-strong);
}
.page-products .pp-tier__dot--on{
  background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(255,138,60,.18);
}
.page-products .pp-tier__who{color:var(--pp-dim);font-size:14px;line-height:1.7;margin:6px 0 0}
.page-products .pp-remind__figure{
  margin:24px 0 0;border:1px solid var(--line);overflow:hidden;border-radius:var(--r);
  background:linear-gradient(160deg,var(--blue-700),var(--blue-900));
}
.page-products .pp-remind__figure img{
  display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;
}
.page-products .pp-remind__cap{
  font-family:var(--font-mono);font-size:12px;color:var(--metal);
  padding:10px 14px;border-top:1px solid var(--line-soft);
}

/* version stats */
.page-products .pp-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  margin-top:24px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.page-products .pp-stat{
  background:var(--blue-850);padding:18px 15px;display:grid;gap:6px;align-content:start;
}
.page-products .pp-stat__num{
  font-family:var(--font-display);font-size:clamp(1.5rem,5vw,2rem);
  line-height:1;color:var(--signal);letter-spacing:-.01em;
}
.page-products .pp-stat__label{font-size:13px;line-height:1.6;color:var(--pp-dim)}

/* compare table */
.page-products .pp-table__scroll{
  margin-top:22px;overflow-x:auto;border:1px solid var(--line);
  background:rgba(14,26,51,.6);-webkit-overflow-scrolling:touch;
}
.page-products .pp-table{
  width:100%;min-width:520px;border-collapse:collapse;font-size:14px;
}
.page-products .pp-table th,.page-products .pp-table td{
  padding:13px 14px;text-align:left;border-bottom:1px solid var(--line-soft);
}
.page-products .pp-table thead th{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--metal);text-transform:uppercase;border-bottom:1px solid var(--line-strong);
  background:rgba(22,38,74,.7);
}
.page-products .pp-table tbody th{
  font-weight:400;color:var(--paper);font-size:14px;line-height:1.5;
}
.page-products .pp-table tbody tr{transition:background .2s var(--ease)}
.page-products .pp-table tbody tr:hover{background:rgba(59,240,140,.08)}
.page-products .pp-table td{width:88px}
.page-products .pp-yes{
  font-family:var(--font-mono);color:var(--signal);font-size:16px;line-height:1;
}
.page-products .pp-no{
  font-family:var(--font-mono);color:var(--metal);opacity:.55;font-size:16px;line-height:1;
}

/* cta */
.page-products .pp-cta{border-top:1px solid var(--line)}
.page-products .pp-cta__inner{display:grid;gap:22px;align-items:start}
.page-products .pp-cta__links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.page-products .pp-cta__links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--r);
  color:var(--paper);text-decoration:none;font-size:15px;
  background:rgba(30,52,99,.28);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);
}
.page-products .pp-cta__links a::after{content:"→";font-family:var(--font-mono);color:var(--signal)}
.page-products .pp-cta__links a:hover,.page-products .pp-cta__links a:focus-visible{
  border-color:var(--signal);color:var(--signal);background:rgba(59,240,140,.1);
}

@media (min-width:720px){
  .page-products .pp-block{padding:64px 0}
  .page-products .pp-hero{padding:36px 0 16px}
  .page-products .pp-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:32px}
  .page-products .pp-hero__figure{clip-path:polygon(0 0,100% 4%,100% 100%,0 96%)}
  .page-products .pp-scenes__grid{grid-template-columns:repeat(3,1fr);align-items:start}
  .page-products .pp-scene:nth-child(2){margin-top:-14px}
  .page-products .pp-phone__grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:34px}
  .page-products .pp-tablet__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
  .page-products .pp-remind__grid{grid-template-columns:repeat(3,1fr)}
  .page-products .pp-stats{grid-template-columns:repeat(4,1fr)}
  .page-products .pp-cta__inner{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px}
  .page-products .pp-stat{padding:22px 18px}
}
@media (min-width:1024px){
  .page-products .pp-block{padding:80px 0}
  .page-products .pp-desktop__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:36px}
  .page-products .pp-tablet__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end}
  .page-products .pp-tablet__head .pp-text{margin-top:0}
  .page-products .pp-remind__figure{margin-top:32px}
  .page-products .pp-match-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .page-products *{transition:none!important;animation:none!important}
}
</>
<<<PAGE_CSS_END>>>
</main>