/* Homepage Optimisation row: the "Stronger together" visual. A 640×400 canvas laid out in em (1em = 10px at full size)
   that scales with its container; on phones it stacks into a simple column with the connectors hidden. */
.mx-visual.st {
  display: block;
  container-type: inline-size;
}
.st-c {
  position: relative;
  width: 64em;
  height: 46.4em;
  margin: 0 auto;
  font-size: min(11px, calc(100cqw / 64));
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
}
.st-c > * {
  position: absolute;
}
.st-c ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.st-c {
  margin-top: 1.4em;
}
.st-title {
  left: 0;
  top: -1.4em;
  font: 700 1.6em/1.2 "Sora", sans-serif;
  letter-spacing: -0.03em;
}
.st-title small {
  display: block;
  margin-bottom: 0.25em;
  font: 600 0.6em/1.2 "JetBrains Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mx-text .hp-note {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: var(--muted);
}
.st-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  color: var(--c);
  background: var(--bg);
}
.st-ico svg {
  width: 1.4em;
  height: 1.4em;
}

/* Connectors */
.st-wires {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.st-wires path {
  stroke: #ff681b;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.75;
}
.st-ends circle {
  fill: #ff681b;
}
.st-dots circle {
  fill: #ff681b;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 104, 27, 0.7));
}

/* Laptop */
.st-lap {
  left: 21em;
  top: 3em;
  width: 22em;
}
.st-plinth {
  position: absolute;
  left: -4em;
  right: -4em;
  top: 12.6em;
  height: 4.2em;
  border-radius: 50%;
  background: radial-gradient(closest-side, #e6e1d6, #ece8df 70%, rgba(236, 232, 223, 0));
}
.st-screen {
  position: relative;
  height: 14em;
  padding: 0.6em;
  border-radius: 1.1em 1.1em 0.3em 0.3em;
  background: #1f2023;
  box-shadow: 0 1.6em 2.8em -1.8em rgba(40, 25, 10, 0.6);
}
.st-base {
  position: relative;
  display: block;
  height: 1em;
  margin: 0 -2.2em;
  border-radius: 0.2em 0.2em 1em 1em;
  background: linear-gradient(#d9d6cf, #bdb9b0);
}
.st-bar365 {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 1.7em;
  padding: 0 0.7em;
  border-radius: 0.5em 0.5em 0 0;
  background: #f4f6f9;
  border-bottom: 1px solid #e3e7ec;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.st-bar365 b {
  font-size: 0.75em;
  font-weight: 600;
}
.st-waffle {
  display: grid;
  grid-template-columns: repeat(3, 0.22em);
  gap: 0.13em;
}
.st-waffle i {
  width: 0.22em;
  height: 0.22em;
  background: #616161;
}
.st-search {
  flex: 1;
  height: 0.85em;
  margin: 0 0.6em;
  border-radius: 1em;
  background: #e5e9ef;
}
.st-avatar {
  display: grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: #dfe7f1;
  color: #42617f;
}
.st-avatar svg {
  width: 0.95em;
  height: 0.95em;
}
.st-portal {
  display: flex;
  height: calc(100% - 1.7em);
  border-radius: 0 0 0.3em 0.3em;
  background: #fff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.st-nav {
  flex: none;
  width: 6.4em;
  padding: 0.5em 0.4em !important;
  border-right: 1px solid #eef0f3;
  background: #fafbfc;
}
.st-nav li {
  padding: 0.15em 0.4em;
  margin-bottom: 0.08em;
  border-radius: 0.3em;
  color: #5a6472;
  font-size: 0.68em;
  line-height: 1.45;
}
.st-nav li.on {
  background: #e7effa;
  color: #0f548c;
  font-weight: 600;
}
.st-main {
  flex: 1;
  padding: 0.8em 0.9em;
}
.st-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 2.6em);
  gap: 0.5em;
  margin-bottom: 0.8em;
}
.st-tiles > span {
  display: grid;
  place-items: center;
  border-radius: 0.6em;
  border: 1px solid #edf0f3;
  background: #f7f8fa;
  color: var(--c);
}
.st-tiles svg {
  width: 1.3em;
  height: 1.3em;
}
.st-tiles .st-shield {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: linear-gradient(160deg, #2b88d8, #0f6cbd);
  border: 0;
  color: #fff;
  box-shadow: 0 0 0 0 rgba(15, 108, 189, 0.4);
}
.st-tiles .st-shield svg {
  width: 2.4em;
  height: 2.4em;
}
.st-skel {
  display: block;
  height: 0.5em;
  margin-bottom: 0.45em;
  border-radius: 1em;
  background: #eef0f3;
}
.st-skel-s {
  width: 60%;
}

/* Cards */
.st-card {
  width: 17em;
  padding: 1em 1.1em 1.1em;
  border-radius: 1.2em;
  background: #fff;
  border: 1px solid #ebe7df;
  box-shadow: 0 1.4em 2.6em -1.8em rgba(60, 35, 10, 0.45);
}
.st-card > b {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.6em;
  font: 700 1.3em/1.2 "Sora", sans-serif;
  letter-spacing: -0.02em;
}
.st-card > b .st-ico {
  font-size: 0.77em;
}
.st-card li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.3em;
  font-size: 1.12em;
  line-height: 1.3;
  color: #3b3933;
}
.st-card li::before,
.st-doc li::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: #0dbf67
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.9'/%3E%3C/svg%3E")
    center / 80% no-repeat;
}
.st-pill {
  display: inline-block;
  margin-top: 0.8em;
  padding: 0.25em 0.8em;
  border-radius: 1em;
  background: #ddf6e8;
  color: #08703c;
  font: 600 1em/1.4 "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}
.st-id {
  left: 0;
  top: 3.4em;
}
.st-dev {
  right: 0;
  top: 3.4em;
}
.st-mail {
  left: 0;
  top: 17.4em;
}
.st-cloud {
  right: 0;
  top: 17.4em;
}

/* Admin access */
.st-admin {
  left: 28em;
  top: 15.6em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 18.6em;
  padding: 0.75em 0.9em;
  border-radius: 1.1em;
  background: #f1ecff;
  border: 1px solid #ddd2fb;
  box-shadow: 0 1.2em 2.4em -1.6em rgba(70, 40, 140, 0.5);
  --c: #6b4fbb;
  --bg: #fff;
}
.st-admin div {
  flex: 1;
  min-width: 0;
}
.st-admin b {
  display: block;
  font: 700 1.2em/1.2 "Sora", sans-serif;
  letter-spacing: -0.02em;
}
.st-admin small,
.st-xdr small {
  display: block;
  font-size: 0.95em;
  white-space: nowrap;
  color: #5d5a73;
}
.st-clock {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  color: #6b4fbb;
}
.st-hand {
  transform-origin: 8px 8px;
}

/* One connected picture */
.st-xdr {
  left: 17em;
  top: 28.2em;
  display: flex;
  align-items: center;
  gap: 1em;
  width: 30em;
  height: 5.4em;
  padding: 0 1.4em;
  border-radius: 1.3em;
  background: #232427;
  color: #fff;
  box-shadow: 0 1.6em 2.8em -1.8em rgba(20, 15, 10, 0.7);
}
.st-xdr b {
  display: block;
  font: 700 1.3em/1.2 "Sora", sans-serif;
  letter-spacing: -0.02em;
}
.st-xdr small {
  color: #a5c0dc;
  font-family: "JetBrains Mono", monospace;
}
.st-net {
  flex: none;
  width: 2.8em;
  height: 2.8em;
  color: #ff9a5c;
}
.st-net circle {
  fill: #232427;
  transform-box: fill-box;
  transform-origin: center;
}
.st-doc {
  left: 42.4em;
  top: 26.8em;
  width: 13em;
  padding: 0.9em 1em 1em;
  border-radius: 0.6em;
  background: #fffdf8;
  border: 1px solid #e7e1d4;
  box-shadow: 0 1.4em 2.6em -1.6em rgba(60, 35, 10, 0.5);
}
.st-doc b {
  display: block;
  margin-bottom: 0.4em;
  font-size: 1.05em;
  font-weight: 700;
}
.st-doc li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.45em;
  font-size: 1em;
}
.st-doc li i {
  flex: 1;
  height: 0.5em;
  border-radius: 1em;
  background: #ece6da;
}
.st-doc li:nth-child(2) i {
  flex: 0 0 60%;
}
.st-chips {
  left: 0;
  right: 0;
  top: 36.6em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7em 0.6em;
}
.st-chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 1em 0.35em 0.4em;
  border: 1px solid #d9d4ca;
  border-radius: 2em;
  background: #fff;
  font-size: 1.15em;
  font-weight: 600;
  white-space: nowrap;
}
.st-chips svg {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  padding: 0.38em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.st-foot {
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin: 0;
  font-size: 1.1em;
  color: var(--muted);
}
.st-tag {
  padding: 0.3em 0.7em;
  border: 1px solid #cfcac0;
  border-radius: 0.5em;
  font: 600 0.85em/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c5951;
}

/* Animation: JS adds .st-js (start hidden) and then .st-on when the visual scrolls into view.
   Ticks and pills appear once and stay; the shield, clock and network icon keep moving gently while on screen. */
.st-js .st-card li,
.st-js .st-doc li,
.st-js .st-chips span,
.st-js .st-pill {
  opacity: 0;
}
.st-on .st-card li,
.st-on .st-doc li {
  animation: st-pop 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(0.4s + var(--i) * 0.28s);
}
.st-on .st-doc li {
  animation-delay: calc(2.6s + var(--i) * 0.35s);
}
.st-on .st-chips span {
  animation: st-pop 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(3.8s + var(--i) * 0.12s);
}
.st-on .st-pill {
  animation: st-fade 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(0.4s + var(--i) * 0.28s + 0.3s);
}
.st-on .st-shield {
  animation: st-pulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) 1s infinite;
}
.st-on .st-hand {
  animation: st-sweep 8s linear infinite;
}
.st-on .st-net circle {
  animation: st-node 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.st-on .st-net circle:nth-of-type(2) {
  animation-delay: 0.4s;
}
.st-on .st-net circle:nth-of-type(3) {
  animation-delay: 0.8s;
}
.st-paused .st-shield,
.st-paused .st-hand,
.st-paused .st-net circle {
  animation-play-state: paused;
}
@keyframes st-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes st-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes st-pulse {
  0%,
  100% {
    transform: none;
    box-shadow: 0 0 0 0 rgba(15, 108, 189, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 0.6em rgba(15, 108, 189, 0);
  }
}
@keyframes st-sweep {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes st-node {
  0%,
  60%,
  100% {
    transform: none;
    fill: #232427;
  }
  25% {
    transform: scale(1.3);
    fill: #ff681b;
  }
}

/* Phones: a simple stack, connectors hidden */
@media (max-width: 760px) {
  .st-c {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "lap lap"
      "admin admin"
      "id dev"
      "mail cloud"
      "xdr xdr"
      "doc doc"
      "chips chips"
      "foot foot";
    gap: 0.8em;
    width: auto;
    height: auto;
    margin-top: 0;
    font-size: 10px;
  }
  .st-c > * {
    position: relative;
    inset: auto !important;
    width: auto;
  }
  .st-wires {
    display: none;
  }
  .st-title {
    grid-area: title;
  }
  .st-lap {
    grid-area: lap;
    justify-self: center;
    width: 22em;
    margin: 0;
    font-size: 7.2px;
  }
  .st-admin {
    grid-area: admin;
    justify-self: end;
    width: 18.6em;
    margin: -3.6em 0 1.6em;
  }
  .st-id {
    grid-area: id;
  }
  .st-dev {
    grid-area: dev;
  }
  .st-mail {
    grid-area: mail;
  }
  .st-cloud {
    grid-area: cloud;
  }
  .st-card {
    padding: 0.9em;
  }
  .st-card > b {
    font-size: 1.2em;
  }
  .st-card li {
    font-size: 1.05em;
    align-items: flex-start;
  }
  .st-xdr {
    grid-area: xdr;
    z-index: 1;
    width: auto;
    margin-top: 2em;
  }
  /* Phones swap the curved connectors for short straight ones with dots flowing down:
     laptop into the top cards, and the cards into the connected picture. */
  .st-id,
  .st-dev,
  .st-xdr {
    --h: 2.4em;
  }
  .st-xdr {
    --h: 2.8em;
  }
  .st-id::before,
  .st-dev::before,
  .st-xdr::before {
    content: "";
    position: absolute;
    left: calc(50% - 1px);
    bottom: 100%;
    width: 2px;
    height: var(--h);
    background: #ff681b;
    opacity: 0.55;
  }
  .st-id::after,
  .st-dev::after,
  .st-xdr::after {
    content: "";
    position: absolute;
    left: calc(50% - 0.4em);
    bottom: calc(100% + var(--h) - 0.4em);
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #ff681b;
    box-shadow: 0 0 6px rgba(255, 104, 27, 0.7);
    opacity: 0;
  }
  .st-on .st-id::after,
  .st-on .st-dev::after,
  .st-on .st-xdr::after {
    animation: st-flow 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .st-on .st-dev::after {
    animation-delay: 0.5s;
  }
  .st-on .st-xdr::after {
    animation-delay: 1.3s;
  }
  .st-paused .st-id::after,
  .st-paused .st-dev::after,
  .st-paused .st-xdr::after {
    animation-play-state: paused;
  }
  .st-doc {
    grid-area: doc;
    display: flex;
    align-items: center;
    gap: 1em;
    width: auto;
    margin: -1.8em 1.4em 0;
    padding: 2.2em 1.2em 1em;
  }
  .st-doc b {
    flex: none;
    margin: 0;
  }
  .st-doc ul {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6em;
  }
  .st-doc li {
    margin: 0;
  }
  .st-chips {
    grid-area: chips;
    justify-content: center;
    gap: 0.5em 0.4em;
    margin-top: 0.4em;
  }
  .st-chips span {
    font-size: 1.05em;
  }
  .st-foot {
    grid-area: foot;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.2em;
    text-align: center;
  }
}
@keyframes st-flow {
  0% {
    opacity: 0;
    transform: none;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateY(var(--h));
  }
  85%,
  100% {
    opacity: 0;
    transform: translateY(var(--h));
  }
}
@media (prefers-reduced-motion: reduce) {
  .st-dots {
    display: none;
  }
  .st-c *,
  .st-c *::before,
  .st-c *::after {
    animation: none !important;
  }
}