/* IDO — device mockups built in CSS (Figma: Laptop 222:1927 native 1240×600 · Phone 222:1933 native 332×674).
   Every measure is a fraction of the frame width (container units), so one component scales from the
   400-wide carousel thumbnail to the 1066-wide case band. Physical sides on purpose: a device does not mirror in RTL.
   Markup:
   <div class="mockup-laptop"><div class="mockup-laptop__lid"></div><div class="mockup-laptop__screen"><picture>…<img></picture></div>
     <div class="mockup-laptop__camera"></div><div class="mockup-laptop__base"></div><div class="mockup-laptop__notch"></div></div>
   <div class="mockup-phone"><div class="mockup-phone__body"></div><div class="mockup-phone__screen"><picture>…</picture></div>
     <i class="mockup-phone__btn mockup-phone__btn--power"></i><i class="mockup-phone__btn mockup-phone__btn--vol1"></i><i class="mockup-phone__btn mockup-phone__btn--vol2"></i></div> */

.mockup-laptop, .mockup-phone { position: relative; width: 100%; container-type: inline-size; direction: ltr; }
.mockup-laptop { aspect-ratio: 1240 / 600; --u: calc(100cqw / 1240); }
.mockup-phone  { aspect-ratio: 332 / 674;  --u: calc(100cqw / 332); }
.mockup-laptop > *, .mockup-phone > * { position: absolute; }

/* Laptop */
.mockup-laptop__lid {
  left: calc(var(--u) * 70); top: 0; width: calc(var(--u) * 1100); height: calc(var(--u) * 575);
  background: var(--color-ink-900);
  border-radius: calc(var(--u) * 28) calc(var(--u) * 28) calc(var(--u) * 6) calc(var(--u) * 6);
  box-shadow: var(--mockup-shadow, var(--shadow-device));
}
.mockup-laptop__screen {
  left: calc(var(--u) * 90); top: calc(var(--u) * 22); width: calc(var(--u) * 1060); height: calc(var(--u) * 527);
  border-radius: calc(var(--u) * 6); overflow: hidden; background: var(--color-ink-800);
}
.mockup-laptop__camera {
  left: calc(var(--u) * 617); top: calc(var(--u) * 8); width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  border-radius: 50%; background: var(--color-ink-700);
}
.mockup-laptop__base {
  left: 0; top: calc(var(--u) * 575); width: 100%; height: calc(var(--u) * 24);
  border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 20) calc(var(--u) * 20);
  background: linear-gradient(to bottom, #dedee0, #ababb2); /* Figma 222:1931 raw gradient (no variable) */
}
.mockup-laptop__notch {
  left: calc(var(--u) * 530); top: calc(var(--u) * 575); width: calc(var(--u) * 180); height: calc(var(--u) * 8);
  border-radius: 0 0 calc(var(--u) * 8) calc(var(--u) * 8); background: var(--color-ink-300);
}

/* Phone */
.mockup-phone__body {
  left: calc(var(--u) * 4); top: 0; width: calc(var(--u) * 324); height: 100%;
  border-radius: calc(var(--u) * 52); background: var(--color-ink-900);
  box-shadow: var(--mockup-shadow, var(--shadow-device));
}
.mockup-phone__screen {
  left: calc(var(--u) * 16); top: calc(var(--u) * 12); width: calc(var(--u) * 300); height: calc(var(--u) * 650);
  border-radius: calc(var(--u) * 40); overflow: hidden; background: var(--color-ink-800);
}
.mockup-phone__btn { width: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: var(--color-ink-700); }
.mockup-phone__btn--power { left: calc(var(--u) * 328); top: calc(var(--u) * 170); height: calc(var(--u) * 84); }
.mockup-phone__btn--vol1  { left: 0; top: calc(var(--u) * 140); height: calc(var(--u) * 44); }
.mockup-phone__btn--vol2  { left: 0; top: calc(var(--u) * 196); height: calc(var(--u) * 44); }

/* Screenshots fill the screen from the top */
.mockup-laptop__screen img, .mockup-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }