.plat{
  --side:clamp(1.25rem,4vw,3.5rem);
  position:relative;
  background:var(--foreground);color:oklch(0.985 0 0);
  padding:clamp(4.5rem,10vh,8rem) var(--side) clamp(4.5rem,10vh,8rem);
}
.plat .kicker{color:oklch(1 0 0 / .55);}
.plat-top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;gap:clamp(2rem,5vw,4.5rem);
  padding-bottom:clamp(2.5rem,5vh,3.5rem);
}
.plat h2{
  margin:0;color:#fff;
  font-size:clamp(1.875rem,4.4vw,3.5rem);
  font-weight:600;line-height:1.02;
  letter-spacing:-.032em;text-transform:uppercase;
}
.plat h2 .dim{color:oklch(1 0 0 / .55);}
.plat-note{
  margin:0;max-width:44ch;color:oklch(1 0 0 / .55);
  font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;
}

.plat-body{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,2.05fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
}

/* --- tab list --- */
.tabs{display:flex;flex-direction:column;}
.tab{
  position:relative;
  display:block;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;
  padding:1.125rem 0 1.25rem 1.25rem;
  border-top:1px solid oklch(1 0 0 / .16);
  color:inherit;font-family:inherit;
}
.tabs .tab:last-child{border-bottom:1px solid oklch(1 0 0 / .16);}
.tab::before{
  content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;
  background:#fff;transform:scaleY(0);transform-origin:top;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.tab[aria-selected="true"]::before{transform:scaleY(1);}
.tab-name{
  display:block;
  font-size:clamp(1rem,1.4vw,1.1875rem);font-weight:600;
  letter-spacing:-.018em;color:oklch(1 0 0 / 0.42);
  transition:color .3s;
}
.tab[aria-selected="true"] .tab-name{color:#fff;}
.tab:hover .tab-name{color:oklch(1 0 0 / 0.75);}
.tab-desc{
  display:block;margin-top:.375rem;max-width:30ch;
  color:oklch(1 0 0 / .55);
  font-size:.8125rem;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s,margin .4s;
}
.tab[aria-selected="true"] .tab-desc{max-height:5rem;opacity:1;}

/* --- screen frame --- */
.frame{
  position:relative;
  border-radius:var(--r-4xl);
  background:oklch(1 0 0 / .06);
  outline:1px solid oklch(1 0 0 / 0.08);outline-offset:-1px;
  padding:.5rem;overflow:hidden;
}
.frame-bar{
  display:flex;align-items:center;gap:.4375rem;
  padding:.5rem .75rem .75rem;
}
.frame-dot{
  width:.5rem;height:.5rem;border-radius:9999px;
  background:oklch(1 0 0 / 0.16);
}
.frame-path{
  margin-left:.625rem;color:oklch(1 0 0 / .55);
  font-size:.6875rem;font-weight:500;letter-spacing:.04em;
}
.screens{
  position:relative;
  border-radius:var(--r-3xl);overflow:hidden;
  background:oklch(1 0 0 / 0.04);
  aspect-ratio:16/10;
}
.screen{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:top left;
  opacity:0;transform:scale(1.015);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.screen.on{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .screen{transition:opacity .01s;transform:none;}
}

@media (max-width:940px){
  .plat-top{grid-template-columns:1fr;align-items:start;gap:1.5rem;}
  .plat-body{grid-template-columns:1fr;gap:1.75rem;}
  .tabs{
    flex-direction:row;gap:.5rem;
    overflow-x:auto;scrollbar-width:none;
    margin:0 calc(-1 * var(--side));padding:0 var(--side) .25rem;
  }
  .tabs::-webkit-scrollbar{display:none;}
  .tab{
    flex:0 0 auto;width:auto;padding:.625rem 1rem;
    border:1px solid oklch(1 0 0 / .16);border-radius:9999px;
  }
  .tabs .tab:last-child{border-bottom:1px solid oklch(1 0 0 / .16);}
  .tab::before{display:none;}
  .tab-desc{display:none;}
  .tab[aria-selected="true"]{background:#fff;border-color:transparent;}
  .tab[aria-selected="true"] .tab-name{color:var(--foreground);}
  .tab-name{font-size:.875rem;white-space:nowrap;}
}