.unbox{padding:32px 0 56px}
.unbox h1{font-size:clamp(26px,3.6vw,40px);margin:8px 0 10px}
.lead{color:var(--mute);max-width:640px;margin-bottom:24px}
.carton-open{
  display:grid;grid-template-columns:1fr 1.2fr 1fr;
  grid-template-rows:auto auto;
  gap:8px;
  background:#efe6d4;padding:10px;border:3px solid #d4c4a4;
}
.flap-card{scroll-margin-top:72px;background:#fff;padding:18px 14px;border:1px dashed var(--line)}
.flap-card h2{font-size:16px;margin-bottom:8px}
.flap-card p{font-size:13px;color:var(--mute);margin-bottom:12px}
#win{grid-column:1;grid-row:1}
#mac{grid-column:3;grid-row:1}
#app{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center}
#web{grid-column:1;grid-row:2}
#scrm{grid-column:3;grid-row:2}
#app img{width:100%;height:110px;object-fit:cover;margin:8px 0;border-radius:8px}

.seal{padding:8px 0 56px}
.seal-grid{display:grid;grid-template-columns:200px 1fr;gap:18px}
.steps{display:flex;flex-direction:column;gap:10px}
.steps span{padding:10px 12px;background:#fff;border-left:6px dotted var(--tape);font-size:13px;font-weight:700}
.chart{width:100%;border-collapse:collapse;background:#fff;border:1px dashed var(--line);font-size:14px}
.chart th,.chart td{padding:10px 12px;text-align:left;border-bottom:1px dashed var(--line)}
.chart th{background:#e8f6ee;color:var(--safe)}

@media(max-width:900px){
  .carton-open,.seal-grid{grid-template-columns:1fr}
  #win,#mac,#app,#web,#scrm{grid-column:auto;grid-row:auto}
}