/* Products I've Built + Side Projects. Scoped to .products / .prod-* / .side-*  */

.products,
.side {
  --prod-ink: #141414;
  --prod-ink-2: #3d3d3d;
  --prod-line: .15em solid var(--fg, #141414);
  --prod-radius: 1.5em;
  --prod-shadow: .5em .5em 0 var(--fg, #141414);
  --prod-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: relative;
  width: 100%;
  max-width: 100vw;
  padding: 2em 2em 6em;
  overflow-x: clip;
}

.products-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

/* ---------- shared body typography (overrides theme's p { formula-narrow }) ---------- */
.products p,
.products li,
.products dd,
.side p,
.side li {
  font-family: var(--prod-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--prod-ink-2);
  letter-spacing: 0;
  text-transform: none;
}

.products ul,
.side ul { list-style: none; margin: 0; padding: 0; }

/* ---------- card ---------- */
.prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: var(--prod-line);
  border-radius: var(--prod-radius);
  box-shadow: var(--prod-shadow);
  overflow: hidden;
  min-width: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.prod-card:hover { transform: translate(-.15em, -.15em); box-shadow: .65em .65em 0 var(--fg, #141414); }

.prod-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-bottom: var(--prod-line);
  background: var(--bg2, #d7dbd2);
  overflow: hidden;
}
.prod-media img,
.side-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.prod-badge {
  position: absolute;
  top: 1em;
  left: 1em;
  padding: .45em .85em .35em;
  background: var(--fg, #141414);
  color: var(--bg, #edf1e8);
  border-radius: 999px;
  font-family: supply-mono, ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.prod-body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1.75em 1.75em 2em;
  flex: 1;
}

.products .prod-kicker {
  font-family: supply-mono, ui-monospace, monospace;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--prod-ink);
  opacity: .6;
}

.prod-title {
  font-family: rader, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 2rem;
  line-height: .95;
  color: var(--prod-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25em .5em;
}
.prod-ar,
.side-title span[lang="ar"] {
  font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Geeza Pro", system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  text-transform: none;
}
.prod-ar {
  font-size: .62em;
  padding: .2em .55em .1em;
  border: .1em solid var(--fg, #141414);
  border-radius: .5em;
  background: var(--accent2, #f4f1bb);
  line-height: 1.4;
}

.products .prod-lede {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--prod-ink);
}

.prod-list { display: flex; flex-direction: column; gap: .55em; }
.products .prod-list li {
  position: relative;
  padding-left: 1.4em;
}
.prod-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--accent1, #ed6a5a);
  border: .1em solid var(--fg, #141414);
}

.prod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
  margin-top: auto !important;
  padding-top: .5em !important;
}
.products .prod-chips li,
.side .prod-chips li {
  font-family: supply-mono, ui-monospace, monospace;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--prod-ink);
  padding: .55em .8em .45em;
  border: .1em solid var(--fg, #141414);
  border-radius: 999px;
  background: var(--bg, #edf1e8);
  white-space: nowrap;
}

/* stats (S2S) */
.prod-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75em;
  margin: 0;
}
.prod-stats > div {
  padding: .85em 1em;
  background: var(--accent2, #f4f1bb);
  border: .1em solid var(--fg, #141414);
  border-radius: 1em;
}
.prod-stats dt {
  font-family: rader, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--prod-ink);
}
.products .prod-stats dd { margin: .3em 0 0; font-size: .9rem; line-height: 1.4; }

/* ---------- flagship ---------- */
.prod-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background: var(--accent3, #9bc1bc);
}
.prod-feature .prod-media {
  aspect-ratio: auto;
  min-height: 100%;
  border-bottom: none;
  border-right: var(--prod-line);
}
.prod-feature .prod-media img { position: absolute; inset: 0; }
.prod-feature .prod-body { padding: 2.25em; background: #fff; }
.prod-feature .prod-title { font-size: 3rem; }
.prod-feature .prod-chips li { background: #fff; }

/* ---------- 2-up rows ---------- */
.prod-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2em;
}

/* agent suite: see assets/suite.css */

/* ---------- side projects ---------- */
.side .side-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5em;
}
.side-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: var(--prod-line);
  border-radius: var(--prod-radius);
  overflow: hidden;
  min-width: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.side-card:hover { transform: translate(-.15em, -.15em); box-shadow: var(--prod-shadow); }
.side-card:nth-child(1) .side-media { background: var(--accent1, #ed6a5a); }
.side-card:nth-child(2) .side-media { background: var(--accent2, #f4f1bb); }
.side-card:nth-child(3) .side-media { background: var(--accent3, #9bc1bc); }
.side-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-bottom: var(--prod-line);
  overflow: hidden;
}
.side-body { display: flex; flex-direction: column; gap: .75em; padding: 1.4em 1.4em 1.6em; flex: 1; }
.side-title {
  font-family: rader, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--prod-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em .5em;
}
.side-title span[lang="ar"] { font-size: .7em; color: var(--prod-ink-2); }
.side-sub {
  font-family: supply-mono, ui-monospace, monospace;
  font-style: normal;
  font-size: .5em;
  letter-spacing: .02em;
  color: var(--prod-ink-2);
}
.side .prod-chips { margin-top: auto; }

/* ---------- focus ---------- */
.prod-card:focus-within,
.side-card:focus-within { outline: 3px solid var(--accent1, #ed6a5a); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .prod-feature { grid-template-columns: 1fr; }
  .prod-feature .prod-media { aspect-ratio: 16 / 10; min-height: 0; border-right: none; border-bottom: var(--prod-line); }
  .prod-feature .prod-title { font-size: 2.4rem; }
  .side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-card:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .products,
  .side { padding: 1em 16px 4em; }
  .products-wrap { gap: 1.5em; }
  .prod-row,
  .side-grid { grid-template-columns: 1fr; gap: 1.25em; }
  .side-card:nth-child(3) { grid-column: auto; }
  .prod-card { box-shadow: .35em .35em 0 var(--fg, #141414); }
  .prod-body,
  .prod-feature .prod-body { padding: 1.25em 1.15em 1.5em; }
  .prod-title { font-size: 1.6rem; }
  .prod-feature .prod-title { font-size: 2rem; }
  .products .prod-lede { font-size: 1.05rem; }
  .prod-stats dt { font-size: 1.35rem; }
  .products .prod-chips li,
  .side .prod-chips li { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-card,
  .side-card { transition: none; }
  .prod-card:hover,
  .side-card:hover { transform: none; }
}

.prod-title .prod-logo { height: .95em; width: auto; vertical-align: -.08em; margin-right: .15em; display: inline-block; }

/* ---------- Nusuk card: official app screenshots (images/products/nusuk-app/) ---------- */
.prod-media.nusuk-shots {
  container-type: size;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 50% 105%, rgba(240, 214, 160, .55) 0%, rgba(240, 214, 160, 0) 70%),
    radial-gradient(60% 70% at 0% 0%, rgba(37, 99, 235, .10) 0%, rgba(37, 99, 235, 0) 70%),
    linear-gradient(165deg, #EEF3FB 0%, #F7F3EC 100%);
}
.nusuk-shots__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding-top: 9cqh;
}
.prod-media.nusuk-shots .nusuk-shot {
  flex: none;
  width: auto;
  height: min(64cqh, 43cqw);
  aspect-ratio: 540 / 783;
  object-fit: cover;
  border-radius: min(3.2cqh, 2.2cqw);
  border: 1px solid rgba(255, 255, 255, .85);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 27, 51, .08), 0 12px 28px rgba(11, 27, 51, .14);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.prod-media.nusuk-shots .nusuk-shot--l { transform: translate(3cqw, 3cqh) rotate(-5deg); }
.prod-media.nusuk-shots .nusuk-shot--r { transform: translate(-3cqw, 3cqh) rotate(5deg); }
.prod-media.nusuk-shots .nusuk-shot--main {
  position: relative;
  z-index: 2;
  height: min(80cqh, 54cqw);
  box-shadow: 0 2px 4px rgba(11, 27, 51, .08), 0 22px 44px rgba(11, 27, 51, .22);
}
.prod-card:hover .nusuk-shot--l { transform: translate(1.5cqw, 2cqh) rotate(-7deg); }
.prod-card:hover .nusuk-shot--r { transform: translate(-1.5cqw, 2cqh) rotate(7deg); }
@media (max-width: 700px) {
  .prod-media.nusuk-shots { aspect-ratio: 5 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .prod-media.nusuk-shots .nusuk-shot { transition: none; }
}
/* ---------- Raseel card: real product screens in device frames (images/products/raseel-app/) ---------- */
.prod-media.raseel-shots {
  container-type: size;
  isolation: isolate;
  background:
    radial-gradient(55% 65% at 50% 62%, rgba(37, 99, 235, .20) 0%, rgba(37, 99, 235, 0) 72%),
    radial-gradient(45% 50% at 92% 4%, rgba(147, 197, 253, .45) 0%, rgba(147, 197, 253, 0) 70%),
    radial-gradient(40% 45% at 4% 100%, rgba(147, 197, 253, .30) 0%, rgba(147, 197, 253, 0) 70%),
    linear-gradient(170deg, #EEF4FF 0%, #F7F9FC 100%);
}
.prod-media.raseel-shots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(37, 99, 235, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .07) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 55%, #000 0%, transparent 80%);
          mask-image: radial-gradient(60% 70% at 50% 55%, #000 0%, transparent 80%);
}
.prod-media.raseel-shots .prod-badge { z-index: 5; }
.raseel-shots__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding-top: 8cqh;
}
.raseel-shot {
  --h: min(68cqh, 46cqw);
  --b: calc(var(--h) * .024);
  --r: calc(var(--h) * .072);
  position: relative;
  flex: none;
  height: var(--h);
  width: calc(var(--h) * .4877);
  padding: var(--b);
  border-radius: calc(var(--r) + var(--b));
  background: linear-gradient(150deg, #2B3448 0%, #0B1120 38%, #0B1120 70%, #222B3E 100%);
  box-shadow:
    0 0 0 1px rgba(11, 31, 77, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    0 1px 2px rgba(11, 31, 77, .10),
    0 14px 28px -10px rgba(11, 31, 77, .30),
    0 30px 60px -24px rgba(37, 99, 235, .35);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.prod-media.raseel-shots .raseel-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r);
  background: #fff;
}
.raseel-shot--l,
.raseel-shot--r { z-index: 1; }
.raseel-shot--l { margin-right: calc(var(--h) * -.07); transform: translate(0, 4cqh) rotate(-4deg); }
.raseel-shot--r { margin-left: calc(var(--h) * -.07); transform: translate(0, 4cqh) rotate(4deg); }
.raseel-shot--l img,
.raseel-shot--r img { filter: saturate(.92); }
.raseel-shot--main {
  --h: min(82cqh, 55cqw);
  z-index: 2;
  box-shadow:
    0 0 0 1px rgba(11, 31, 77, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 2px 4px rgba(11, 31, 77, .12),
    0 22px 40px -12px rgba(11, 31, 77, .38),
    0 44px 80px -28px rgba(37, 99, 235, .50);
}
.raseel-toast {
  position: absolute;
  z-index: 3;
  left: calc(50% + min(16cqh, 10.7cqw));
  bottom: 10cqh;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .55em .9em .55em .55em;
  font-family: var(--read, Inter, system-ui, sans-serif);
  font-size: max(9.5px, min(1.85cqw, 3cqh));
  line-height: 1.2;
  color: #0B1F4D;
  white-space: nowrap;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: .9em;
  box-shadow: 0 1px 2px rgba(11, 31, 77, .08), 0 10px 24px -6px rgba(11, 31, 77, .22);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.raseel-toast__icon {
  position: relative;
  flex: none;
  width: 2.1em;
  height: 2.1em;
  border-radius: .6em;
  background: linear-gradient(160deg, #3B7BFF 0%, #2563EB 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.raseel-toast__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: .42em;
  height: .78em;
  border: solid #fff;
  border-width: 0 .16em .16em 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.raseel-toast__text { display: flex; flex-direction: column; gap: .15em; }
.raseel-toast__text strong { font-weight: 600; letter-spacing: -.01em; }
.raseel-toast__text span { color: #4B5D80; font-size: .88em; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .prod-card:hover .raseel-shot--main { transform: translateY(-1.5cqh); }
  .prod-card:hover .raseel-shot--l { transform: translate(-1.5cqw, 4cqh) rotate(-6deg); }
  .prod-card:hover .raseel-shot--r { transform: translate(1.5cqw, 4cqh) rotate(6deg); }
  .prod-card:hover .raseel-toast { transform: translate(.8cqw, -2.2cqh); }
}
@media (max-width: 700px) {
  .prod-media.raseel-shots { aspect-ratio: 5 / 4; }
  .raseel-toast { left: auto; right: 4cqw; bottom: 8cqh; }
}
@media (prefers-reduced-motion: reduce) {
  .raseel-shot,
  .raseel-toast { transition: none; }
}
.prod-title .prod-logo--raseel { height: 1em; width: 1em; border-radius: .25em; }

/* ---------- Mujeeb flagship: staged browser + phone (real screens) ---------- */
.prod-media.mujeeb-shots {
  container-type: size; isolation: isolate; min-height: 30rem;
  background:
    radial-gradient(55% 60% at 40% 60%, rgba(20, 184, 166, .16) 0%, rgba(20, 184, 166, 0) 70%),
    radial-gradient(50% 55% at 95% 5%, rgba(37, 99, 235, .18) 0%, rgba(37, 99, 235, 0) 70%),
    linear-gradient(165deg, #EEF6F7 0%, #F7F9FC 100%);
}
.prod-media.mujeeb-shots::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(11, 27, 51, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 27, 51, .06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 65% at 55% 50%, #000 0%, transparent 80%); mask-image: radial-gradient(60% 65% at 55% 50%, #000 0%, transparent 80%);
}
.prod-media.mujeeb-shots .prod-badge { z-index: 6; }
.mujeeb-shots__stage { position: absolute; inset: 0; }
.mj-win {
  position: absolute; left: 22cqw; top: 15cqh; width: 92cqw; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .08), 0 24px 50px -18px rgba(11, 27, 51, .30), 0 60px 110px -40px rgba(11, 27, 51, .35);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.mj-bar { height: 3.4cqh; min-height: 18px; display: flex; align-items: center; gap: 5px; padding: 0 10px; position: relative;
  background: linear-gradient(#F8FAFD, #F1F4F9); border-bottom: 1px solid #E5EAF1; }
.mj-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D7DEE8; }
.mj-bar span { position: absolute; left: 50%; transform: translateX(-50%); font: 500 max(9px, 1.5cqw)/1 var(--read, Inter, sans-serif); color: #64748B;
  background: #fff; border: 1px solid #E3E8F0; border-radius: 6px; padding: .3em 1.6em; }
.prod-media.mujeeb-shots .mj-win img { display: block; width: 100%; height: auto; }
.mj-phone {
  --h: 80cqh; position: absolute; left: 7cqw; bottom: -7cqh; height: var(--h); width: calc(var(--h) * .468); z-index: 3;
  padding: calc(var(--h) * .02); border-radius: calc(var(--h) * .085);
  background: linear-gradient(150deg, #2B3448 0%, #0B1120 38%, #0B1120 70%, #222B3E 100%);
  box-shadow: 0 0 0 1px rgba(11, 31, 77, .6), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 26px 46px -14px rgba(11, 31, 77, .45), 0 50px 90px -30px rgba(20, 184, 166, .45);
  transform: rotate(-3deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.prod-media.mujeeb-shots .mj-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--h) * .068); background: #fff; }
.mj-toast {
  position: absolute; z-index: 4; left: 33cqw; bottom: 13cqh; display: flex; align-items: center; gap: .65em; white-space: nowrap;
  padding: .6em 1em .6em .6em; font-family: var(--read, Inter, sans-serif); font-size: max(10px, min(2cqw, 3cqh)); line-height: 1.2; color: #0B1B33;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(220, 227, 238, .9); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(11, 27, 51, .3);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.mj-toast b { display: block; font-weight: 700; } .mj-toast small { display: block; color: #5B6B84; font-size: .86em; margin-top: .15em; }
.mj-toast__ic { width: 2em; height: 2em; flex: none; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #14B8A6, #0F8F86);
  box-shadow: 0 6px 14px -4px rgba(20, 184, 166, .6); }
.mj-toast__ic svg { width: 1.1em; height: 1.1em; }
.mj-wave { position: absolute; z-index: 4; left: 33cqw; bottom: 26cqh; display: flex; align-items: center; gap: 3px; height: 3.2cqh; min-height: 16px;
  padding: .45em .7em; background: #0B1B33; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(11, 27, 51, .5); }
.mj-wave i { width: 3px; height: 100%; border-radius: 2px; background: #5EEAD4; transform-origin: center; animation: mj-wave 1.1s ease-in-out infinite; }
.mj-wave i:nth-child(2) { animation-delay: .1s } .mj-wave i:nth-child(3) { animation-delay: .2s } .mj-wave i:nth-child(4) { animation-delay: .3s }
.mj-wave i:nth-child(5) { animation-delay: .4s } .mj-wave i:nth-child(6) { animation-delay: .5s } .mj-wave i:nth-child(7) { animation-delay: .6s }
@keyframes mj-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prod-feature:hover .mj-win { transform: translate(-6px, -4px); }
  .prod-feature:hover .mj-phone { transform: rotate(-1deg) translateY(-8px); }
  .prod-feature:hover .mj-toast { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .mj-wave i { animation: none; transform: scaleY(.7); } }
@media (max-width: 760px) {
  .prod-media.mujeeb-shots { min-height: 0; aspect-ratio: 5 / 4; }
  .mj-phone { --h: 78cqh; left: 5cqw; }
  .mj-toast { left: 30cqw; bottom: 9cqh; }
  .mj-wave { left: 30cqw; bottom: 25cqh; }
}
.prod-media.mujeeb-shots .mj-win img, .prod-media.mujeeb-shots .mj-phone img { position: static; inset: auto; }
.prod-media.mujeeb-shots .mj-win img { height: auto; }
.mj-phone { --h: 74cqh; bottom: -5cqh; }
.mj-wave { left: auto; right: 9cqw; bottom: 30cqh; }
.mj-toast { left: auto; right: 7cqw; bottom: 16cqh; }
/* Mujeeb: keep every element fully inside the card */
.mj-win { left: auto; right: 5cqw; top: 14cqh; width: 66cqw; }
.mj-phone { --h: min(72cqh, 74cqw); left: 6cqw; bottom: 7cqh; top: auto; }
.mj-toast { left: auto; right: 6cqw; bottom: 9cqh; }
@media (max-width: 760px) {
  .mj-win { right: 4cqw; top: 12cqh; width: 64cqw; }
  .mj-phone { --h: 76cqh; left: 5cqw; bottom: 6cqh; }
  .mj-toast { right: 4cqw; bottom: 8cqh; }
}
@media (max-width: 760px) {
  .products .prod-feature .prod-media.mujeeb-shots { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; }
  .mj-phone { --h: 74cqh; left: 6cqw; bottom: 7cqh; }
  .mj-win { right: 4cqw; top: 13cqh; width: 66cqw; }
  .mj-toast { right: 4cqw; bottom: 7cqh; font-size: 11px; }
}