/* Product stack mockup for the 7-Day Mobility Reset.
   Built with HTML/CSS so it stays sharp at every size. All sizes are % of the stack width (cqw). */
.stack-mock {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.6;
  container-type: inline-size;
  margin: 0 auto;
  font-family: 'Oswald', 'Anton', sans-serif;
  text-transform: uppercase;
  color: #fff;
  user-select: none;
}
.stack-mock * { box-sizing: border-box; }
.sm-floor {
  position: absolute; left: 6%; right: 6%; top: 80%; height: 10%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), rgba(0,0,0,0) 70%);
  filter: blur(4px);
}

/* screen content shared by every device */
.sm-screen {
  position: absolute; inset: 0; overflow: hidden;
  background: #0a0a0a center / cover no-repeat;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 6% 7%;
}
.sm-screen::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,28,21,0.15) 0%, rgba(7,28,21,0.55) 45%, rgba(10,10,10,0.92) 100%);
}
.sm-screen > * { position: relative; }
.sm-tag {
  background: #f23545; color: #fff; font-family: 'Barlow', 'Work Sans', sans-serif; font-weight: 800;
  letter-spacing: 0.08em; padding: 0.25em 0.6em; border-radius: 0.3em; margin-bottom: 0.45em;
}
.sm-title { font-weight: 700; line-height: 1.02; letter-spacing: 0.01em; }
.sm-title .r { color: #f23545; }
.sm-sub { font-family: 'Barlow', 'Work Sans', sans-serif; font-weight: 600; opacity: 0.85; text-transform: none; margin-top: 0.4em; }

/* laptop */
.sm-laptop { position: absolute; left: 19%; width: 62%; top: 1%; z-index: 2; }
.sm-laptop .lid {
  position: relative; aspect-ratio: 16 / 10; background: #111; border-radius: 1.6cqw 1.6cqw 0.4cqw 0.4cqw;
  padding: 1.1cqw; box-shadow: 0 2cqw 4cqw -1cqw rgba(0,0,0,0.5), inset 0 0 0 0.25cqw #2b2b2b;
}
.sm-laptop .lid .sm-screen { position: absolute; inset: 1.1cqw; border-radius: 0.5cqw; }
.sm-laptop .base {
  height: 1.8cqw; margin: 0 -5%; background: linear-gradient(#d9d9d9, #9a9a9a);
  border-radius: 0 0 2cqw 2cqw; box-shadow: 0 1.2cqw 2cqw -0.8cqw rgba(0,0,0,0.6);
}
.sm-laptop .base::after { content: ""; display: block; width: 16%; height: 45%; margin: 0 auto; background: #8a8a8a; border-radius: 0 0 1cqw 1cqw; }
.sm-laptop .sm-logo { width: 26%; position: absolute; top: 7%; left: 7%; }
.sm-laptop .sm-play {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 6.5cqw; height: 6.5cqw; border-radius: 50%; background: #f23545; display: grid; place-items: center;
  box-shadow: 0 0 0 1cqw rgba(242,53,69,0.25);
}
.sm-laptop .sm-play::after { content: ""; border-left: 2cqw solid #fff; border-top: 1.2cqw solid transparent; border-bottom: 1.2cqw solid transparent; margin-left: 0.5cqw; }
.sm-laptop .sm-tag { font-size: 1.25cqw; }
.sm-laptop .sm-title { font-size: 4.4cqw; }
.sm-laptop .sm-sub { font-size: 1.5cqw; }

/* tablets */
.sm-tablet {
  position: absolute; width: 29%; aspect-ratio: 4 / 3; top: 44%; z-index: 4;
  background: #111; border-radius: 1.8cqw; padding: 1.1cqw;
  box-shadow: 0 2.5cqw 4cqw -1cqw rgba(0,0,0,0.55), inset 0 0 0 0.25cqw #2d2d2d;
}
.sm-tablet .sm-screen { inset: 1.1cqw; border-radius: 0.8cqw; }
.sm-tablet.left { left: 6%; transform: rotate(-3deg); }
.sm-tablet.right { right: 6%; transform: rotate(3deg); }
.sm-tablet .sm-tag { font-size: 0.95cqw; }
.sm-tablet .sm-title { font-size: 2.35cqw; }

/* phone */
.sm-phone {
  position: absolute; left: 43.5%; width: 13%; aspect-ratio: 9 / 18.5; top: 39%; z-index: 5;
  background: #111; border-radius: 2.2cqw; padding: 0.7cqw;
  box-shadow: 0 2.5cqw 4cqw -1cqw rgba(0,0,0,0.6), inset 0 0 0 0.25cqw #2d2d2d;
}
.sm-phone .sm-screen { inset: 0.7cqw; border-radius: 1.6cqw; padding: 10% 9%; }
.sm-phone::before {
  content: ""; position: absolute; z-index: 2; top: 1.3cqw; left: 50%; transform: translateX(-50%);
  width: 32%; height: 1cqw; background: #111; border-radius: 1cqw;
}
.sm-phone .sm-tag { font-size: 0.8cqw; }
.sm-phone .sm-title { font-size: 1.75cqw; }

/* product boxes */
.sm-box {
  position: absolute; top: 12%; width: 16%; aspect-ratio: 3 / 4.3; z-index: 1;
  transform-style: preserve-3d;
}
.sm-box .front {
  position: absolute; inset: 0; border-radius: 0.4cqw; overflow: hidden;
  box-shadow: 0 2cqw 3cqw -1cqw rgba(0,0,0,0.55);
}
.sm-box .front .sm-screen { padding: 10% 10%; justify-content: space-between; }
.sm-box .front .sm-screen::before { background: linear-gradient(180deg, rgba(10,10,10,0.9) 0%, rgba(7,28,21,0.35) 45%, rgba(10,10,10,0.9) 100%); }
.sm-box .spine {
  position: absolute; top: 0; bottom: 0; width: 16%;
  background: linear-gradient(90deg, #0c3a25, #1f7a4c);
  display: flex; align-items: center; justify-content: center;
}
.sm-box .spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1cqw; letter-spacing: 0.1em; white-space: nowrap; }
.sm-box.left { left: 1.5%; }
.sm-box.left .front { transform: perspective(60cqw) rotateY(18deg); transform-origin: left center; }
.sm-box.left .spine { left: -14%; transform: perspective(60cqw) rotateY(-55deg); transform-origin: right center; }
.sm-box.right { right: 1.5%; }
.sm-box.right .front { transform: perspective(60cqw) rotateY(-18deg); transform-origin: right center; }
.sm-box.right .spine { right: -14%; transform: perspective(60cqw) rotateY(55deg); transform-origin: left center; }
.sm-box .sm-logo { width: 78%; }
.sm-box .sm-title { font-size: 2.1cqw; }
.sm-box .sm-tag { font-size: 0.9cqw; align-self: flex-start; }

/* trust badge */
.sm-badge {
  position: absolute; left: 50%; transform: translateX(-50%); top: 83.5%; z-index: 6;
  display: flex; align-items: center; gap: 1.2cqw;
  background: linear-gradient(180deg, #134a2e, #0b2a1b);
  border: 0.3cqw solid #1f7a4c; border-radius: 1cqw;
  padding: 1cqw 2.4cqw 1cqw 1.4cqw;
  box-shadow: 0 1.5cqw 3cqw -1cqw rgba(0,0,0,0.6);
  white-space: nowrap;
}
.sm-badge .shield {
  width: 3.6cqw; height: 4.2cqw; background: #f5b400;
  clip-path: polygon(50% 0, 100% 16%, 100% 55%, 50% 100%, 0 55%, 0 16%);
  display: grid; place-items: center; color: #0b2a1b; font-size: 2.2cqw; font-weight: 900; font-family: 'Barlow', sans-serif;
}
.sm-badge small { display: block; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 1cqw; letter-spacing: 0.15em; opacity: 0.85; }
.sm-badge b { display: block; font-weight: 700; font-size: 2.6cqw; line-height: 1; }

/* layout fixes: laptop title sits top-left so the phone doesn't cover it */
.sm-laptop .sm-screen { justify-content: flex-start; padding-top: 5%; }
.sm-laptop .sm-logo { position: static; margin-bottom: 4%; }
.sm-laptop .sm-play { left: 76%; top: 42%; }
.stack-mock { aspect-ratio: 16 / 9.7; }
.sm-badge { top: 86%; }
.sm-floor { top: 82%; }
.sm-box .front .sm-screen { justify-content: flex-start; gap: 6%; }
.sm-box .front .sm-screen::before { background: linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.75) 45%, rgba(7,28,21,0.2) 100%); }
.sm-laptop .sm-screen::before { background: linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.55) 50%, rgba(7,28,21,0.2) 100%); }
.sm-logo { filter: drop-shadow(0 0.2cqw 0.4cqw rgba(0,0,0,0.6)); }
.stack-mock { aspect-ratio: 16 / 9.3; }
.sm-badge { top: 88%; }