/* Responsive companion inside the algorithm iframe.
   Requires .sx-algorithm and .sx-algorithm-stage on the two original artboard divs. */
@media (max-width: 900px) {
  html, body { width: 100%; margin: 0; overflow-x: hidden; }
  .sx-algorithm {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }
  .sx-algorithm-stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden;
  }
  .sx-algorithm-stage > :is(div, section, button) {
    position: relative !important;
    inset: auto !important;
    max-width: 100%;
    min-width: 0;
  }
  .sx-algorithm-stage > svg { display: none; }
  .sx-algorithm-stage > div:first-of-type { order: 1; flex: none; margin-bottom: 28px; }
  .sx-algorithm-stage > div:nth-of-type(2) { order: 2; width: 100% !important; }
  .sx-algorithm-stage h1 { font-size: clamp(42px, 7vw, 62px) !important; line-height: 1.03 !important; letter-spacing: -.05em !important; text-wrap: balance; }
  .sx-algorithm-stage > div:nth-of-type(2) p { font-size: 17px !important; line-height: 1.5 !important; max-width: 560px; }
  .sx-algorithm-stage > div:nth-of-type(2) p:first-of-type { font-size: 15px !important; }
  .sx-algorithm-stage > canvas {
    order: 3;
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1440 / 1000;
    object-fit: contain;
    margin: 24px 0;
    flex: none;
  }
  .sx-algorithm-stage > section[aria-label="Picked for you"] {
    order: 4;
    width: 100% !important;
    max-width: 680px;
    height: auto !important;
    align-self: center;
    margin-bottom: 30px;
    border-top-color: #F6F6F7 !important;
  }
  .sx-algorithm-stage > section > div:first-child { display: none; }
  .sx-algorithm-stage > section > div[style*="height: 44px"] {
    height: auto !important;
    min-height: 52px;
  }
  .sx-algorithm-stage > section > div[style*="height: 52px"] {
    height: auto !important;
    min-height: 62px;
    padding-top: 22px !important;
  }
  .sx-algorithm-stage .row {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 46px;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
  }
  .sx-algorithm-stage .rn { min-width: 0; font-size: 16px; line-height: 1.4; white-space: normal; }
  .sx-algorithm-stage .rm { width: auto; font-size: 12px; }
  .sx-algorithm-stage .tag { font-size: 10px; line-height: 1.4; padding: 4px 6px; }
  .sx-algorithm-stage > section > div:last-child {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 144px;
    padding: 18px 12px !important;
    margin-top: 12px;
  }
  .sx-algorithm-stage > section > div:last-child > div > div[style*="gap: 24px"] { gap: 16px !important; }
  .sx-algorithm-stage > section > div:last-child [style*="width: 130px"] { flex: none; }
  .sx-algorithm-stage > div.lbl {
    order: 5;
    width: auto !important;
    font-size: 11px !important;
    line-height: 1.8;
    letter-spacing: .035em;
    margin-top: 4px;
  }
  .sx-algorithm-stage > div[role="list"] {
    order: 6;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px !important;
    margin-top: 20px;
  }
  .sx-algorithm-stage > .rp {
    order: 7;
    width: 132px !important;
    min-height: 48px;
    height: 48px !important;
    margin-top: 28px;
    align-self: flex-start;
    flex: none;
  }
}
@media (max-width: 560px) {
  .sx-algorithm-stage { padding: 48px 22px; }
  .sx-algorithm-stage h1 { font-size: clamp(38px, 10.5vw, 52px) !important; }
  .sx-algorithm-stage .row { grid-template-columns: minmax(0, 1fr) auto 39px; gap: 6px; padding-inline: 10px; }
  .sx-algorithm-stage .rn { font-size: 14px; }
  .sx-algorithm-stage .rm { font-size: 11px; }
  .sx-algorithm-stage .tag { font-size: 8px; padding: 4px; letter-spacing: .025em; }
  .sx-algorithm-stage > section > div[style*="padding: 16px"] span:first-child,
  .sx-algorithm-stage > section > div[style*="padding: 24px"] span:first-child { font-size: 15px !important; }
  .sx-algorithm-stage > section > div:last-child > div > div[style*="gap: 24px"] { gap: 12px !important; }
  .sx-algorithm-stage > section > div:last-child [style*="width: 130px"] { width: 114px !important; gap: 8px !important; }
  .sx-algorithm-stage > section > div:last-child [style*="font-size: 17px"] { font-size: 16px !important; }
  .sx-algorithm-stage > div.lbl { font-size: 9px !important; }
  .sx-algorithm-stage > div[role="list"] { gap: 14px !important; }
  .sx-algorithm-stage > div[role="list"] .lbl { font-size: 9px; }
}
.sx-algorithm-art{display:contents}
@media(max-width:900px){
 /* Source y=900 lands exactly on the stacked card's top edge (900 × .75 - 160). */
 .sx-algorithm-stage>.sx-algorithm-art{order:3;display:block;position:relative!important;width:calc(100% + 64px)!important;max-width:none;height:515px;flex:none;overflow:hidden;margin:12px -32px 0}
 .sx-algorithm-art>canvas{position:absolute!important;width:1080px!important;height:750px!important;left:calc(50% - 411px)!important;top:-160px!important;max-width:none}
 .sx-algorithm-stage>div:nth-of-type(2){order:1;flex:none;margin-bottom:28px}
 .sx-algorithm-stage>div:nth-of-type(3){order:2;width:100%!important;margin-bottom:0}
 .sx-algorithm-stage>div:nth-of-type(3) p{font-size:17px!important;line-height:1.5!important;max-width:560px}
 .sx-algorithm-stage>div:nth-of-type(3) p:first-of-type{font-size:15px!important}
 .sx-algorithm-stage>section[aria-label="Picked for you"]>div:first-child{display:block;left:50%!important;top:-5px!important;transform:translateX(-50%)}
 .sx-algorithm-stage .pl-in{animation-duration:300ms}
 .sx-algorithm-stage .d1{animation-delay:40ms}
 .sx-algorithm-stage .d2{animation-delay:80ms}
 .sx-algorithm-stage .d3{animation-delay:120ms}
 .sx-algorithm-stage .d4{animation-delay:160ms}
 .sx-algorithm-stage .pl-in .fb{animation-duration:200ms;animation-delay:40ms}
 .sx-algorithm-stage .pl-in .fb2{animation-delay:70ms}
 .sx-algorithm-stage .pl-in .fb3{animation-duration:200ms,12s;animation-delay:100ms,0s}
 .sx-algorithm-stage .pl-in .fb4{animation-delay:130ms}
 .sx-algorithm-stage .pl-in .fb5{animation-delay:160ms}
}
@media(max-width:560px){
 /* The same source endpoint at the phone canvas scale: 900 × .6 - 150. */
 .sx-algorithm-stage>.sx-algorithm-art{width:calc(100% + 44px)!important;height:390px;margin:12px -22px 0}
 .sx-algorithm-art>canvas{width:864px!important;height:600px!important;left:calc(50% - 328.8px)!important;top:-150px!important}
}
@media(max-width:900px){.sx-algorithm-stage>.sx-algorithm-art{order:3!important}.sx-algorithm-stage>div:nth-of-type(2){order:1!important}.sx-algorithm-stage>div:nth-of-type(3){order:2!important}}
@media(max-width:900px){
 /* Override the original first-div spacing so the output reaches the card. */
 .sx-algorithm-stage>.sx-algorithm-art{margin-bottom:0!important}
}