.ark-mobile-figure { display: none; }

/* The mobile cognition diagram follows the 375px Figma canvas. Its artwork
   scales together while the surrounding hero keeps the shared site layout. */
@media (max-width: 720px) {
  .scenario-main {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 16px 8px;
  }
  .scenario-main > .scenario-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 0;
  }
  .scenario-main > .scenario-icon img { width: 28px; height: 28px; }
  .scenario-main > h3 { min-width: 0; margin-bottom: 0 !important; font-size: 16px !important; }
  .scenario-main > p,
  .scenario-main > .scenario-link { grid-column: 1 / -1; }
  .scenario-main > .scenario-link { margin: -10px 0; }
  .scenario-main > .scenario-link .btn-text { font-size: 14px; }

  .hero-narrow { min-height: 0; }
  .hero .showcase-cognition-figure { display: none; }
  .ark-mobile-figure {
    display: block;
    position: relative;
    container-type: inline-size;
    width: calc(100% + 40px);
    max-width: 480px;
    margin: 20px -20px 0;
    align-self: center;
    color: #2d3a57;
    text-align: left;
  }
  .ark-mobile-diagram { position: relative; height: calc(42400cqw / 375); }
  .ark-mobile-art,
  .ark-mobile-heading,
  .ark-mobile-label,
  .ark-mobile-title,
  .ark-mobile-subtitle {
    position: absolute;
    left: calc(var(--x) * 100% / 375);
    top: calc(var(--y) * 100cqw / 375);
  }
  .ark-mobile-art {
    display: block;
    width: calc(var(--w) * 100% / 375);
    height: calc(var(--h) * 100cqw / 375);
    max-width: none;
    pointer-events: none;
  }
  .ark-mobile-heading,
  .ark-mobile-label { font-size: clamp(12px, 3.2cqw, 15.36px); font-weight: 500; line-height: 1; white-space: nowrap; }
  .ark-mobile-heading { color: #196ff8; }
  .ark-mobile-title { color: #24282e; font-size: clamp(18px, 5.333cqw, 25.6px); font-weight: 700; line-height: 1.4; white-space: nowrap; }
  .ark-mobile-subtitle { color: #168ff9; font-size: clamp(13px, 3.733cqw, 17.92px); line-height: 1.4; white-space: nowrap; }
  .ark-mobile-row {
    position: absolute;
    left: calc(2600% / 375);
    right: calc(2200% / 375);
    top: calc(var(--y) * 100cqw / 375);
    display: grid;
    grid-template-columns: minmax(0, 112fr) minmax(0, 97fr) minmax(0, 95fr);
    gap: calc(1100cqw / 375);
  }
  .ark-mobile-card {
    display: flex;
    align-items: center;
    gap: calc(400cqw / 375);
    height: calc(3200cqw / 375);
    min-width: 0;
    padding: 0 calc(800cqw / 375) 0 calc(900cqw / 375);
    border: 1px solid rgb(0 115 255 / 10%);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 2px 4px rgb(170 213 229 / 25%);
    font-size: clamp(10px, 3.467cqw, 16.64px);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }
  .ark-mobile-card:first-child { padding-left: calc(1200cqw / 375); }
  .ark-mobile-card img {
    flex: none;
    width: calc(2000cqw / 375);
    height: calc(2000cqw / 375);
  }
}